1. 이미지마다 적합한 포맷 고르기
포맷만 잘 바꿔도 파일 크기가 절반으로 줄기도 합니다. 사진과 복잡한 그래픽에는 WebP를 기본으로 쓰세요. 동일 화질에서 JPG보다 25~35% 작습니다. 로고와 아이콘에는 SVG, 투명도가 필요한 무손실 이미지에만 PNG를 쓰면 됩니다. 정적 에셋이라면 AVIF도 고려해볼 만합니다. JPG 대비 50%까지 줄일 수 있거든요.
2. 표시 크기에 맞춰 리사이즈
800픽셀로 표시할 이미지를 4000픽셀 그대로 올리는 건 대역폭 낭비이자 브라우저에 불필요한 연산을 시키는 일입니다. 실제 표시 크기에 정확히 맞추세요. 레티나 디스플레이 대응이라면 CSS 표시 크기의 2배면 충분합니다. 400px 자리에는 800px 원본이면 되지, 4000px일 필요 없습니다.
3. 압축은 전략적으로
손실 압축이 용량 절감의 핵심입니다. JPG와 WebP 모두 품질 75~85에서 원본과 거의 구분 안 되면서 훨씬 작은 파일을 만들 수 있습니다. 70 아래로 내리면 추가 절감은 미미한데 아티팩트가 눈에 보이기 시작합니다.
이미지 내용에 따라 최적 품질이 다르다는 점이 포인트입니다. 디테일 많은 사진은 압축을 더 견디지만, 단색과 선명한 테두리가 있는 그래픽은 더 민감하게 반응합니다. 일괄 처리라면 80~85로 약간 높게 잡는 게 안전합니다.
4. 지연 로딩(Lazy Loading) 적용
페이지 첫 화면에 안 보이는 이미지는 지연 로딩을 걸어야 합니다. HTML의 loading="lazy" 속성만 넣으면 브라우저가 스크롤이 가까워질 때 비로소 이미지를 불러옵니다. 초기 페이지 무게가 줄고 LCP(Largest Contentful Paint) 지표가 개선됩니다.
히어로 이미지나 첫 화면에 보이는 콘텐츠에는 지연 로딩을 걸면 안 됩니다. 이런 이미지는 즉시 로드되어야 체감 속도가 좋습니다.
5. srcset으로 반응형 이미지 제공
375px 폰과 2560px 데스크톱 모니터에 같은 이미지를 보낼 이유가 없습니다. srcset 속성으로 여러 해상도를 준비하고 브라우저가 골라 쓰게 하세요.
320w, 640w, 960w, 1280w, 1920w 정도의 변형을 만들고, sizes 속성으로 뷰포트별 표시 너비를 알려주면 각 기기가 필요한 만큼만 다운로드합니다.
6. CDN 활용
CDN은 전 세계에 분산된 서버에 이미지를 캐싱합니다. 뉴욕 서버의 이미지를 도쿄에서 불러오면 느리지만, CDN의 근처 에지 서버에서는 거의 즉시 도달합니다.
많은 CDN이 자동 이미지 최적화도 제공합니다. 요청 기기에 맞춰 포맷 변환, 리사이즈, 압축을 실시간으로 처리해주니 HTML 수정 없이도 WebP와 JPG를 자동으로 구분해 서빙할 수 있습니다.
7. 캐시 헤더 제대로 설정
이미지는 자주 바뀌지 않으니 공격적으로 캐싱해야 합니다. 버전이 붙은 에셋에는 1년 이상의 max-age를 설정하세요. 파일이 바뀔 때는 콘텐츠 해시 파일명(hero-a3f8b2.webp)이나 쿼리스트링으로 캐시를 갱신하면 됩니다.
제대로 캐싱하면 재방문자는 이미 본 이미지를 다시 다운로드하지 않습니다. 수 메가바이트 페이지가 순식간에 뜨는 경험을 만들 수 있죠.
8. 불필요한 메타데이터 제거
카메라 사진에는 카메라 모델, 렌즈 정보, GPS 좌표, 촬영 시각 등 EXIF 메타데이터가 들어 있습니다. 이미지당 10~50KB를 차지하는데 웹 방문자에게는 아무 쓸모 없습니다. 최적화 과정에서 메타데이터를 벗겨내면 용량도 줄고, 스마트폰 촬영 사진의 위치 정보 노출 위험도 사라집니다.
9. 장식 효과는 CSS로
그림자, 둥근 모서리, 그라데이션, 단순 패턴은 이미지가 아니라 CSS로 처리해야 합니다. CSS 그라데이션은 이미지 용량이 0이고, 같은 걸 PNG로 만들면 20KB가 넘습니다. CSS 효과는 모든 해상도에서 완벽하게 스케일링되고, 다크모드 전환도 자연스럽고, 애니메이션도 매끄럽습니다.
10. 측정하고 모니터링하기
측정 없는 최적화는 감에 의존하는 것입니다. Lighthouse, WebPageTest, Chrome DevTools로 이미지 사용 현황을 점검하세요. 과대 이미지, 누락된 지연 로딩, 부적절한 포맷 등 개선점을 잡아줍니다.
페이지 무게 예산을 정하고 추적하세요. 일반적인 웹 페이지의 이미지 총량은 200~500KB가 적절합니다. Core Web Vitals 중 LCP를 주시하세요. 2.5초 이하가 목표인데, 이미지가 LCP 요소인 경우가 가장 많습니다.