이미지 압축의 작동 방식: JPEG, PNG, WebP, AVIF 설명

실무적인 결론

이미지 압축은 매번 한 형식이 이기는 경쟁이 아닙니다. 어떤 정보를 버릴 수 있는지, 어떤 정보는 정확히 남겨야 하는지, CPU 시간을 얼마나 쓸 수 있는지, 내보낸 뒤 파일이 어디서 동작해야 하는지의 트레이드오프 집합입니다.

실무적인 출발점으로 다음을 기억하세요.

• 최대한의 호환성이 필요한 사진, 특히 메일·다운로드·오래된 앱·인쇄 포털·엄격한 업로드 폼에는 JPEG를 쓰세요.
• 스크린샷, UI 캡처, 다이어그램, 로고, 픽셀을 정확히 유지해야 하는 투명 그래픽에는 PNG를 쓰세요.
• 넓은 브라우저 지원을 유지하면서 JPEG나 PNG보다 작은 파일이 필요할 때, 일상적인 최신 웹 형식으로 WebP를 쓰세요.
• 크고 트래픽이 많은 사진 이미지에 대해 사이트가 WebP·JPEG 폴백을 제공할 수 있고 인코딩이 다소 느려도 괜찮다면 AVIF를 쓰세요.

간단해 보이지만 세부가 중요합니다. 제품 사진, 여권 사진, 소프트웨어 스크린샷, 투명 워터마크는 모두 “이미지”지만 압축 방식이 같지 않습니다.

확장자가 아니라 용도로 고르세요

코덱에 들어가기 전에, 그 이미지가 무엇을 해야 하는지 먼저 정하세요.

같은 이유로 형식 조언이 서로 상충하는 것처럼 보일 수 있습니다. “더 작으니까 AVIF를 써라”는 정적 사이트 빌드의 히어로 이미지에는 좋은 조언일 수 있지만, 정부 폼·메일 클라이언트·오래된 CMS가 받아야 하는 고객 업로드 이미지에는 나쁜 조언이 될 수 있습니다.

압축의 두 계열

이 가이드에 나오는 모든 형식은 무손실 압축, 손실 압축, 또는 둘 다를 사용합니다.

무손실 압축은 수학적 중복만 제거하고 디코딩할 때 같은 픽셀을 그대로 복원합니다. 스크린샷에 흰 배경, 반복되는 인터페이스 색, 반복되는 직선 엣지가 있으면 무손실 형식은 이런 패턴을 간결하게 표현할 수 있습니다. PNG가 대표적인 무손실 웹 형식이고, WebP에도 무손실 모드가 있습니다.

손실 압축은 파일을 줄이기 위해 이미지 정보를 영구적으로 버립니다. 요령은, 최종 표시 크기에서 사람이 눈치채기 어려운 정보를 버리는 것입니다. JPEG는 손실 형식입니다. WebP와 AVIF는 손실·무손실 둘 다 가능하지만, 웹 배포는 사진에 대해 대체로 손실 모드를 사용합니다.

피해야 할 오해는 “손실=나쁨, 무손실=전문가”라고 자동으로 판단하는 것입니다. 1600 px의 블로그 사진이라면, 잘 압축된 손실 WebP는 페이지에서 그대로처럼 보이면서 대역폭을 크게 아낍니다. 반대로 작은 메뉴 텍스트가 있는 소프트웨어 스크린샷은 파일 크기가 좋아 보여도 손실 내보내기 결과가 흐릿하게 보일 수 있습니다.

네 형식을 한눈에

패턴은 “새로울수록 항상 이긴다”가 아닙니다. 새 형식일수록 더 많이 분석하고 데이터를 더 효율적으로 담을 수 있지만, 그만큼 인코딩 시간·QA 시간·폴백 복잡도의 대가를 치릅니다.

같은 품질 값이 같은 품질을 뜻하지 않는 이유

품질 80으로 저장한 JPEG와 품질 80으로 저장한 WebP는 같은 척도를 쓰지 않습니다. 숫자는 각 인코더 고유의 모델로 전달되고, 서로 다른 내부 결정에 영향을 주며, 도구마다 다르게 매핑될 수 있습니다.

