대부분의 웹사이트에서 이미지는 페이지에서 가장 무거운 단일 요소이며, HTML, CSS, JavaScript를 합친 것보다 클 때가 많다. 페이지가 느리게 느껴진다면 가장 먼저 살펴볼 곳이 이미지이고, 해결책은 대개 빠르다.
세 가지 기법이 거의 모든 일을 해낸다. 실제로 보여지는 크기로 리사이즈하고, 압축하고, 최신 포맷으로 제공하는 것이다. 이 셋을 함께 적용하면 이미지 용량을 흔히 70% 이상 줄인다.
실제로 표시되는 크기로 리사이즈하기
가장 흔하고 가장 낭비가 심한 실수다. 카메라에서 막 나온 사진은 가로 6000픽셀일 수 있지만, 글의 본문은 그것을 800픽셀 너비의 칼럼에 표시한다. 브라우저는 6000픽셀을 모두 내려받은 뒤, 이미지를 맞추려고 줄이면서 대부분을 버린다.
800픽셀 자리에 6000픽셀 이미지를 제공하면 필요한 것보다 5배에서 10배 많은 데이터를 내려받게 된다. 해결책은 간단하다. 이미지가 차지할 너비에 맞게, 고밀도 화면을 위한 약간의 여유를 더해 파일을 리사이즈하면 된다.
실용적인 기준:
- 전체 너비 히어로 이미지: 가로 1600~2000px면 충분하다.
- 본문 내 이미지: 1000~1400px.
- 썸네일: 300~500px.
이미지 리사이저로 각 이미지를 페이지에 도달하기 전에 줄여라. 가로세로 비율을 고정해 두어 아무것도 늘어나지 않는다.
압축으로 군더더기 걷어내기
치수를 맞추고 나면 압축이 눈에 보이지 않는 세부를 제거한다. 사진의 경우 품질 75~85% 정도가 최적점이다. 파일은 크게 줄어드는데 그림은 그대로 보인다. PNG로 저장한 단색 그래픽과 스크린샷은 색상 수 감소(256색으로 양자화)를 통해 원본의 일부 크기로 줄일 수 있다.
이미지 압축기가 둘 다 처리한다. 품질에 따라 JPEG와 WebP를 재인코딩하고, PNG를 양자화하며, 시작한 것보다 큰 파일은 절대 만들지 않도록 보장한다. 갤러리 전체를 다룬다면 일괄 처리로 돌린 뒤 ZIP으로 내려받아라.
최신 포맷으로 전환하기
포맷 선택만으로도 파일을 절반으로 줄일 수 있다. 사진을 기준으로 흔한 선택지를 비교해 보자.
| 포맷 | JPEG 대비 일반적 크기 | 적합한 용도 |
|---|---|---|
| JPEG | 기준 | 범용 대체 포맷; 사진 |
| WebP | 약 25~35% 작음 | 사진과 그래픽; 폭넓은 브라우저 지원 |
| AVIF | 약 50% 작음 | 크기가 가장 중요한 사진 |
| PNG | 사진에는 훨씬 큼 | 로고, 아이콘, 단색 그래픽, 투명도 |
WebP는 2026년의 안전한 기본값이다. 현행 브라우저는 모두 읽을 수 있고 JPEG를 여유 있게 앞선다. AVIF는 더 작지만 인코딩이 오래 걸리고 지원 범위가 조금 좁다. 이미지 변환기는 AVIF를 목표로 삼되 AVIF가 적합하지 않을 때 조용히 WebP로 대체하므로, 추측 없이 가용한 최선의 결과를 얻는다.
한 가지 주의: 사진에 PNG를 쓰지 마라. PNG는 로고, 아이콘, 투명도가 필요한 것에는 빛나지만, 사진에서는 같은 품질의 WebP보다 몇 배 클 수 있다.
하나로 엮기
웹으로 향하는 모든 이미지에 믿을 만한 파이프라인:
- 표시 너비에 맞게(레티나 화면을 위한 여유 포함) 리사이즈한다.
- WebP로, 혹은 가능한 한 작은 파일을 원하면 AVIF로 변환한다.
- 75~85% 품질로 압축해 마지막 군더더기를 깎아낸다.
이렇게 하면 5MB짜리 카메라 사진이 본문 칼럼에서는 똑같아 보이는 120KB WebP가 될 수 있다. 페이지 전체에 곱하면 로딩 시간의 차이는 극적이다.
모든 처리는 Canvas와 WebAssembly로 브라우저에서 이뤄지므로 아무것도 업로드되지 않고, 첫 방문 이후에는 오프라인에서도 계속 작동한다. 즉, 어떤 서버에도 넘기지 않고 사이트용 이미지 폴더를 준비할 수 있다.
파일 너머
두 가지 습관이 더 도움이 되고, 비용은 들지 않는다:
- 스크롤 아래 이미지는 지연 로드한다.
loading="lazy"를 써서 독자가 근처로 스크롤할 때만 브라우저가 가져오게 한다. - width와 height 속성을 지정해 이미지가 로드되는 동안 레이아웃이 튀지 않게 한다. Core Web Vitals 점수에도 도움이 된다.
어떤 이미지가 페이지를 무겁게 하는지 정확히 알고 싶은가? 이미지 SEO 가이드가 점검 방법을 다루고, 페이지 속도 검사는 가장 무거운 자산을 나열해 어디를 먼저 겨냥할지 알려준다.