웹 이미지 최적화 체크리스트: 완벽한 가이드

사진: WebP를 기본으로, JPG를 폴백으로 사용하세요. 일반 이미지는 품질 75~80, 썸네일은 품질 70, 히어로 이미지나 갤러리는 품질 85~90이 적합합니다. 실제 이미지를 테스트해서 화질 저하가 눈에 띄지 않는 임계값을 직접 찾아보세요.

그래픽, 로고, 아이콘: 투명도가 필요하면 PNG를 쓰고, 그렇지 않다면 WebP를 검토하세요. 품질 90 이상의 WebP는 PNG보다 뛰어난 성능을 내면서도 파일 크기가 경쟁력 있습니다. 텍스트나 날카로운 모서리가 있는 이미지에는 JPG를 피하세요.

스크린샷과 UI 목업: PNG 또는 WebP 품질 85+가 좋습니다. 이런 이미지에는 날카로운 경계선이 많아 JPG 아티팩트가 가장 눈에 잘 띕니다. 파일 크기가 조금 늘어나더라도 높은 품질이 그만한 가치가 있습니다.

400×300 화면에 4000×3000 이미지를 올리지 마세요. 대역폭 낭비입니다. 이미지를 표시될 최대 너비로 미리 줄여두고, 더 작은 화면에서의 축소는 브라우저에 맡기세요.

반응형 이미지를 활용하세요. 너비별로 3~4가지 버전(예: 400px, 800px, 1200px)을 만들고 `<picture>`나 `srcset` 속성을 사용해 브라우저가 뷰포트에 맞는 버전을 내려받도록 하세요. 이것만으로 대역폭을 30~50% 줄일 수 있습니다.

간단한 계산: 품질 75의 4000×3000 사진은 280KB입니다. 웹용으로 1200×900으로 크기를 줄이면 30KB가 됩니다. 90% 절감입니다. 크기 조정이 이미지 최적화에서 효과가 가장 큰 단일 작업입니다.

사용자가 아직 스크롤하지 않은 이미지를 미리 불러올 필요는 없습니다. `<img>` 태그에 `loading="lazy"`를 추가하면 브라우저가 이미지가 뷰포트에 가까워질 때까지 로딩을 미룹니다. 초기 페이지 로드가 빨라지고, 사용자가 보지 않을 이미지의 대역폭도 아낄 수 있습니다.

첫 화면에 보이는 중요한 이미지(히어로, 제품, 주요 콘텐츠)는 `loading="eager"`를 유지하거나 속성을 생략하세요. 페이지 아래쪽 이미지에 지연 로딩을 적용하면 추가 비용 없이 성능을 얻을 수 있습니다. 최신 브라우저는 기본적으로 지원합니다.

구형 브라우저 지원이 필요하다면 `lqip`나 `intersection-observer` 같은 자바스크립트 지연 로딩 라이브러리를 사용하세요. 성능 향상 폭이 충분히 커서 라이브러리 추가 비용을 감수할 만합니다.

기기 화면 너비와 픽셀 밀도에 따라 적절한 이미지 버전을 브라우저에 알려주세요. 예시: `<img src="image-sm.jpg" srcset="image-sm.jpg 400w, image-md.jpg 800w, image-lg.jpg 1200w" />`. 모바일은 작은 버전을, 데스크톱은 큰 버전을 다운로드합니다.

고DPI 화면(Retina, 최신 스마트폰)에는 픽셀 밀도 디스크립터를 사용하세요. `image.jpg 1x, image-2x.jpg 2x`. 선명한 디스플레이에는 고해상도 버전이, 구형 기기에는 표준 버전이 내려갑니다.

반응형 이미지를 제대로 쓰면 단일 이미지 방식에 비해 모바일 대역폭을 최대 60% 줄일 수 있습니다. 현대 웹 성능에서 선택 사항이 아닙니다.

LCP(Largest Contentful Paint): 이미지가 LCP 요소인 경우가 많습니다. 적극적으로 압축하고(품질 75~80), 중요한 이미지는 `<link rel="preload">`로 미리 로드하며, CDN을 통해 제공하세요. LCP 2.5초 이하를 목표로 잡으세요.

CLS(Cumulative Layout Shift): 이미지에 항상 치수를 지정하세요(`width`, `height` 속성 또는 CSS `aspect-ratio`). 치수가 없으면 브라우저가 공간을 미리 확보하지 않아, 이미지가 로드될 때 콘텐츠가 밀려 CLS 점수가 떨어집니다.

INP(Interaction to Next Paint): 이미지와 직접적인 관련은 적지만, 반응형 이미지로 페이지 로드 시간이 줄어들면 INP도 간접적으로 개선됩니다. 느린 페이지는 느린 인터랙션으로 이어집니다.

이미지를 원본 서버 대신 CDN(Cloudflare, Imgix, Fastly)에서 제공하세요. CDN은 사용자와 가까운 엣지 위치에 이미지를 캐싱해 지연을 줄이고 대역폭 비용을 낮춥니다. 많은 CDN이 요청 기기에 맞춰 크기 조정, 형식 변환, 재압축을 자동으로 처리합니다.

이미지에는 긴 캐시 헤더를 설정하세요. `Cache-Control: public, max-age=31536000`(1년). 이미지는 거의 바뀌지 않으므로 공격적인 캐싱이 안전하고, 재방문 속도를 크게 향상시킵니다.

이미지 업데이트에는 캐시 무효화를 사용하세요. 파일명에 버전 번호를 포함시키면(예: `hero-v2.jpg`) CDN이 새 이미지로 인식하여, 긴 캐시 기간에도 사용자가 즉시 업데이트를 받습니다.

빌드 타임 최적화를 도입하세요. Squoosh, ImageMagick, Sharp 같은 도구가 빌드 과정에서 자동으로 변환과 크기 조정을 처리합니다. Next.js Image 컴포넌트나 Astro Image도 이를 자동으로 해줍니다.

성능을 꾸준히 모니터링하세요. Google Analytics와 Core Web Vitals 보고서로 실제 이미지 파일 크기와 로드 시간을 추적합니다. 목표(예: 평균 이미지 크기 150KB 이하, LCP 2.5초 이하)를 설정하고 이를 향해 최적화하세요.

img-toolbox 같은 서비스도 유용합니다. 사진 폴더를 업로드하면 몇 분 안에 웹 최적화된 버전을 다운로드할 수 있습니다. 대량 작업이나 다양한 압축 설정을 비교 테스트할 때 활용하세요.