1. 웹사이트 느린 이유의 절반은 이미지다
PageSpeed Insights나 GTmetrix로 사이트 속도를 분석해보면 개선 권고 사항의 절반 이상이 이미지와 관련된 경우가 많습니다. 이미지는 웹 페이지에서 가장 많은 용량을 차지하는 리소스입니다.
스마트폰으로 찍은 원본 사진은 보통 3~10MB에 달합니다. 이런 이미지를 최적화 없이 그대로 업로드하면 방문자 한 명이 페이지를 볼 때마다 수십 MB의 데이터를 내려받아야 합니다.
이미지 최적화는 가장 투자 대비 효과가 큰 성능 개선 방법입니다.
2. 이미지 포맷 선택하기 – JPG, PNG, WebP, AVIF
어떤 포맷을 쓰느냐만으로도 파일 크기가 크게 달라집니다.
JPG(JPEG): 사진처럼 색상이 많은 이미지에 적합합니다. 손실 압축 방식으로 파일 크기를 줄입니다. 투명도를 지원하지 않습니다.
PNG: 로고, 아이콘, 스크린샷처럼 선명한 경계가 필요한 이미지에 적합합니다. 투명도를 지원합니다. 파일 크기가 JPG보다 큰 경우가 많습니다.
WebP: 구글이 개발한 현대적인 이미지 포맷입니다. 같은 품질에서 JPG보다 약 25~34%, PNG보다 약 26% 파일 크기가 작습니다. 현재 모든 주요 브라우저에서 지원됩니다. 사진과 투명도 모두 지원해 JPG와 PNG를 대체할 수 있습니다.
AVIF: WebP보다도 더 높은 압축률을 보이는 최신 포맷입니다. 브라우저 지원이 점점 늘고 있지만 아직 완전하지 않아 fallback(대체 이미지)이 필요할 수 있습니다.
현재 새로 업로드하는 이미지는 WebP를 기본으로 사용하는 것을 권장합니다.
3. 이미지 압축 – 품질 손실 없이 파일 크기 줄이기
이미지를 WebP로 변환하거나 압축하는 도구를 소개합니다.
Squoosh (squoosh.app) 구글이 만든 무료 웹 기반 도구입니다. 브라우저에서 바로 사용할 수 있고, WebP를 포함한 다양한 포맷으로 변환하면서 품질과 파일 크기를 실시간으로 비교할 수 있습니다. 가장 추천하는 도구입니다.
TinyPNG / TinyJPG (tinypng.com) 드래그 앤 드롭으로 이미지를 올리면 자동으로 압축해줍니다. 무료로 월 500장까지 사용할 수 있습니다.
ImageOptim (Mac 전용) Mac 앱으로 여러 이미지를 한 번에 최적화할 수 있습니다. 메타데이터 제거, 색상 프로파일 최적화 등을 자동으로 처리합니다.
일반적으로 품질을 75~85%로 설정해도 육안으로는 차이를 느끼기 어렵고 파일 크기는 크게 줄일 수 있습니다.
4. 적절한 이미지 크기 사용하기
흔한 실수 중 하나는 필요한 크기보다 훨씬 큰 이미지를 사용하는 것입니다.
예를 들어 블로그 본문에 800px 너비로 표시되는 이미지라면 3000px 너비의 원본을 올릴 필요가 없습니다. 브라우저가 작게 줄여서 표시하더라도 파일은 3000px짜리 전체를 내려받습니다.
실제 표시 크기의 최대 2배 정도(레티나 디스플레이 대응)로 이미지를 준비하는 것이 적절합니다. 블로그 본문 이미지라면 1200~1600px 정도면 충분합니다.
이미지 크기를 조정할 때는 Photoshop, GIMP, 또는 온라인 도구인 iloveimg.com을 활용할 수 있습니다.
5. 레이지 로딩(Lazy Loading) 적용하기
레이지 로딩은 화면에 보이지 않는 이미지를 처음부터 모두 로딩하지 않고, 사용자가 스크롤해서 해당 이미지가 화면에 가까워질 때 로딩하는 방식입니다.
블로그 포스트처럼 스크롤이 긴 페이지에서 특히 효과적입니다. 처음 방문 시 화면에 보이지 않는 이미지를 모두 로딩하지 않아도 되므로 초기 로딩 속도가 빨라집니다.
HTML에서 img 태그에 loading=”lazy” 속성 하나만 추가하면 됩니다.
<img src="image.webp" alt="설명" loading="lazy">
단, 첫 화면에 보이는 히어로 이미지나 중요한 이미지에는 loading=”lazy” 대신 loading=”eager” 또는 속성을 아예 붙이지 않는 것이 좋습니다. 레이지 로딩이 LCP 점수를 악화시킬 수 있기 때문입니다.
6. 반응형 이미지 – srcset으로 화면 크기에 맞는 이미지 제공하기
같은 이미지라도 데스크톱 사용자와 모바일 사용자에게 다른 크기를 제공하면 모바일에서 불필요한 큰 이미지를 내려받지 않아도 됩니다.
HTML의 srcset 속성을 사용하면 브라우저가 화면 크기에 맞는 이미지를 자동으로 선택합니다.
<img src="image-800.webp" srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w" sizes="(max-width: 600px) 400px, 800px" alt="설명">
이렇게 설정하면 모바일 사용자는 400px 이미지를, 데스크톱 사용자는 800px 이미지를 내려받습니다.
워드프레스는 이미지를 업로드할 때 여러 크기를 자동으로 생성하고 srcset을 자동으로 추가해줍니다.
7. 이미지 CDN 활용하기
이미지 CDN은 이미지를 자동으로 최적화하고 전 세계에 분산 제공하는 서비스입니다.
Cloudflare Images: 이미지 저장, 리사이징, 최적화를 자동으로 처리합니다.
Cloudinary: 무료 플랜이 있으며 URL 파라미터로 실시간 이미지 변환이 가능합니다. 예를 들어 URL에 /w_800,f_webp/ 같은 파라미터를 추가하면 자동으로 리사이징과 WebP 변환이 이루어집니다.
imgix: 강력한 이미지 처리 기능을 제공하지만 유료입니다.
이미지 CDN을 사용하면 원본 이미지만 저장하고 나머지 최적화는 CDN이 알아서 처리하므로 관리가 편리합니다.
8. 정리 및 다음 단계
오늘 배운 핵심을 정리합니다.
- 이미지는 웹 페이지 로딩 속도에 가장 큰 영향을 주는 요소입니다.
- 새 이미지는 WebP 포맷을 기본으로 사용합니다.
- Squoosh나 TinyPNG로 업로드 전에 이미지를 압축합니다.
- 화면에 보이지 않는 이미지에는
loading="lazy"속성을 추가합니다. - srcset으로 화면 크기에 맞는 이미지를 제공합니다.
다음 글에서는 브라우저 캐시를 설정해 재방문자 로딩 속도를 극적으로 높이는 방법을 알아보겠습니다.