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

같은 사진을 저장해도 JPEG, PNG, WebP, AVIF는 용량, 품질, 용도가 다릅니다. 왜 이렇게 다를까요? 핵심은 손실과 무손실의 구분과 압축 방식에 있습니다.

손실 vs 무손실: 원본을 버리느냐 보존하느냐

• 손실 압축(lossy): 사람이 잘 인지하지 못하는 디테일을 제거하여 용량을 크게 줄입니다. (JPEG, WebP, AVIF에서 가능)
• 무손실 압축(lossless): 원본 픽셀을 그대로 복원합니다. 용량은 더 큽니다. (PNG, WebP/AVIF에서도 가능)

사진에는 손실 압축이, 로고, 스크린샷, 투명도가 필요한 그래픽에는 무손실 압축이 적합합니다.

JPEG: 오래된 손실 표준, 사진에 강하다

JPEG은 DCT(이산 코사인 변환)로 이미지를 주파수 단위로 분해하고, 고주파(미세한 디테일)를 제거하여 압축합니다. 사진에 매우 효율적이지만, 투명도(알파 채널)를 처리하지 못하고, 텍스트나 선처럼 날카로운 영역에는 ’블록 노이즈’가 발생합니다. 1992년에 표준화되어 호환성은 가장 높습니다.

PNG: 무손실, 투명도, 그래픽에 강하다

PNG는 DEFLATE(ZIP과 동일한 압축) 방식으로 무손실 압축을 수행합니다. 투명도(알파 채널)를 지원합니다. 선명한 선, 텍스트, 로고, UI 스크린샷에 적합합니다. 다만 사진은 JPEG보다 용량이 훨씬 큽니다.

WebP: 구글의 ‘둘 다’ 포맷

WebP는 손실, 무손실, 압축, 투명도(손실과 알파 채널 동시 지원)를 모두 지원합니다. JPEG보다 평균 25~35% 작고, PNG보다도 작습니다. 구글이 개발하여 Chrome과 웹 생태계에 널리 보급되었고, 현재는 Safari와 Firefox도 지원합니다. ’JPEG과 PNG를 하나로’라는 목표를 가진 포맷입니다.

AVIF: 차세대, AV1 기반의 압축 효율

AVIF(AV1 Image File Format)는 차세대 영상 코덱 AV1의 기술을 이미지에 적용한 것입니다. WebP보다 더 작은 용량에 더 우수한 품질을 제공합니다. 다만 인코딩 속도가 느리고(이미지를 생성하는 데 시간이 소요됨), 구형 브라우저에서는 표시되지 않습니다. 최신 웹에서 채택이 점진적으로 증가하고 있습니다.

웹에서 왜 작은 용량이 중요한가

이미지는 웹페이지 용량의 대부분을 차지합니다. 작은 포맷은 곧 빠른 로딩을 의미하며, 이는 낮은 이탈률, 향상된 SEO, 모바일 데이터 절약으로 이어집니다. 그래서 웹은 JPEG과 PNG에서 WebP와 AVIF로 전환하고 있습니다.

어떻게 선택하는가

• 사진(용량이 중요): WebP 또는 AVIF(지원되지 않는 환경에서는 JPEG)
• 로고, UI, 투명도가 필요한 그래픽: 무손실 WebP 또는 AVIF
• 구형 브라우저 호환이 필수: JPEG 또는 PNG

보통은 ’최신 포맷(WebP/AVIF)을 제공하고, 구형 환경에는 JPEG/PNG를 폴백으로 제공’하는 방식을 사용합니다.

어떻게 연결되는가

한 줄로 요약하면: 손실(제거하여 작게)과 무손실(원본 보존)의 선택, 그리고 압축 기술(DCT에서 AV1로)의 발전이 JPEG에서 PNG, WebP, AVIF로 이어지는 흐름을 만들었고, 웹은 ’더 작은 포맷’으로 전환하며 속도, 용량, 품질의 균형을 맞추고 있습니다.

출처: 위키백과: WebP · 위키백과: AVIF · 위키백과: JPEG · 위키백과: PNG

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