그래서 실무 압축에는 두 가지 확인이 필요합니다.

1. 이미지가 나타날 크기에서 확인하기. 상품 카드 썸네일은 400 % 확대가 아니라 상품 카드 썸네일 크기로 판단해야 합니다.
2. 이미지가 올바른 치수를 가진 뒤 바이트를 비교하기. 5000 px 카메라 원본을 1600 px 웹 이미지로 리사이즈하는 편이 품질 슬라이더를 너무 낮추는 것보다 대체로 더 많이 절약됩니다.

폴더를 일괄 변환한다면, 모두 내보내기 전에 어려운 사례를 몇 개 시험해 보세요. 얼굴, 하늘, 어두운 그림자, 텍스트가 많은 스크린샷, 투명한 엣지, 노이즈가 많은 실내 사진 등입니다.

JPEG: 사진이 작아지고 텍스트가 못생겨지는 이유

JPEG는 사진의 특성에 맞춰 만들어진 오래된 대표 형식입니다. Library of Congress는 JPEG 계열이 풀컬러 및 그레이스케일 연속 계조 이미지에 널리 쓰이며, 고전적 처리는 8×8 블록 변환을 사용한다고 기록합니다. 쉽게 말해 JPEG는 이미지를 작은 블록으로 자르고, 각 블록을 주파수 정보로 바꾼 뒤, 시청자가 알아채기 어려운 세부를 양자화합니다.

다음에는 잘 어울립니다.

• 얼굴, 옷, 건물, 풍경, 음식 사진
• 하늘, 그림자, 피부 톤 같은 자연스러운 그라데이션
• 투명 픽셀이 필요 없는 이미지
• 거의 어디서나 열려야 하는 파일

다음에는 잘 맞지 않습니다.

• 스크린샷의 작은 텍스트
• 날카로운 엣지가 있는 아이콘·로고
• 단색 위주의 다이어그램
• 반복해서 편집하고 다시 내보낼 파일
• 투명 이미지(JPEG는 알파 채널이 없음)

가장 알아보기 쉬운 JPEG 아티팩트는 블록 경계, 텍스트 주변의 링잉, 대비 강한 세부의 모스키토 노이즈, 부드러운 그라데이션의 밴딩입니다. 우연이 아니라, 블록 기반 손실 압축의 눈에 보이는 부작용입니다.

강점

• 브라우저·OS·앱·메일 클라이언트·폼·업체 전반에서 매우 폭넓은 지원
• 카메라 사진 등 연속 계조 이미지에 효율적
• 일반 워크플로에서 인코딩·디코딩이 빠름
• 미리보기·첨부·업로드·공유가 쉬움

약점

• 투명도 미지원
• 텍스트·엣지·단색 그래픽 주변의 아티팩트
• 손실 내보내기를 반복하면 손상이 누적
• 웹 사진에서는 같은 체감 품질에서 WebP·AVIF보다 큰 경우가 많음

JPEG를 언제 쓸까

호환성이 마지막 몇 킬로바이트보다 중요할 때 JPEG를 쓰세요. 여권 사진 업로드, 문서 포털, 메일 첨부, 벤더 포털, 인쇄소, 오래된 CMS, 폴백 <img> 소스가 예입니다. 파일이 주로 사진이고 투명도가 필요 없을 때도 좋습니다.

PNG: 스크린샷이 선명하고 사진이 커지는 이유

PNG는 이식성 있는 무손실 래스터 이미지를 위해 설계되었습니다. W3C의 PNG 사양은 정적 PNG와 애니메이션 PNG를 모두 다루며, 인덱스 색·그레이스케일·트루컬러·선택적 알파 투명도를 지원합니다.

일상적인 웹 작업의 요점은 단순합니다. PNG는 픽셀을 그대로 유지합니다. 행 단위 필터로 예측하기 쉽게 만들고 그 결과를 DEFLATE로 압축할 수 있습니다. 이미지에 반복되는 색과 분명한 경계가 있다면 이 방식은 훌륭하게 작동합니다.

PNG에 어울리는 것:

