웹사이트 이미지를 더 빨리 로딩되게 하는 방법
어떤 웹사이트에서든 이미지 용량을 줄여 주는 다섯 가지 변화, 효과가 큰 순서대로.
대부분의 웹사이트에서 방문자가 다운로드하는 것의 대부분은 이미지예요. 최적화하지 않은 휴대폰 사진 한 장이 페이지의 나머지 전부를 합친 것보다 무거울 수 있어요. 이미지를 손보는 것은 보통 가장 효과가 크고 돈도 안 드는 속도 개선 방법이고, 빠른 페이지는 검색 순위가 더 높고, 방문자가 더 오래 머물고, 전환율도 더 높아요.
1. 표시되는 크기로 이미지를 올리세요
휴대폰에서 바로 가져온 사진은 폭이 4000픽셀 이상이에요. 웹사이트의 본문 영역은 1200픽셀보다 넓은 경우가 드물고, 카드나 썸네일은 훨씬 작아요. 남는 픽셀은 모두 다운로드된 뒤 브라우저가 버려요. 업로드 전에 크기를 조정하세요. 전체 폭 배너는 고밀도 화면에서도 선명하도록 폭 약 2000픽셀, 본문 이미지는 1200~1600, 카드는 600~800이 적당해요. 크기 조정 도구로 폴더 전체를 한 번에 처리할 수 있어요.
2. 압축하세요
크기를 제대로 맞췄다면 나머지는 압축이 해결해요. 품질 80으로 저장한 사진은 웹페이지에서 품질 100과 똑같아 보이고, 크기는 3분의 1 정도인 경우가 많아요. 이미지 압축 도구는 여러 장을 한 번에 처리하고 파일마다 줄어든 용량을 보여 줘요.
3. WebP를 쓰세요
WebP는 모든 최신 브라우저가 지원하고, 눈으로 보기에 같은 품질에서 보통 JPG보다 25~35% 작아요. 투명 배경도 지원해서 많은 PNG도 대신할 수 있어요. JPG를 WebP로나 PNG를 WebP로로 변환하세요. AVIF는 더 작지만 인코딩이 느리고 업로드 시스템의 지원이 덜 보편적이라서, 실제로는 WebP가 기본 선택이에요.
4. 내용에 맞는 형식을 고르세요
| 내용 | 가장 좋은 형식 |
|---|---|
| 사진 | WebP, WebP를 받지 않는 곳에는 JPG |
| 로고와 아이콘 | SVG가 있다면 SVG, 없다면 PNG나 WebP |
| 글자가 있는 스크린샷 | PNG 또는 무손실 WebP |
| 단순한 애니메이션 | GIF 대신 짧은 동영상 |
5. 브라우저가 똑똑하게 불러오도록 도와주세요
- 지연 로딩. 첫 화면 아래에 있는 이미지는 방문자가 그 근처까지 스크롤했을 때만 불러와야 해요. 대부분의 플랫폼은 자동으로 해 주고, 일반 HTML에서는 처음에 보이지 않는 img 태그에 loading="lazy"를 추가하세요.
- 크기 지정. 모든 이미지에 폭과 높이를 지정해서 이미지가 불러와질 때 페이지가 들썩이지 않게 하세요. 레이아웃 이동은 Google의 Core Web Vitals 항목 중 하나예요.
- 메인 이미지 먼저. 페이지 맨 위의 큰 이미지, 보통 Largest Contentful Paint로 계산되는 이미지는 절대 지연 로딩하면 안 돼요. 최대한 빨리 불러와야 해요.
얼마나 달라질까
휴대폰에서 바로 가져온 사진 열 장이 있는 일반적인 페이지는 30 MB쯤 될 수 있어요. 적당한 폭으로 크기를 조정하고 압축하면 같은 페이지가 보통 2 MB 정도가 돼요. WebP로 변환하면 1.4 MB에 가까워져요. 모바일 환경에서는 1초 만에 뜨는 페이지와, 많은 방문자가 기다리다 떠나는 페이지의 차이예요.
결과 확인하기
Google PageSpeed Insights와 Chrome 개발자 도구의 Lighthouse 패널은 모두 너무 큰 이미지, WebP로 바꿔야 할 이미지, Largest Contentful Paint 요소를 알려 줘요. 작업 전후로 실행해 보고, 방문자가 가장 많은 페이지부터 집중하세요.