웹사이트가 느린 이유를 추적해 보면 대개 한 곳에 모인다. 이미지다. HTTP Archive가 매년 발표하는 통계를 보면 평균적인 웹페이지 무게에서 이미지가 차지하는 비중은 절반 안팎이고, 모바일에서는 그 비율이 더 올라간다. 자바스크립트를 백 줄 줄이는 것보다 이미지 한 장을 제대로 다루는 편이 첫 화면 속도에 훨씬 더 큰 영향을 준다.
그런데 많은 사이트가 여전히 카메라에서 바로 나온 4,000픽셀짜리 JPG를 그대로 올린다. 모바일 화면에서는 400픽셀이면 충분한 자리에 10배 큰 이미지가 들어가 있고, 첫 화면 위에 있는 메인 비주얼이 가장 늦게 로딩된다. 사장님의 매출은 그 몇 초 사이에 새어 나간다. 오늘은 이미지 최적화를 결정짓는 다섯 가지 원칙을 정리한다.
1. 포맷부터 바꾼다 — JPG·PNG가 아닌 WebP와 AVIF
JPG와 PNG는 30년 가까이 된 포맷이다. 같은 화질을 유지하면서 용량을 줄이는 새 포맷이 이미 표준이 된 지 오래다. WebP는 JPG 대비 약 25~35%, AVIF는 약 50% 더 작은 용량으로 같은 품질을 낸다. 두 포맷 모두 크롬·사파리·파이어폭스·엣지 최신 버전에서 지원되고, AVIF는 사파리 16 이상부터 가능하다.
대응이 어렵지 않다. <picture> 태그를 쓰면 브라우저가 지원하는 포맷을 자동으로 골라 준다. AVIF를 먼저 제시하고, WebP를 폴백으로, 마지막에 JPG를 두면 오래된 브라우저까지 안전하게 커버된다. 이미지 파일을 새로 올릴 때만 변환해 두면 운영 부담도 거의 없다.
2. 진짜 필요한 크기로 리사이즈한다 — srcset과 sizes
모바일 화면에 데스크톱용 2,000픽셀 이미지를 그대로 보여 주는 일은 데이터를 그냥 버리는 것과 같다. 브라우저는 디바이스 픽셀 비율과 화면 너비를 알고 있으므로, 여러 해상도의 이미지를 알려 주면 가장 적합한 한 장만 내려받는다.
실무에서는 같은 이미지를 480w·800w·1200w·1600w 정도로 4~5단계 변환해 두고 srcset에 나열한다. sizes 속성으로 화면 너비별 표시 크기를 알려 주면 정확도가 더 올라간다. 이 작업 하나로 모바일 사용자의 데이터 소비량이 절반 이하로 떨어지는 경우가 흔하다.
3. 화면 밖 이미지는 늦게 로딩한다 — loading="lazy"
긴 페이지에는 첫 화면 아래로 이미지가 수십 장씩 깔린다. 사용자가 스크롤하기 전까지는 보이지 않는 이미지인데, 페이지를 열자마자 전부 내려받는다면 첫 화면이 느려질 수밖에 없다.
해결은 한 줄이다. <img loading="lazy">을 추가하면 브라우저가 뷰포트 근처에 들어올 때까지 로딩을 미룬다. 추가로 decoding="async"를 붙이면 디코딩 작업이 메인 스레드를 막지 않는다. 다만 첫 화면에 보이는 이미지에는 lazy를 절대 붙이지 않는다. 오히려 더 늦어진다.
4. LCP 이미지에는 우선순위를 부여한다 — fetchpriority와 preload
구글이 보는 Core Web Vitals의 LCP(Largest Contentful Paint)는 대부분 첫 화면의 메인 이미지가 결정한다. 이 한 장이 빨리 뜨면 점수가 좋아지고, 검색 노출에도 영향이 간다.
가장 큰 이미지에 fetchpriority="high"를 명시하면 브라우저가 해당 이미지를 다른 리소스보다 먼저 내려받는다. 더 적극적으로는 <link rel="preload" as="image">로 HTML이 파싱되기 전에 다운로드를 시작시킬 수 있다. 작은 변경이지만 LCP가 1초 가까이 빨라지는 케이스가 많다.
5. 변환과 캐싱은 엣지에서 — CDN의 힘을 빌린다
여기까지의 모든 작업을 매번 손으로 하는 건 비효율적이다. Cloudflare Images, Vercel Image Optimization, Imgix 같은 서비스는 원본 이미지 한 장만 올려 두면 URL 파라미터에 맞춰 포맷·크기·품질을 자동으로 변환해 캐시한다. 사진작가의 RAW 파일 같은 무거운 원본도, 사용자에게는 200KB짜리 AVIF로 도달한다.
자체 서버를 쓴다면 PHP의 imagick 확장이나 spatie/image 같은 라이브러리로 업로드 시점에 여러 사이즈를 미리 만들어 두는 방법이 가장 안정적이다. 어느 쪽이든 원본은 그대로 보관하고, 변환본을 캐시한다는 원칙은 동일하다.
결국 이미지가 사이트의 첫인상을 결정한다
로고, 제품 사진, 작업물 갤러리, 배경 비주얼. 어떤 비즈니스 사이트든 이미지가 메시지의 절반 이상을 전달한다. 그 이미지가 늦게 뜨거나 흐릿하게 뜨면, 아무리 좋은 카피와 디자인도 빛을 보지 못한다.
CYAN 에이전시는 사이트를 만드는 단계에서부터 이미지 파이프라인을 함께 설계한다. 업로드되는 모든 이미지는 자동으로 AVIF·WebP로 변환되고, 화면 크기별 변형이 미리 생성되며, 첫 화면 이미지에는 우선순위가 적용된다. 사장님은 평소처럼 사진을 올리기만 하면, 모바일 고객은 가벼운 첫 화면을 만난다. 이미지 한 장이 매출을 만든다는 사실은 생각보다 자주 잊힌다.