느린 페이지를 열어보면 십중팔구 범인은 이미지입니다. 글은 가볍습니다. 무거운 건 최적화 안 된 사진들입니다. 이 가이드에서는 이미지가 왜 속도를 잡아먹는지, 무엇을 어떤 순서로 최적화하는지, 그리고 실제로 어떤 결과가 나오는지를 정리합니다.
왜 이미지가 문제인가
요즘 페이지 용량의 절반 이상이 이미지인 경우가 흔합니다. 특히 첫 화면에 뜨는 큰 이미지(히어로)는 LCP — 가장 큰 콘텐츠가 그려지는 시간 — 점수에 직접 영향을 줍니다. 이 한 장이 2MB면, 코드를 아무리 정리해도 첫 화면이 늦습니다. 모바일·느린 네트워크에서는 그 차이가 더 벌어집니다.
1. 포맷: WebP·AVIF로 바꾼다
같은 사진이라도 포맷에 따라 용량이 크게 다릅니다. JPG·PNG 대신 WebP를 쓰면 화질을 유지하면서 용량이 25~35% 줄어드는 경우가 많고, AVIF는 더 줄어듭니다. 브라우저 호환을 위해 WebP를 기본으로 하고, 필요하면 폴백을 둡니다.
2. 크기: 표시 크기에 맞춘다
가장 흔한 낭비는 "원본 그대로 업로드"입니다. 화면에 800px로 보이는 자리에 4000px 원본을 넣으면, 브라우저가 그 큰 파일을 받아 줄여서 보여줍니다. 받는 데 든 시간은 그대로 낭비입니다.
- 실제 표시 크기에 맞춰 리사이즈합니다.
- 화면 너비별로 다른 크기를 제공(srcset)하면 모바일은 작은 파일을 받습니다.
- 썸네일·목록 이미지는 특히 작게 만듭니다.
3. 지연 로딩(lazy-loading)
첫 화면에 보이지 않는 이미지를 처음부터 다 받을 필요는 없습니다. loading="lazy" 를 주면 스크롤해서 가까워질 때 불러옵니다. 첫 로딩이 가벼워지고, 끝까지 안 내려가는 방문자에게는 아예 안 받게 됩니다. 단, 첫 화면 히어로 이미지에는 lazy 를 걸지 않습니다(오히려 늦어짐).
4. 히어로 이미지 다루기
첫 화면 큰 이미지는 가장 신경 써야 할 한 장입니다. 폭을 화면에 맞게 줄이고, 품질을 80~85 수준으로 압축하면 선명하면서도 가볍습니다. 가능하면 우선 로딩(priority)으로 지정해 가장 먼저 그려지게 합니다. 배경으로 쓸 때도 CSS로 적절한 크기를 지정합니다.
5. 레이아웃 흔들림(CLS) 방지
이미지에 너비·높이(또는 aspect-ratio)를 지정하지 않으면, 이미지가 늦게 로드되며 아래 콘텐츠가 출렁입니다. 이 레이아웃 이동(CLS)도 점수를 깎고 사용자를 짜증나게 합니다. 이미지 자리를 미리 잡아두면 출렁임이 사라집니다.
실제 결과
한 쇼핑 페이지는 이미지 정리(WebP 변환 + 리사이즈 + 지연 로딩)만으로 로딩이 4초대에서 2초 아래로 들어왔습니다. 코드는 한 줄도 안 건드렸습니다. 비용 대비 효과로 보면 이미지 최적화가 거의 항상 1순위입니다.
점검 체크리스트
- 주요 이미지가 WebP(또는 AVIF)인가.
- 표시 크기에 맞게 리사이즈됐는가(원본 그대로 X).
- 화면 밖 이미지에 lazy-loading 적용.
- 히어로는 우선 로딩 + 적정 압축.
- 이미지에 크기 지정으로 레이아웃 흔들림 방지.
CDN으로 이미지를 더 빠르게
이미지를 최적화했다면, 전달 경로도 줄일 수 있습니다. CDN은 이미지를 사용자 가까운 엣지에서 내보내 거리를 줄이고, 많은 CDN이 실시간으로 WebP 변환·리사이즈까지 해 줍니다. 트래픽이 많거나 방문자 지역이 넓다면, CDN만으로도 이미지 로딩이 눈에 띄게 빨라집니다.
아이콘·로고는 SVG로
로고·아이콘·단순 그래픽은 사진이 아니라 SVG(벡터)로 두는 것이 좋습니다. 용량이 작고, 어떤 화면에서도 선명하며, 색·크기를 코드로 조절할 수 있습니다. 사진은 JPG/WebP, 도형·아이콘은 SVG — 이 구분만 지켜도 불필요한 용량이 크게 줄어듭니다.
업로드 단계에서 자동화
최적화를 매번 손으로 하면 언젠가 빠집니다. 가장 좋은 방법은 "올리는 순간 자동으로 줄어드는" 구조입니다.
- 업로드 시 자동 리사이즈·압축·WebP 변환.
- 화면 위치에 맞는 크기를 자동 제공(반응형 이미지).
- 지연 로딩·크기 지정이 기본값으로 적용.
정기 점검 루틴
운영하다 보면 무거운 이미지가 슬그머니 다시 쌓입니다. 한 달에 한 번 정도 PageSpeed 로 주요 페이지를 점검하고, 새로 올라온 큰 이미지가 있는지 확인하는 습관을 들이면, 어렵게 잡은 속도를 오래 유지할 수 있습니다.
이미지 외의 무거운 자원
이미지를 잡았다면 다음 후보도 봅니다.
- 동영상: 자체 호스팅보다 전용 플랫폼 임베드가 가볍습니다. 자동재생 대용량 배경 영상은 신중히.
- 웹폰트: 글꼴을 여러 개·여러 굵기 불러오면 무겁습니다. 꼭 필요한 굵기만, 가능하면 시스템 폰트 폴백과 함께.
- 외부 스크립트: 채팅·광고·분석 스크립트가 쌓이면 느려집니다. 정말 쓰는 것만 남깁니다.
측정 지표 읽는 법
속도 점수를 볼 때 숫자의 의미를 알아야 제대로 고칩니다.
- LCP: 첫 화면 큰 요소가 그려지는 시간 — 보통 히어로 이미지·대형 텍스트.
- INP: 클릭·입력에 화면이 반응하는 속도 — 무거운 스크립트가 주범.
- CLS: 로딩 중 레이아웃이 출렁이는 정도 — 크기 미지정 이미지·광고가 원인.
각 지표가 가리키는 원인이 다르므로, 점수만 보지 말고 "어떤 지표가 나쁜지"를 보고 그에 맞는 처방을 해야 합니다.
한 줄 요약
속도 최적화에서 가장 비용 대비 효과가 큰 작업은 거의 항상 이미지입니다. WebP로 바꾸고, 표시 크기에 맞게 줄이고, 화면 밖 이미지는 지연 로딩하고, 첫 화면 히어로만 우선 로딩으로 따로 챙기면 됩니다. 코드 한 줄 안 건드려도 로딩이 절반으로 줄어드는 경우가 흔합니다. 그리고 한 번 잡은 속도가 새지 않도록, 한 달에 한 번 주요 페이지를 점검하는 습관을 들이세요.
성능 예산이라는 개념
"이 페이지는 1.5MB·로딩 2초를 넘기지 않는다" 같은 기준을 미리 정해두는 것을 성능 예산이라고 합니다. 기준이 있으면, 새 이미지·스크립트를 추가할 때 "이걸 넣으면 예산을 넘는가"를 따지게 되어, 사이트가 시간이 지나며 무거워지는 것을 막습니다. 거창할 필요 없이 "주요 페이지 2초 이내, 히어로 이미지 400KB 이하" 정도의 간단한 기준만 정해도 효과가 큽니다.
넥서스아이 빌더는 업로드 이미지를 자동으로 리사이즈·압축하고 적절한 로딩 속성을 적용합니다. 매번 손으로 줄이기 번거롭다면, 자동 최적화되는 환경이 운영을 훨씬 편하게 해줍니다.
