이미지 최적화 파이프라인 완전 가이드
거대한 원본 이미지를 웹에 최적화된 에셋으로 — 실제로 대역폭을 절약하는 단계별 워크플로.
디자이너가 포토샵에서 갓 나온 4000x3000 PNG를 건네줍니다. 8 MB짜리. 웹페이지에는 800px 너비, 100 KB 이하, 가능하면 WebP 포맷이 필요합니다.
"갖고 있는 것"과 "웹에 필요한 것" 사이의 격차. 대부분의 개발자가 시간을 낭비하는 지점입니다. 제대로 된 파이프라인으로 해결해봅시다.
1단계: 목표 크기로 리사이즈
파일 크기를 가장 크게 줄이는 건 리사이즈입니다. 800px로 표시될 이미지가 4000px이면 픽셀의 96%를 낭비하고 있는 겁니다. 과장이 아니라 수학이에요.
레티나 디스플레이를 위해 표시 크기의 2배로 설정하세요. 화면에서 400px로 렌더링된다면 800px로 리사이즈. 4000px이 아니라요.
일반적인 절감: 4000x3000 (8 MB) → 800x600 (400 KB). 리사이즈만으로 95% 감소.
2단계: 눈에 보이지 않는 수준으로 압축
리사이즈 후 압축합니다. 사진의 경우 JPEG 품질 75-85%가 최적 지점입니다 — 원본과 시각적으로 동일하면서 파일은 훨씬 작아집니다.
핵심은 압축 아티팩트가 눈에 보이기 시작하는 임계점을 찾는 겁니다. 대부분의 사진에서 그 지점은 70% 정도입니다. 그 위로 유지하면 확대하지 않는 한 아무도 구분 못 합니다.
일반적인 절감: 400 KB → 120 KB (품질 80%). 사용자의 눈은 모릅니다. 로딩 속도는 압니다.
3단계: 최신 포맷으로 변환
JPEG과 PNG는 오래됐습니다. WebP는 같은 품질에서 25-35% 더 작은 파일을 제공합니다. AVIF는 더 나아갑니다.
실용적인 접근:
- 사진: WebP (폭넓은 지원) 또는 AVIF (최고 압축률)
- 스크린샷/그래픽: 투명도 필요에 따라 WebP 또는 PNG
- 아이콘/로고: 가능하면 SVG 유지
<picture> 요소로 WebP를 제공하고 JPEG 폴백을 두세요. WebP 브라우저 지원은 이미 97% 이상이지만, 폴백은 비용이 들지 않습니다.
4단계: SVG 최적화
디자인 도구에서 나온 SVG 파일에는 불필요한 것들이 많습니다 — 에디터 메타데이터, 불필요한 소수점 자릿수, 중복 그룹, 보이지 않는 요소. 일러스트레이터에서 나온 SVG는 30-50%가 불필요한 데이터입니다.
SVG 최적화 도구를 돌리면 파일 크기가 급감합니다. 15 KB 아이콘이 5 KB가 됩니다. 페이지에 아이콘이 20개면 200 KB의 마크업을 절약하는 거죠.
5단계: 작은 에셋은 Base64로
아주 작은 이미지 (2 KB 이하) — 아이콘, 불릿, 작은 장식 요소 — 는 Base64로 변환해서 인라인으로 삽입하면 HTTP 요청 하나를 완전히 없앨 수 있습니다.
요청 하나 줄이기 > HTML 약간 커지기. 단, 작은 이미지에만 해당됩니다. CSS에 50 KB짜리 Base64 문자열이 들어가면 별도 요청보다 더 나쁩니다.
경험 법칙: 2 KB 이하? Base64. 2 KB 초과? 별도 파일.
실제 수치: 사례 연구
시작점: 카테고리 페이지의 상품 이미지 12개.
| 단계 | 전체 크기 | 절감률 | |------|----------|--------| | 원본 PNG | 45 MB | — | | 리사이즈 후 (800px) | 2.1 MB | 95.3% | | 압축 후 (80%) | 680 KB | 98.5% | | WebP 변환 후 | 450 KB | 99.0% |
45 MB에서 450 KB로. 같은 시각 품질. 페이지 로딩이 12초에서 1.2초로.
실전 파이프라인
이미지 배치 작업 시 워크플로는 이렇게 기계적으로 진행됩니다:
- 리사이즈 — 목표 크기로 조정
- 압축 — 적절한 품질 설정으로
- 변환 — WebP/AVIF로
- 최적화 — SVG 에셋
- Base64 인코딩 — 작은 아이콘
세 번만 해보면 한 페이지 분량의 이미지를 5분 만에 처리할 수 있습니다.
잊지 마세요: 지연 로딩
최적화는 파일 크기에서 끝나지 않습니다. 스크롤 아래 이미지에 loading="lazy"를 추가하세요. 브라우저가 사용자가 가까이 스크롤할 때까지 다운로드하지 않습니다. 무료 성능 향상이에요.
이미지 최적화는 화려하지 않습니다. JPEG 압축이 신난다고 글을 쓰는 사람은 없죠. 하지만 대부분의 사이트가 할 수 있는 성능 개선 중 가장 효과가 큰 겁니다. 작은 이미지는 빠른 페이지, 만족한 사용자, 낮은 대역폭 비용을 의미합니다. 프로덕션에 올리기 전에 모든 이미지를 파이프라인에 통과시키세요.