기술면접을 보면서 받았던 질문중에 하나가 바로 JPG, PNG의 차이점이었다.
사실 이 부분에 대해선 고민했던적이 없어서 '화질이 상대적으로 나쁘고 좋다, 투명도 지원여부' 정도로만 대답했었는데 나중에 찾아보니 면접에서 이 질문을 받은 사람들이 꽤 있었고, 웹 개발을 한다면 알아둬야 하는 내용같아서 정리하기로 했다 🏃♂️
JPG 파일의 특성
JPG 파일은 효율이 높은 압축 방법을 사용하여 이미지 정보를 삭제하여 파일의 사이즈를 감소시킨다.
이러한 과정을 양자화라고 하는데 양자화란 자연스러운 색상을 단순화 시키는 역할을 하며, 양자화를 하면 색상의 가짓수가 줄어들어 데이터의 손실이 발생하게 된다.
만약 카메라로 자연 풍경을 사진으로 찍게되면 자연 풍경에는 정말 많은 가짓수의 색들이 존재하지만 인간이 그 모든 색을 다 구분할 수 있는 것이 아니기 때문에 양자화를 통해 색상을 단순화 시켜 파일의 사이즈를 줄여주게 된다.
❗ 따라서 직접 찍은 사진을 압축 할 땐 JPG를 사용하는 것이 효율적이다.
마지막으로 파일의 투명도를 지원하지 않는다.
PNG 파일의 특성
PNG 파일은 JPG와는 다르게 손실을 발생시키지 않는 압축방식, 즉 비손실 압축방식을 사용하기 때문에 원본이 훼손되지 않는다.
그렇기 때문에 같은 이미지라 하더라도 PNG 파일이 JPG 파일보다 용량이 더 크다는 특성 또한 가지고 있다.
PNG의 경우에는 원본 색상을 그대로 표현할 수 있기 때문에 인공적으로 만든 그래픽이나 이미지등의 손실을 최대한 막기 위해서 주로 사용된다.
❗ 따라서 인공적으로 만든 디자인의 경우 PNG를 사용하는 것이 효율적이다.
마지막으로 파일의 투명도를 지원한다.
정리
실제 사진이나 자연스럽고 복잡한 이미지의 경우에는 JPG 파일 형식을 선택하는 것이 좋고,
깨끗한 이미지를 얻기 위해서 인공적으로 만든 디자인의 경우에는 PNG 파일 형식을 선택하는 것이 좋다.
