PNG, JPEG, WebP, AVIF 중에서 고르기

사진은 JPEG, WebP, AVIF로 저장합니다. 스크린샷, 로고, 아이콘, 도해, 그리고 단색 면이나 또렷한 글자가 있는 것은 PNG나 WebP의 무손실 모드로 저장합니다. 투명도가 필요하다면 JPEG는 완전히 제외됩니다. 지금 웹용 형식을 고르는 중이고 여러 형식을 함께 제공할 수 있다면 AVIF를 우선하고 WebP를 대체 수단으로 두며, 아주 오래된 환경에는 원래의 JPEG나 PNG를 내보내십시오.

결론은 이것이 전부입니다. 나머지는 그 이유이며, 이 경험 법칙이 통하지 않는 경우를 알아보기 위한 내용입니다.

각 형식이 실제로 잘하는 것

무손실이란 디코딩된 이미지가 입력과 비트 단위로 동일하다는 뜻입니다. 손실이란 인코더가 더 작은 파일을 얻는 대가로 정보를 영구히 버린다는 뜻이며, 되돌려 받는 것은 근사치입니다.

PNG는 무손실이고 앞으로도 그럴 것입니다. PNG의 압축은 각 픽셀을 이웃 픽셀로부터 예측한 다음 그 차이를 deflate로 압축하는 방식이라, 넓은 영역이 동일하거나 반복될 때는 대단히 뛰어나고 사진처럼 픽셀마다 조금씩 다를 때는 형편없습니다. PNG로 저장한 사진은 같은 그림의 잘 만든 JPEG보다 다섯 배에서 열 배 큰 경우가 많고, 눈에 보이는 이득은 없습니다.

JPEG는 손실 형식이고 알파 채널이 없으므로 투명도를 아예 저장할 수 없습니다. 이미지를 블록으로 나누고 각 블록을 주파수 정보로 변환한 다음, 눈이 가장 둔감한 미세한 디테일을 버립니다. 연속적인 톤의 사진에서는 훌륭하게 동작하고 날카로운 경계에서는 형편없이 동작하는데, JPEG로 저장한 글자 주변에서 보이는 흐릿한 후광과 모기 잡음이 그 결과입니다.

WebP와 AVIF는 둘 다 비디오 코덱에서 파생된 현대적인 컨테이너 형식입니다. 둘 다 손실과 무손실을 지원하고, 둘 다 완전한 알파 투명도를 지원하며, 둘 다 현행 주요 브라우저에서 모두 지원됩니다. AVIF는 일반적으로 WebP보다 더 강하게 압축하며 특히 낮은 품질 설정에서 그렇고, 넓은 색역과 더 높은 비트 심도도 다룹니다. 대가는 눈에 띄게 느려질 수 있는 인코딩 시간과, 구형 데스크톱 앱이나 이미지 도구 등 브라우저 밖에서의 다소 좁은 지원 범위입니다.

투명도

진짜 알파 채널, 즉 픽셀마다 자체 불투명도 값을 갖는 구조를 저장할 수 있는 것은 PNG, WebP, AVIF뿐입니다. 로고가 어떤 배경색 위에서도 깔끔하게 놓이는 것은 그 덕분입니다.

투명한 이미지를 JPEG로 변환하면 그 투명도는 어딘가로 가야 합니다. 대부분의 도구는 흰색 위로 합치고 일부는 검정 위로 합치는데, 어느 쪽이었는지는 그 이미지가 색이 있는 배경 위에 흰 상자를 두른 채 나타날 때에야 알게 됩니다. 최종 배경색을 알고 있다면 변환기가 알아서 정하게 두지 말고 그 색 위로 의도적으로 합치십시오.

손실이 괜찮을 때와 그렇지 않을 때

실제로 표시될 크기의 사진 콘텐츠를 최종 배포용으로 내보낼 때는 손실 압축이 적절합니다. 합리적인 품질 설정에서는 손실을 알아보기가 정말 어렵습니다.

다음의 경우에는 손실 압축이 나쁜 선택입니다.

• 이미지에 글자, 가는 선, 넓은 단색 면이 있는 경우. 압축 아티팩트는 바로 그 날카로운 경계에 몰립니다.
• 나중에 편집하고 다시 내보낼 작업용 마스터인 경우.
• 이미지를 확대하거나 이후에 색 보정을 강하게 할 경우. 인코더가 한 일이 그대로 증폭됩니다.
• 과학, 의료, 포렌식 작업이나 누군가 숫자를 읽어야 하는 스크린샷처럼 정확한 픽셀 값이 중요한 경우.

JPEG를 다시 저장할수록 나빠지는 이유

JPEG를 디코딩하고 다시 저장할 때마다 인코더는 이미 양자화된 데이터를 또 양자화하고, 반올림 오차가 누적됩니다. 원본에서 품질이 두 번 깎이는 것이 아니라, 첫 번째 처리가 만들어낸 아티팩트를 이제 진짜 이미지 디테일로 취급해 다시 근사한다는 것이 문제입니다.

더 높은 품질 설정으로 저장해도 되돌릴 수 없습니다. 첫 저장에서 사라진 디테일은 사라진 것입니다. 품질 60 파일을 품질 95로 재인코딩하면 품질 60의 아티팩트를 충실히 보존한 더 큰 파일이 나올 뿐입니다. 이미지를 반복해서 편집한다면 마스터는 무손실 형식으로 두고 마지막에 JPEG나 WebP나 AVIF로 내보내십시오.

대략적인 크기 감각

아래는 측정값이 아니라 경험 법칙이며, 실제 수치는 이미지 내용에 따라 크게 달라집니다. 체감 품질이 같은 일반적인 사진이라면 JPEG를 기준선으로 보고, WebP는 대략 4분의 1쯤 작으며, AVIF는 거기서 더 작고, 강하게 압축할수록 그 격차가 벌어진다고 생각하면 됩니다. 평평한 그래픽에서는 무손실 WebP가 대개 PNG를 앞서고 때로는 큰 차이로 앞섭니다. 잡음과 미세한 질감은 모든 손실 형식의 크기를 부풀리므로, 입자가 거친 사진은 깨끗한 스튜디오 촬영본처럼 압축되지 않습니다.

압축하기 전에 크기부터 줄이십시오

가장 큰 이득은 거의 언제나 형식이 아니라 크기에서 나옵니다. 가로 4000픽셀로 제공되어 800픽셀짜리 칼럼에 표시되는 이미지는 필요한 것보다 약 25배 많은 픽셀 데이터를 실어 나르고 있으며, 어떤 인코더도 그것을 해결해 주지 못합니다. 실제로 표시될 크기에 맞춰 크기를 줄이고(고밀도 화면을 겨냥한다면 두 배로), 그다음에 형식을 고르고, 그다음에 차이가 겨우 보이기 시작하는 지점까지 품질 설정을 낮춘 뒤 한 단계만 되돌리십시오.