이미지는 어떻게 압축될까? (PNG · JPG · WebP · AVIF)

같은 사진을 PNG 로 저장하면 5 MB, JPEG 로 저장하면 500 KB, WebP 로 저장하면 300 KB, AVIF 로 저장하면 200 KB. 픽셀 수도 화질도 비슷한데 왜 이렇게 차이가 날까? 이 가이드는 각 포맷이 안에서 실제로 어떻게 데이터를 줄이는지 — Huffman coding, discrete cosine transform (DCT), palette indexing, 인간 시각 시스템 활용 트릭 — 풀어본다.

먼저 — raw 이미지의 크기

1920 × 1080 사진을 압축 없이 저장하면:

1920 × 1080 픽셀 × 3 byte (RGB) = 6,220,800 byte ≈ 5.93 MB

BMP / TIFF (uncompressed) 가 거의 이 크기. 모든 압축 포맷의 목표 — 시각 품질 손실 최소 + 크기 최대 절감.

무손실 vs 손실 — 본질 분기

무손실 (lossless) — 복원하면 원본 byte 단위 동일. 사진 비손실 정보 (메타데이터·screenshot·도표) 에 적합. PNG / GIF / WebP-lossless / AVIF-lossless / TIFF.
손실 (lossy) — 인간 눈이 잘 못 알아차리는 정보를 버려 크기 ↓. 사진 / 자연 이미지에 적합. JPEG / WebP-lossy / AVIF / HEIC.

품질 = 손실 양 조절. JPEG quality 70 vs 95 의 file size 차이가 큼.

PNG — 무손실 + palette + DEFLATE

1996 년 GIF 의 license 문제 회피용으로 탄생. 3 가지 핵심 기술:

1. Palette indexing (선택)

색이 256 가지 이하 (스크린샷·아이콘·로고) 라면 각 픽셀을 3 byte RGB 가 아닌 1 byte palette index 로 저장:

Palette (256 색):
  [0] = #FFFFFF (흰색)
  [1] = #000000 (검정)
  [2] = #0066CC (파랑)
  ...
  [255] = #FF0000 (빨강)

이미지 데이터:
  픽셀마다 1 byte index → 1/3 크기

사진은 색이 수백만 가지라 palette 못 씀. 스크린샷·도표는 자주 가능 — PNG-8 (palette 모드) 가 동일 화질에 PNG-24 대비 작음.

2. Filter (예측 기반)

각 줄마다 1 byte filter type 박고, 픽셀을 raw 가 아닌 차이값 으로 저장:

None — raw 그대로
Sub — 왼쪽 픽셀과의 차이
Up — 위 픽셀과의 차이
Average — 왼쪽 + 위 평균과의 차이
Paeth — 왼쪽 + 위 + 좌상의 가중 평균

그라데이션이나 비슷한 색이 연속이면 차이값이 대부분 0 또는 작은 수 → DEFLATE 가 그걸 잘 압축.

3. DEFLATE 압축

ZIP 과 동일 알고리즘 — LZ77 (반복 패턴 참조) + Huffman coding (빈도 기반 가변 길이 코드).

"AAAABBBCCCCAAAA" 압축:
LZ77:    A×4 BBB C×4 [복사 offset=12 len=4]
Huffman: 빈번한 A → 짧은 비트, 드문 char → 긴 비트

결론 — PNG 가 작아지는 경우: 색 단순 (palette) / 그라데이션 ( filter 효과) / 큰 평면 (DEFLATE 효과). 사진은 PNG 가 항상 큼.

JPEG — DCT + 시각 시스템 트릭

1992 년 표준. 가장 흔한 손실 사진 포맷. 5 단계 파이프라인:

1. RGB → YCbCr 색 공간

인간 눈은 밝기 (Y) 에 색 (Cb / Cr) 보다 훨씬 민감. YCbCr 로 분리하면 Cb/Cr 을 더 거칠게 압축해도 인지 X.

