한 줄 요약: 같은 이미지라도 JPEG·PNG·WebP·AVIF가 다른 이유는 손실/무손실 구분과 압축 방식의 차이이고, 사진은 WebP·AVIF(손실), 로고·투명 그래픽은 무손실 포맷이 답이다.

같은 사진을 저장해도 JPEG, PNG, WebP, AVIF는 용량, 품질, 용도가 달라요. 핵심은 손실과 무손실의 구분과 압축 방식에 있어요. 두 압축 방식이 실제로 어떻게 다르게 움직이는지 도식과 실제 출력으로 확인해 보겠어요.

두 압축 파이프라인: 버리느냐, 찾아내느냐

손실 압축과 무손실 압축은 시작부터 달라요. 손실은 ‘사람이 못 느끼는 정보를 깎아 내는’ 전략이고, 무손실은 ‘반복되는 패턴을 더 짧은 표기로 바꾸는’ 전략이에요.

실제로 확인해 보기: DEFLATE는 뭘 보고 압축하는가

PNG가 쓰는 DEFLATE(ZIP과 같은 알고리즘)의 원리는 ’반복되는 패턴을 짧게 치환’하는 것이에요. 이미지 없이 텍스트로 그 원리를 그대로 재현할 수 있어요. 파이썬의 zlib(= DEFLATE 구현)으로 반복 텍스트와 무작위 데이터를 압축한 실제 출력이에요:

원본 700 바이트 → DEFLATE 압축 후  22 바이트   (반복되는 텍스트)
원본 700 바이트 → DEFLATE 압축 후 711 바이트   (무작위 데이터)

반복 데이터는 700바이트가 22바이트로 줄었지만, 무작위 데이터는 오히려 11바이트 늘었어요. 압축 알고리즘은 마법이 아니라 패턴을 찾는 일이므로, 패턴이 없는 데이터는 아무것도 줄이지 못하고 오히려 표지 비용이 더 붙어요. 무손실 포맷이 로고·스크린샷(넓은 단색, 반복 패턴)에 유리하고 무작위 잡음 사진에는 별 이득이 없는 이유가 이 두 줄로 설명돼요.

JPEG: 주파수를 깎는 손실 표준

JPEG은 DCT(이산 코사인 변환)로 이미지를 오디오 이퀄라이저처럼 주파수 단위로 분해하고, 눈이 거의 못 느끼는 고역대(미세한 디테일)부터 깎아 압축해요. 사진에 매우 효율적이지만 투명도(알파 채널)를 처리하지 못하고, 텍스트·선 같은 날카로운 영역에는 ’블록 노이즈’가 생겨요. 1992년 표준으로 호환성은 가장 높아요.

PNG: 무손실, 투명도, 그래픽의 표준

PNG는 위에서 확인한 DEFLATE 방식의 무손실 압축에 **투명도(알파 채널)**를 지원해요. 선명한 선, 텍스트, 로고, UI 스크린샷에 적합해요. 실제로 이 블로그에서도 쓰이는 방식이 그래요: 사진류 히어로 이미지는 JPEG(~30KB), 다이어그램과 로고는 PNG(12~40KB)로 저장돼 있어요. 선이 흐려지면 곤란한 그래픽에 무손실을 쓰는 이유가 그림으로 드러나요.

WebP와 AVIF: ’손실+무손실+투명도’를 한 포맷에

WebP는 손실, 무손실, 투명도를 모두 지원하며 JPEG 대비 평균 25~35% 작아요. 구글이 개발해 Chrome에 먼저 보급됐고 현재는 주요 브라우저 전반이 지원해요. AVIF는 차세대 영상 코덱 AV1의 기술을 이미지에 적용한 것으로, 같은 품질에서 WebP보다 더 작게 나와요. 대신 인코딩 시간이 길고 구형 환경 지원이 늦어요. 둘 다 ’JPEG+PNG를 하나로 대체’하는 목표의 포맷이에요.

어떻게 선택하는가

• 사진(용량이 중요): WebP 또는 AVIF, 구형 환경 폴백은 JPEG
• 로고, UI, 투명도·선명도가 필요한 그래픽: 무손실 WebP/AVIF 또는 PNG
• 최대 호환성이 필수인 환경: JPEG/PNG

실무에서는 ‘최신 포맷을 먼저 제공하고, 지원하지 않는 브라우저에 JPEG/PNG를 폴백으로’ 내보내는 <picture> 요소 패턴을 어요. 브라우저가 목록에서 자기가 읽을 수 있는 첫 포맷을 고르는 방식이에요.

어떻게 연결되는가

한 줄로 요약하면: 손실(정보를 버려 작게)과 무손실(패턴을 찾아 원본 보존)의 전략 차이, 그리고 압축 기술의 세대 교체(DCT→AV1)가 JPEG에서 PNG, WebP, AVIF로 이어지는 흐름을 만들었고, 웹은 더 작은 포맷으로 전환하며 속도·용량·품질의 균형을 맞추고 있어요. 이미지가 웹페이지 용량의 대부분인 만큼, 포맷 선택은 곧 로딩 속도의 문제예요.

출처: 위키백과: JPEG · 위키백과: WebP · 위키백과: AVIF · PNG 공식 사이트(무손실 규격)

이미지: Marek Ślusarczyk (Tupungato), Wikimedia Commons (CC-BY 3.0) — 원본