웹사이트 이미지 최적화: 단계별 실전 가이드

이미지는 평균 웹 페이지 용량의 약 40%를 차지합니다. 올바르게 최적화하면 페이지 크기를 절반으로 줄이고, Largest Contentful Paint를 2.5초 이내로 만들고, 검색 순위를 높일 수 있습니다. 전체 과정을 단계별로 정리했습니다.

이미지 최적화가 그 어느 때보다 중요한 이유

HTTP Archive 데이터에 따르면, 모바일 웹 페이지의 중앙값 용량은 약 2.5MB이고 그중 이미지가 약 1MB를 차지합니다. Google의 Core Web Vitals 중 하나인 Largest Contentful Paint(LCP)는 가장 큰 가시적 요소가 로드되는 속도를 직접 측정합니다. 대부분의 페이지에서 그 요소가 바로 이미지입니다.

기준: LCP 2.5초 이내가 "양호", 4초 초과는 "불량". 이미지 기반 LCP가 있는 페이지는 텍스트 기반 LCP 페이지보다 75번째 백분위수 로딩 시간이 거의 2배 느립니다. 최적화된 히어로 이미지와 비최적화된 이미지의 차이가 Core Web Vitals의 녹색과 빨간색을 가르는 경우가 많습니다.

1단계: 올바른 포맷 선택

포맷 선택이 파일 크기에 가장 큰 영향을 미칩니다. 주요 웹 포맷을 실제 압축 벤치마크 기준으로 비교합니다:

대부분의 웹사이트에서 WebP가 가장 안전한 기본 선택입니다. 사진과 그래픽 모두 잘 처리하고, 공격적으로 압축하며, 어디서든 작동합니다. 스택이 지원한다면 AVIF를 기본으로 제공하고 <picture> 요소로 WebP를 폴백으로 쓰세요. Vizua에서 JPG를 WebP로 변환하거나 AVIF로 변환할 수 있습니다. 업로드 없이 브라우저에서 처리됩니다.

더 자세한 비교가 필요하다면 JPEG vs PNG 비교와 손실 vs 무손실 압축 가이드를 참고하세요.

2단계: 실제 표시 크기에 맞게 리사이즈

카메라에서 나온 4000 x 3000 픽셀 사진을 웹에서 800 x 600으로 표시하면, 전체 픽셀의 약 80%가 낭비됩니다. 보이지 않는 픽셀이지만 여전히 대역폭과 파싱 시간을 소비합니다.

원칙: 이미지를 실제 렌더링 크기에 맞춰 제공하세요. 일반 디스플레이에서는 픽셀 치수를 정확히 맞추고, 2x 레티나 화면에서는 표시 너비의 2배로 제공합니다. 그 이상은 불필요합니다.

실전 기준:

• 전체 너비 히어로: 1600~1920px (레티나용 2배까지)
• 블로그 본문 이미지: 800~1200px
• 썸네일: 300~400px
• 아바타: 64~128px (2x용 256px까지)

Vizua의 이미지 리사이저로 필요한 정확한 너비로 이미지를 줄인 뒤 압축하세요. 이것만으로 파일 크기가 70~90% 줄 수 있습니다.

3단계: 적절한 품질로 압축

포맷 선택과 리사이즈 후, 압축에서 나머지 절감을 끌어냅니다. 품질 슬라이더의 영향은 대부분 생각하는 것보다 큽니다. 품질과 파일 크기의 관계는 선형이 아닙니다. JPEG 품질을 100에서 80으로 낮추면 용량이 크게 줄지만, 80에서 60으로 내리면 수익 체감이 시작되고 아티팩트가 눈에 보이기 시작합니다.

권장 품질 설정:

