PNG, JPEG 포맷과 웹 최적화

이미지 파일을 다루다 보면 자연스럽게 다양한 확장자들을 만나게 됩니다.

gif, png, jpg, raw... 등등 다양한 이미지 포맷은 벡터 이미지냐 래스터 이미지냐 / 무손실 이미지냐 손실 이미지냐로 구분되는데요, 오늘은 다양한 이미지 포맷들 중 PNG와 JPEG 포맷을 비교해 보도록 하겠습니다.

📸 JPEG 포맷

JPEG는 가장 많이 사용되는 이미지 포맷들 중 하나로, 원본 데이터가 손실되는 손실 이미지라는 특징이 있습니다.

이 사진도 처음 찍었을 때는 화질이 이렇지 않았을 겁니다.

물론 가만히 저장해 둔다고 손실이 생기는 것이 아니라, JPEG 이미지를 웹 페이지에 업로드하거나 메일로 전송하면 JPEG 포맷은 사람의 눈이 인식할 수 있는 색상만을 남기고 나머지를 제거하기 때문에 압축 과정에서 *언제나 약간씩 데이터가 소실됩니다.

(* JPEG 압축 시에는 품질값을 0~100까지 설정할 수 있는데, 품질을 100으로 설정하더라도 데이터가 약간씩 손실됩니다.)

 

📷 PNG 포맷

무손실 이미지는 손실 이미지에 반대되는 개념으로, 원본 데이터를 조금도 훼손하지 않고 이미지를 보존합니다.

특히나 PNG는 같은 무손실 이미지에 속하는 GIF가 8비트 색상만을 활용할 수 있는 것과 달리 24비트 색상을 활용할 수 있어 고품질의 이미지를 표현하기에 적합합니다.

 

뿐만 아니라 "알파 채널" 이라는 배경을 투명하게 만들 수 있는 기능을 활용할 수 있어 웹에서 많이 사랑받는 포맷입니다.

이미지 배경이 투명하다면 알파 채널을 사용한 결과입니다.

🤔 그럼, 무손실 이미지가 언제나 좋지 않나요?

무손실 이미지를 활용하면 고품질의 이미지를 원본 그대로 보존할 수 있다는 장점이 있습니다.

그러나 당연히 그에 따르는 대가가 있기 마련인데요, PNG는 JPEG와는 다르게 언제나 고품질의 이미지를 원본 그대로 보존할 수 있지만 동일한 품질의 이미지라면 PNG 이미지의 용량이 더 크다는 치명적인 단점이 있습니다.

실제로 PNG 포맷의 이미지를 JPEG 포맷으로 압축한 결과 2MB -> 400KB라는 약 80%가량의 용량을 절감할 수 있었는데요, 이렇듯 PNG는 우수한 포맷이지만 자칫하면 페이지의 로딩을 지연시키는 치명적인 원인이 되기도 합니다.

 

따라서 동일한 이미지를 여러번 편집해야 할 때는 비트맵이나 PNG같은 무손실 이미지 포맷을 활용하고, 편집을 모두 마치고 배포할 때는 JPEG 포맷으로 압축하는 것이 효율적인 전략이 될 수 있습니다.

🎩 압축과 눈속임

JPEG 파일을 압축할 때는 품질값을 설정할 수 있다고 했는데 품질을 낮추는 것이 언제나 나쁜 선택은 아닙니다.

실제로 75% 전까지는 사람들이 명확한 품질 차이를 인지하기 어려우며, 브라우저에서도 위화감을 느끼기 어려운 수준이기 때문입니다.

다만 이미지에 따라서 품질 하락을 인지할 수 있는 우려가 있으니, 85 ~ 80% 구간 사이의 이미지 손실 압축을 활용하는 것을 권장합니다!