• 작은 텍스트가 있는 소프트웨어 스크린샷
• 이미지로 내보낸 UI 다이어그램과 비교표
• SVG를 쓸 수 없는 경우의 로고
• 투명 오버레이·도장·워터마크
• 다시 편집할 수 있는 그래픽

PNG에 어울리지 않는 것:

• 카메라 사진
• 큰 웹사이트 히어로 이미지
• 자연 질감이 있는 제품 사진
• 정확한 픽셀보다 파일 크기가 더 중요한 갤러리 이미지

PNG 사진이 큰 것은 PNG가 제 역할을 하기 때문입니다. 손실 사진 코덱이라면 단순화했을 노이즈·미세 질감·센서의 미묘한 변화·색의 미묘한 변화를 모두 보존합니다.

강점

• 무손실 픽셀 재현
• 알파 채널 투명도
• 선명한 텍스트와 날카로운 엣지
• 단색·반복 그래픽에 강한 압축
• 편집 마스터와 투명 워크플로에 신뢰할 만한 형식

약점

• 사진에 대해 파일이 큼
• 일반 PNG 워크플로에 손실 모드가 없음
• WebP가 허용되는 곳에서는 투명 웹 그래픽이 WebP보다 무거워질 수 있음

PNG를 언제 쓸까

정확한 픽셀이 중요한 경우—스크린샷, UI 문서, 다이어그램, 간단한 그래픽, 예측 가능한 지원이 필요한 투명 에셋—에 PNG를 쓰세요. 의도적으로 무손실 작업 사본이 필요한 게 아니라면 카메라 사진의 기본값으로 PNG를 쓰지 마세요.

WebP: 실무적인 최신 웹 기본값

WebP가 유용한 이유는 하나의 형식으로 여러 역할을 처리하기 때문입니다. Google 문서는 WebP가 손실 압축, 무손실 압축, 투명도, 애니메이션, 메타데이터, 컬러 프로필을 지원한다고 설명합니다. 이 덕분에 JPEG보다 유연하고, 웹 배포에서는 PNG보다 작을 때가 많습니다.

손실 WebP는 JPEG의 오래된 DCT 중심 처리 대신 VP8 계열 예측 코딩을 씁니다. 무손실 WebP는 다른 변환과 엔트로피 코딩을 사용합니다. 실무적으로 중요한 결론은, WebP가 사이트 이미지 라이브러리—블로그 사진, 상품 그리드, 썸네일, 가벼운 일러스트, 많은 투명 에셋—의 좋은 기본값이 될 수 있다는 점입니다.

하지만 WebP는 마법이 아니고, 어디에나 보내기 좋은 파일도 아닙니다. 브라우저가 WebP를 지원해도 메일 클라이언트, 업로드 폼, 오래된 디자인 앱, 소셜 플랫폼, 인쇄 워크플로가 거부할 수 있습니다. 그래서 JPEG와 PNG는 여전히 배포·호환 형식으로 중요합니다.

강점

• 같은 체감 품질에서 JPEG보다 작은 경우가 많음
• 알파 투명도 지원
• 손실·무손실 모드 모두 지원
• 최신 브라우저에서 폭넓은 지원
• AVIF보다 인코딩이 빠름

약점

• 일부 메일 클라이언트·폼·오래된 앱·CMS 플러그인·인쇄 워크플로에서 여전히 거부됨
• SVG 로고나 편집 가능한 디자인 소스의 실질적 대체는 아님
• 일부 큰 사진 이미지에서는 AVIF보다 커질 수 있음

WebP를 언제 쓸까

페이지를 직접 통제할 수 있다면 대부분의 최신 웹사이트 이미지 배포에 WebP를 쓰세요. 블로그 이미지, 상품 카드 사진, 썸네일, 많은 투명 웹 에셋의 튼튼한 기본값입니다. 이미지가 사이트를 떠나 다른 시스템으로 들어가야 하는 경우엔 JPEG나 PNG를 함께 준비해 두세요.

AVIF: 파이프라인이 필요한 고압축 옵션