2. Chroma subsampling

4:4:4 — Y Cb Cr 모두 full 해상도 (압축 X)
4:2:2 — Cb/Cr 가로 1/2 → 33% 절감
4:2:0 — Cb/Cr 가로·세로 1/2 → 50% 절감 (가장 흔함)

대부분 JPEG 4:2:0. 빨강·녹색 작은 디테일이 약간 흐릿. 인간 눈은 보통 못 알아챔.

3. 8×8 block → DCT

이미지를 8×8 픽셀 블록으로 자르고 각 블록을 Discrete Cosine Transform 적용 — 픽셀 값을 주파수 계수로 변환:

공간 영역 (픽셀 8×8):       주파수 영역 (DCT 계수 8×8):
[ 130 132 128 ... ]   →    [ 1024  -8   2 ...]
[ 131 133 130 ... ]        [   -3   1   0 ...]
[ 130 131 128 ... ]        [    0   0   0 ...]
[ ...           ]          [ ...            ]
                            ↑
                            좌상이 평균 (DC), 우하로 갈수록 고주파

DCT 자체는 손실 X — 같은 정보를 다른 표현. 그러나 자연 사진의 에너지가 대부분 저주파 (좌상 corner) 에 몰린다 → 고주파 계수를 버려도 시각 차이 미미.

4. Quantization (양자화) — 진짜 손실 단계

각 DCT 계수를 quantization table 의 정수로 나누고 반올림:

원본 DCT:      1024  -8   2   1   0   0   0   0
Q-table:         16  11  10  16  24  40  51  61
나눈 후:         64  -1   0   0   0   0   0   0
                       ↑ 대부분 0 으로 ↑

Quality 옵션이 이 table 의 크기 조절. Q=90 은 table 값 작음 (0 적음, 큰 파일). Q=30 은 table 값 큼 (0 많음, 작은 파일, 시각 손실).

5. Zigzag + Huffman

8×8 계수를 zigzag 순서로 1D 시퀀스로 펴서 (저주파 → 고주파), 뒤쪽의 연속 0 을 RLE (run-length) + Huffman 으로 압축.

직접 시도 — 이미지 리사이즈·압축 에서 JPEG quality slider 변경하면서 file size 변화 즉시 확인 가능. Q=95 대비 Q=70 이 절반 크기, 시각 차이는 거의 X.

WebP — VP8 + 새 무손실 알고리즘

Google 2010 년 출시. 두 모드:

WebP lossy — VP8 비디오 코덱의 intra-frame 압축 재활용. JPEG 대비 25-35% 작음.
WebP lossless — PNG 대비 25% 작음. predictor + LZ77 + Huffman + 색 transform.

JPEG 대비 WebP-lossy 의 강점:

DCT 가 아닌 더 정교한 변환 (ADST 등) + 더 큰 block (16×16)
더 똑똑한 entropy coding (arithmetic coding vs Huffman)
intra-block prediction — 옆 블록 픽셀에서 현재 블록 예측 후 차이만 저장
loop filter — block 경계 부드럽게 (JPEG 의 blocky artifact 회피)

WebP 가 알파 채널 (투명도) 도 손실 모드에서 지원 → 반투명 PNG 보다 작음. 모던 웹 default 권장 사항.

AVIF — AV1 비디오 코덱의 친구

2019 년 표준. AV1 비디오 코덱의 intra-frame:

JPEG 대비 50% 작음 (같은 시각 품질)
WebP 대비 20-30% 작음
10/12-bit 색 depth, HDR, 광색역 지원
chroma subsampling 옵션 (4:4:4 가능)
알파 채널 효율적

단점:

인코딩 매우 느림 (JPEG 의 50-100 배 시간)
브라우저 지원이 WebP 보다 늦음 (2024 년 기준 모든 메이저 OK)
작은 이미지 (~1 KB 이하) 는 오버헤드로 오히려 큼

HEIC — Apple 의 사진 포맷

