웹용 이미지 최적화: 완벽 가이드

이미지는 중앙값 기준으로 웹 페이지가 실어 나르는 바이트의 약 절반을 차지합니다 — 그리고 가장 큰 이미지는 구글이 당신의 페이지 속도를 재는 기준인 LCP 요소인 경우가 아주 많습니다. 히어로 이미지를 2 MB에서 150 KB로 줄이면 모바일에서 Largest Contentful Paint를 1초나 앞당길 수 있습니다. 어떤 JavaScript 리팩터링도 이만큼 값싸게 그 효과를 내지 못합니다. 좋은 소식은, 이미지 최적화가 짧고 순서가 정해진 체크리스트이며 모든 단계가 브라우저에서 무료로 돌아간다는 점입니다. 각 단계가 다음 단계의 효과를 키우니, 이 순서대로 진행하세요.

1. 먼저 크기를 줄인다 (가장 큰 효과)

폰 카메라로 찍은 4000×3000 사진을 800픽셀 폭 본문 칸에 표시하면 픽셀의 90% 이상이 낭비됩니다 — 브라우저는 그 픽셀을 전부 내려받은 뒤 대부분을 버립니다. 포맷이나 품질 슬라이더를 건드리기 전에, 이미지를 실제로 표시될 최대 크기 정도로 줄이세요(고DPI 화면을 위해 최대 2배까지: 800px 칸이라면 4000px가 아니라 1600px 이미지가 적당합니다). 이미지 크기 조정이 업로드 없이 브라우저에서 이 작업을 처리합니다. 크기 조정만으로도 파일 용량이 흔히 80–90% 줄어듭니다. 이 단계가 맨 앞에 오는 이유가 바로 그것입니다: 크기부터 줄였어야 할 이미지를 압축하는 것은 버려질 픽셀을 광내는 일입니다.

2. 올바른 포맷을 고른다

포맷 선택이 두 번째 배수입니다. 요약하면: 사진은 PNG보다 JPG로 압축할 때 훨씬 잘 줄어들고(PNG vs JPG에서 그 이유를 다룹니다), 최신 포맷은 둘 다 능가합니다 — WebP는 같은 화질의 JPG보다 보통 25–35% 작고(WebP vs JPG에 수치가 있습니다), AVIF는 비슷한 품질에서 JPG 용량을 절반으로 줄이는 경우가 많습니다.

• 사진과 스크린샷은 Image to WebP로 변환하세요 — WebP는 현행 모든 브라우저가 지원하며, 안전한 최신 기본값입니다.
• 히어로 이미지와 사진이 많은 페이지처럼 절감 효과가 가장 큰 곳에서는 Image to AVIF로 더 짜내세요.
• 레거시 요구사항(구형 이메일 클라이언트, CMS 제약)에 묶여 있나요? 최소한 사진성 PNG만이라도 PNG to JPG로 변환하세요 — PNG로 저장된 사진은 필요한 것보다 5–10배 큰 경우가 흔합니다.

PNG는 그것이 잘하는 것 — 선이 또렷한 그래픽, 텍스트, 투명 배경 — 에만 남겨두세요.

3. 압축한다

크기와 포맷을 바로잡았다면, 품질 설정이 마지막 큰 몫을 가져갑니다. 이미지 압축은 결과를 미리 보면서 품질을 낮출 수 있게 해줍니다. 사진의 경우 품질 75–80 정도면 용량은 절반이면서도 100과 시각적으로 구별되지 않는 게 보통입니다. 가장 좋은 원본에서, 한 번만 압축하세요 — 이미 압축된 JPG를 다시 압축하면 아티팩트가 쌓입니다. 폴더 전체를 처리한다면 이미지 일괄 변환이 한 번에 묶음으로 처리합니다.

4. 메타데이터를 제거한다

카메라 사진은 EXIF 데이터를 담고 다닙니다 — 촬영 시각, 기기 모델, 그리고 흔히 촬영 장소의 GPS 좌표까지. 이는 낭비되는 바이트인 동시에, 사진이 공개 사이트에 올라갈 때는 개인정보 유출입니다. 파일이 무엇을 담고 있는지 이미지 메타데이터 뷰어로 확인한 뒤, EXIF 제거 도구로 지우세요. EXIF 데이터 확인하고 제거하는 방법에서 두 과정을 모두 안내합니다. 일부 변환 도구는 EXIF를 부수적으로 제거하기도 하니, 지레짐작하지 말고 직접 확인하세요.

5. 파비콘과 그 외

작은 것들도 감사(audit)에서는 어김없이 걸립니다. 이미지 하나로 완전한 favicon 세트 — ICO, 여러 PNG 크기, apple-touch-icon — 를 파비콘 생성기로 만드세요(전체 가이드). favicon이 없으면 페이지를 열 때마다 404가 발생하고, 최적화되지 않은 1 MB짜리 apple-touch-icon은 전형적인 조용한 세금입니다.

흔한 실수

• 업스케일링. 작은 이미지를 키우면 바이트와 흐림만 더해질 뿐, 디테일은 절대 생기지 않습니다. 원본이 600px라면 600px에 맞춰 디자인하거나 더 큰 원본을 찾으세요.
• 두 번 압축하기. 손실 저장을 할 때마다 앞선 아티팩트 위에 아티팩트가 쌓입니다. 원본을 보관하고 항상 그것에서 내보내세요 — 어제 나온 결과물을 다시 압축하지 마세요.
• 사진에 PNG 쓰기. 웹에서 가장 흔한 용량 실수입니다. PNG는 무손실이라 사진에는 거대해집니다. PNG는 그래픽과 투명 배경을 위한 것입니다.
• 폴백 없이 AVIF만 내보내기. AVIF는 <picture> 요소를 통해 WebP나 JPG 소스를 뒤에 두고 제공하세요. 그래야 구형 브라우저와 이미지 프록시도 무언가는 렌더링합니다.
• 페이지에 보이지도 않는 이미지 최적화하기. 먼저 점검하세요: 화면 아래쪽 이미지는 지연 로딩하고 쓰지 않는 것은 삭제하세요 — 가장 값싼 이미지는 아예 보내지 않는 이미지입니다.