AVIF는 AV1로 인코딩된 이미지 데이터를 HEIF 기반의 이미지 포맷에 저장합니다. AVIF 사양은 SDR 및 HDR 이미지, 광색역 사용 사례, 알파 같은 보조 이미지, 그리고 더 진보한 이미지 코딩 기능을 지원합니다. web.dev도 AVIF의 압축 이득이 이미지 내용·인코더 설정·품질 목표에 따라 달라진다고 언급합니다.

일반적인 웹 팀 입장에서 실무 이야기는 이렇습니다. AVIF는 큰 사진에서 뛰어날 수 있지만, 가볍게 공유하는 형식이라기보다 파이프라인용 형식입니다. 인코딩에 시간이 더 걸리고, 오래된 도구의 미리보기 지원이 뒤처질 수 있으며, 폴백 처리가 더 중요합니다.

AVIF에 잘 맞는 것:

• 큰 히어로 사진
• 사진이 많은 랜딩 페이지
• 편집 성격의 갤러리
• 한 번 인코딩한 뒤 많이 배포되는 고트래픽 이미지
• HDR·고비트뎁스·광색역이 워크플로의 일부인 이미지

AVIF에 잘 맞지 않는 것:

• 엄격한 업로드 폼
• 메일 첨부
• 팀원이 오래된 도구에서 열어야 하는 이미지
• 절약분이 파이프라인 복잡도를 정당화하지 못하는 아주 작은 썸네일
• 세심히 테스트하지 않는 한, 작은 텍스트가 있는 스크린샷

강점

• 사진과 복잡한 이미지에서 대체로 뛰어난 압축
• 알파 투명도, HDR, 광색역
• 최신 <picture> 스택의 첫 소스로 유용
• 빌드 시점이나 CDN 이미지 생성에 잘 맞음

약점

• 특히 대량 배치에서 인코딩이 느릴 수 있음
• JPEG·PNG·WebP보다 도구 지원이 덜 예측 가능
• 안전한 프로덕션 배포에는 WebP·JPEG·PNG 폴백이 필요

AVIF를 언제 쓸까

이미지가 충분히 크고 자주 노출되어 더 작은 바이트가 추가 파이프라인 작업을 정당화할 때 AVIF를 쓰세요. 트래픽 많은 홈페이지의 히어로 이미지가 좋은 예입니다. 90 px 아이콘, 일회성 메일 첨부, 정부 업로드 폼은 대체로 그렇지 않습니다.

스크린샷에서 PNG가 JPEG를 이길 수 있는 이유

흔한 놀라움 하나. PNG 스크린샷은 같은 스크린샷의 JPEG보다 더 작고 더 깨끗할 수 있습니다.

스크린샷은 반복 구조로 가득한 경우가 많기 때문입니다. 흰 문서 배경, 회색 툴바, 곧게 그려진 검은 텍스트, 몇 가지 아이콘 색, 반복되는 UI 간격은 무손실 압축이 간결하게 표현할 수 있습니다. JPEG는 텍스트를 정확히 유지해야 한다는 사실을 모른 채, 사진처럼 단순화하려고 시도합니다. 그 결과 파일 크기는 크게 줄지 않고 글자와 엣지 주변만 더 나빠질 수 있습니다.

스크린샷이 대체로 사진에 가깝다면 WebP나 JPEG가 이길 수 있습니다. 대체로 인터페이스·텍스트·단색이라면 PNG나 무손실 WebP부터 시작하세요.

사진에 손실 압축이 필요한 이유

카메라 사진은 다릅니다. 센서 노이즈, 미세 질감, 부드러운 그림자, 불규칙한 그라데이션, 픽셀 간의 수백만 가지 미세한 변화가 담깁니다. 무손실 압축은 활용할 반복이 적어, 웹 배포에 충분할 만큼 파일을 줄이지 못하는 경우가 많습니다.

손실 사진 형식이 통하는 이유는, 시청자가 대체로 주제·구도·색·체감 선예도를 신경 쓸 뿐 모든 원본 픽셀을 신경 쓰지는 않기 때문입니다. 잘 압축한 JPEG·WebP·AVIF는 최종 표시 크기에서 보기 어려운 정보를 제거할 수 있습니다.