• JPEG: 75~85 — 사진의 최적 구간. 품질 80 JPEG는 비압축 원본보다 60~80% 작으면서 눈에 보이는 차이가 없습니다.
• WebP: 75~80 — JPEG 85와 동등한 시각 품질이 더 작은 파일에 담깁니다.
• AVIF: 60~75 — 코덱 효율이 높아 낮은 수치에서도 화질이 좋습니다.
• PNG: 최대 압축 레벨 사용 (무손실). 추가 절감이 필요하면 그래픽이 허용하는 한 8비트(256색)로 줄이세요.

Vizua의 JPEG 압축기는 최적화된 알고리즘으로 가장자리와 그라데이션을 보존하면서 자동 처리합니다. 포맷별 상세 분석은 화질 손실 없이 이미지 압축하는 방법을 참고하세요.

4단계: 이미지를 효율적으로 전달하기

좋은 압축은 절반에 불과합니다. 이미지를 브라우저에 어떻게 전달하느냐가 성능에 똑같이 중요합니다.

명시적 치수 설정

<img> 태그에 항상 width와 height 속성을 포함하세요 (또는 CSS aspect-ratio 사용). 이미지 로드 전에 브라우저가 올바른 공간을 미리 확보해서, 콘텐츠가 밀리는 레이아웃 시프트를 방지합니다. 이는 CLS(Cumulative Layout Shift) 점수에 직접 영향을 줍니다.

스크롤 아래 이미지에 지연 로딩 적용

페이지 첫 화면에 보이지 않는 모든 이미지에 loading="lazy"를 추가하세요. 사용자가 해당 위치 근처로 스크롤할 때까지 다운로드를 미루어 초기 로딩 대역폭을 절약합니다.

히어로 이미지 우선순위 지정

가장 중요한 상단 이미지에는 반대로 하세요: fetchpriority="high"를 추가하고 loading="lazy"는 절대 넣지 마세요. Google 자체 테스트에서 미리 로드된 LCP 이미지는 75번째 백분위수 364ms의 거의 완벽한 성능을 보였지만, 지연 로드된 LCP 이미지는 720ms로 거의 2배 느렸습니다.

반응형 이미지 사용

srcset과 sizes 속성으로 브라우저가 사용자 화면 크기와 해상도에 맞는 최적의 이미지 변형을 선택하게 하세요. 하나의 <img> 태그에서 휴대폰에는 400px, 태블릿에는 800px, 데스크탑에는 1600px 이미지를 제공할 수 있습니다.

5단계: 점검과 측정

최적화는 한 번으로 끝나는 작업이 아닙니다. 새 이미지를 추가할 때마다 성능이 퇴보할 수 있습니다.

• PageSpeed Insights: Google의 PageSpeed Insights로 주요 페이지를 검사하세요. LCP 점수와 "차세대 포맷으로 이미지 제공" 또는 "이미지 크기 적절히 조정" 권장 사항을 확인합니다.
• 네트워크 분석: 브라우저 개발자 도구의 Network 탭에서 크기순으로 정렬하세요. 단일 이미지가 200KB를 넘으면 리사이즈, 재압축, 또는 더 나은 포맷 변환이 가능한지 검토합니다.
• 자동화: 빌드 파이프라인에 이미지 최적화를 추가해서 과도한 크기의 이미지가 배포 전에 걸리도록 하세요.

빠른 체크리스트

• WebP 또는 AVIF를 기본 포맷으로 사용
• 실제 표시 크기에 맞춰 리사이즈 (필요 이상으로 크지 않게)
• 압축: JPEG/WebP는 품질 75~85, AVIF는 60~75
• 모든 <img>에 width와 height 설정
• 히어로/LCP 이미지에 fetchpriority="high"
• 스크롤 아래 모든 이미지에 loading="lazy"
• 반응형 전달을 위해 srcset/sizes 사용
• 히어로 이미지 200KB 이하, 썸네일 80KB 이하 유지
• 불필요한 메타데이터(EXIF, ICC 프로파일) 제거 — EXIF 데이터 프라이버시 가이드 참고
• PageSpeed Insights로 정기 점검

자주 묻는 질문