iPhone 의 기본 사진 포맷 (iOS 11+). HEVC (H.265) 비디오 코덱 기반. AVIF 와 비슷한 효율. 단, license 문제로 웹 표준 X — 거의 Apple ecosystem 내부.

iPhone 사진을 PC 에 옮기면 호환 X → JPG 변환 필요한 케이스가 흔함.

현실 비교 — 같은 사진

포맷	모드	크기 (1920×1280 사진)	품질
BMP / uncompressed	—	~7 MB	완전
PNG	무손실	~4-5 MB	완전
JPEG Q=95	손실	~800 KB	거의 완벽
JPEG Q=70	손실	~250 KB	웹 적정
WebP Q=80	손실	~180 KB	JPEG Q=85 동등
AVIF Q=70	손실	~100 KB	WebP 동등

언제 어떤 포맷

스크린샷·도표·로고 (256 색 이하) — PNG-8 (palette). lossy 는 노이즈만 추가.
스크린샷·UI 캡처 (full color, 평면 다수) — PNG-24 또는 WebP-lossless. WebP 가 보통 25% 작음.
일반 사진 (블로그·SNS) — WebP Q=80 또는 JPEG Q=85. WebP 가 작지만 호환성 검토.
고품질 사진 (포트폴리오·인쇄) — JPEG Q=95 이상. PNG 는 너무 큼.
최신 웹 (모던 브라우저만) — AVIF first, WebP fallback, JPEG ultimate fallback. <picture> element 로 분기.
아이콘·정확 색 (게임·앱 UI) — PNG. 손실 X.
애니메이션 — GIF (옛) / WebP / APNG / AVIF. WebP 가 GIF 대비 1/3.

흔한 함정

1. JPEG 의 반복 저장

JPEG 파일을 열어 편집·저장·다시 열어 편집·다시 저장 — 매번 손실 누적. 같은 quality 라도 generation loss. 원본 PNG/RAW 유지 후 최종만 JPEG 권장.

2. PNG 로 사진 보존

팀이 "무손실이 안전" 으로 사진을 PNG 로 저장 — 파일이 10 배. 사진은 손실 압축이 정상.

3. JPEG 의 알파 채널 가정

JPEG 는 투명도 X. 반투명 로고를 JPEG 저장하면 배경이 검정/흰색. 반투명은 PNG / WebP / AVIF.

4. progressive vs baseline JPEG

progressive JPEG 는 다운로드 진행에 따라 점진 선명 → 모바일 체감 ↑. baseline 은 위에서 아래로. 같은 quality 라면 크기 비슷.

5. EXIF 메타데이터 누락

Tool 또는 CDN 자동 최적화가 EXIF 제거 — 사진 방향 (orientation) 정보 손실 → 회전된 채로 노출. imagemin-jpegtran 의 --copy=all 옵션.

참고 자료

JPEG 표준 (ISO/IEC 10918-1) — ITU-T81 (원조 PDF)
PNG 표준 (ISO/IEC 15948) — W3C
WebP 사양 — Google
AVIF 사양 — AOM

요약

raw 이미지 1920×1080 ≈ 6 MB. 모든 포맷이 그걸 줄이는 다른 방식.
PNG = 무손실. Palette + filter + DEFLATE. 스크린샷·로고에 강함.
JPEG = 손실. RGB → YCbCr → DCT → quantization → Huffman. 사진의 king (1992).
WebP = JPEG 대비 25-35% 작음. lossless 도 PNG 대비 25% 작음.
AVIF = JPEG 대비 50% 작음. 인코딩 느림. 모던 웹의 다음 default.
포맷 선택 — 콘텐츠 종류 (사진/도표/로고) + 호환성 (모던/레거시) + 인코딩 시간 트레이드오프.
실험 — 이미지 리사이즈·압축 의 quality slider 와 포맷 변환으로 크기 차이 즉시 확인. 이미지 → Base64 (Data URI) 로 작은 이미지 inline embed.