위험은 지나치게 밀어붙이는 것입니다. 낮은 품질 설정은 피부를 평평하게 하고, 옷감을 뭉개고, 나뭇잎 디테일을 파괴하고, 블록 경계를 만들거나 하늘·그림자에 밴딩을 만들 수 있습니다. 그런 영역이 이미지에서 중요하다면 품질을 높이거나 표시 파일을 더 크게 하세요.

최신 웹 배포에는 폴백을 쓰세요

사이트를 직접 통제한다면 하나의 형식만 골라야 할 필요는 없습니다. 실무에서 자주 쓰는 패턴은 가장 작은 최신 형식을 먼저 제공하고, 그 뒤로 더 안전한 폴백을 두는 것입니다.

<picture>
  <source srcset="/images/hero.avif" type="image/avif">
  <source srcset="/images/hero.webp" type="image/webp">
  <img
    src="/images/hero.jpg"
    alt="자연광에서 촬영한 제품 클로즈업 사진"
    width="1200"
    height="800"
  >
</picture>

브라우저는 지원하는 첫 번째 소스를 사용합니다. AVIF를 지원하는 브라우저는 AVIF 파일을 받고, AVIF를 쓰지 않는 브라우저는 WebP를 시도할 수 있으며, 더 오래되거나 엄격한 클라이언트에는 여전히 JPEG 폴백이 남습니다.

이미지에 투명도나 정확한 텍스트가 필요할 때는 JPEG 대신 PNG를 폴백으로 쓰세요.

실무적인 압축 워크플로

한 장의 이미지라면:

1. 손에 있는 최고 품질의 소스에서 출발합니다.
2. 실제 표시될 가장 큰 크기로 먼저 리사이즈합니다.
3. 이미지 용도에 맞춰 형식을 고릅니다.
4. 한두 개의 품질 설정으로 내보냅니다.
5. 실제 페이지나 업로드 대상에서 결과를 비교합니다.
6. 게시된 사본을 다시 압축할 일이 없도록 마스터 파일을 보관합니다.

사이트 폴더 전체라면:

1. 전체를 변환하기 전에 대표 세트를 고릅니다.
2. 사진, 스크린샷, 투명 그래픽, 썸네일, 어려운 어두운 이미지 하나를 포함합니다.
3. 기본 최신 형식으로 WebP를 테스트합니다.
4. 바이트 절약이 의미 있는 곳에서만 AVIF를 테스트합니다.
5. 필요한 자리에는 JPEG·PNG 폴백을 유지합니다.
6. 파일 크기는 리사이즈 이후에 확인합니다(이전이 아님).

PhotoTools는 중간 단계에 도움을 줍니다. 소스가 페이지에 비해 너무 크면 리사이즈를, 파일 크기·품질을 조절하려면 압축을, 특정 파일 유형이 필요하면 포맷 변환기를 사용하세요. 변환과 압축은 브라우저 안에서 이루어지므로, 도구 사용 중에 이미지가 서버로 업로드되지 않습니다.

형식 간 변환 방법

PhotoTools는 브라우저에서 JPG, PNG, WebP, AVIF, HEIC를 바로 변환합니다. 이미지를 놓고, 대상 형식을 고르고, 결과를 미리보고, 새 파일을 내려받으세요.

대상에 따라 변환기를 골라 쓰세요.

• 거의 모든 폼과 앱에서 열리는 파일이 필요하다면? JPEG로 변환하세요.
• 투명도나 정확한 스크린샷 픽셀이 필요하다면? PNG 또는 무손실 WebP로 변환하세요.
• 사이트가 허용하는 더 작은 웹 이미지가 필요하다면? WebP로 변환하세요.
• 통제된 웹 파이프라인에서 최대 압축이 필요하다면? 폴백과 함께 AVIF를 테스트하세요.

마지막으로, 이미지 품질을 크게 지켜 주는 규칙 하나: 손실 형식 사이를 반복해서 왕복하지 마세요. 사진이 고품질 JPEG로 시작했다면 배포용으로 JPEG→WebP 변환은 괜찮을 수 있습니다. 그러나 그 WebP를 다시 JPEG로 바꾸고, 편집하고, 또 변환하는 과정에서 아티팩트가 쌓입니다. 가능하면 항상 원본으로 돌아가세요.