이미지 최적화 웹사이트 속도 개선 완벽 가이드 - WebP 변환부터 지연 로딩까지
이미지 용량만 줄여도 로딩 속도가 크게 달라집니다. WebP 포맷 변환, 무손실 압축, 지연 로딩까지 코딩 지식 없이 따라 할 수 있는 이미지 최적화 방법을 단계별로 정리했습니다.
웹사이트를 열었는데 이미지가 한 장씩 뚝뚝 끊기며 뜨는 경험, 다들 있으실 겁니다. 만드는 입장에서는 고화질 이미지를 그대로 올리고 싶지만, 방문자는 몇 초만 늦어도 뒤로 가기를 누릅니다. 구글 조사에 따르면 모바일 페이지 로딩이 3초를 넘으면 방문자의 절반 이상이 이탈합니다. 그리고 로딩 지연의 가장 큰 원인은 대부분 이미지입니다. 이미지 최적화 웹사이트 속도 개선은 서버 업그레이드보다 먼저 해야 할, 비용 대비 효과가 가장 확실한 작업입니다.
이미지가 웹사이트 속도를 좌우하는 이유
웹 성능 통계 사이트인 HTTP Archive 자료를 보면, 일반적인 웹페이지에서 이미지는 전체 전송 용량 중 가장 큰 비중을 차지하는 리소스입니다. HTML, CSS, 자바스크립트를 모두 합친 것보다 이미지가 더 무거운 경우가 흔합니다.
이미지가 무거우면 다음 세 가지 문제가 연쇄적으로 발생합니다.
- LCP 악화: 구글 코어 웹 바이탈 지표 중 하나인 LCP(최대 콘텐츠 표시 시간)는 2.5초 이내가 권장 기준인데, 대부분의 페이지에서 LCP 요소는 대표 이미지입니다.
- 이탈률 증가: 로딩이 느릴수록 방문자가 콘텐츠를 보기 전에 떠날 확률이 높아집니다.
- 검색 순위 불이익: 구글은 페이지 경험을 순위 산정에 반영하므로, 느린 사이트는 SEO에서도 손해를 봅니다.
즉 이미지 최적화는 단순히 속도 문제가 아니라 방문자 유지와 검색 노출까지 걸린 문제입니다.
이미지 포맷 선택 - JPEG, PNG, WebP, AVIF 비교
최적화의 첫 단추는 포맷 선택입니다. 같은 사진이라도 어떤 포맷으로 저장하느냐에 따라 용량이 몇 배씩 차이 납니다.
| 포맷 | 특징 | 적합한 용도 | 용량 수준 |
|---|---|---|---|
| JPEG | 손실 압축, 투명도 미지원 | 사진, 배경 이미지 | 보통 |
| PNG | 무손실 압축, 투명도 지원 | 로고, 스크린샷, 아이콘 | 큼 |
| WebP | 손실/무손실 모두 지원, 투명도 지원 | 웹용 이미지 전반 | JPEG 대비 약 25~34% 작음 |
| AVIF | 차세대 포맷, 높은 압축 효율 | 고품질 사진 | WebP보다 더 작은 경우 많음 |
구글이 공개한 비교 연구 기준으로 WebP는 동일 품질의 JPEG보다 약 25~34% 용량이 작습니다. AVIF는 그보다도 압축 효율이 높지만 인코딩 속도가 느린 편이라, 실무에서는 WebP를 기본으로 쓰고 여유가 되면 AVIF를 추가하는 방식이 무난합니다.
압축과 리사이징 실전 방법
표시 크기에 맞게 리사이징부터
가장 흔한 실수는 카메라나 디자인 툴에서 나온 원본을 그대로 올리는 것입니다. 실제 화면에는 800px 폭으로 표시되는 이미지를 4000px 원본으로 올리면, 방문자는 필요 용량의 수십 배를 내려받게 됩니다. 콘텐츠 본문 이미지는 보통 가로 1200~1600px이면 충분합니다.
압축 도구 활용
리사이징 후에는 압축을 거칩니다. 설치 없이 브라우저에서 쓸 수 있는 무료 도구만으로도 충분합니다.
- Squoosh: 구글이 만든 무료 웹 도구로, 압축 전후를 실시간으로 비교하면서 품질을 조절할 수 있습니다.
- TinyPNG: PNG와 JPEG, WebP를 자동으로 압축해 주며 여러 장을 한 번에 처리할 수 있습니다.
- 워드프레스 플러그인: 워드프레스 사용자는 업로드 시 자동 압축과 WebP 변환을 처리하는 최적화 플러그인을 쓰면 손이 덜 갑니다.
압축 품질은 JPEG나 WebP 기준 75~85 사이에서 시작해 눈으로 확인하며 조절하는 것을 권합니다. 이 구간에서는 화질 저하를 체감하기 어려우면서 용량은 크게 줄어듭니다.
이미지 최적화의 핵심은 화질을 포기하는 것이 아니라, 사람 눈이 구분하지 못하는 데이터를 걷어내는 것입니다. 원본 보존용 파일과 웹 게시용 파일을 분리해서 관리하면 화질 걱정 없이 과감하게 압축할 수 있습니다.
작업 효과는 절감률로 확인하면 직관적입니다. 예를 들어 2.4MB였던 이미지가 720KB가 됐다면 70% 줄어든 것입니다. 이미지가 수십 장이라면 파일 크기 절감률을 일일이 암산하기 번거로운데, 이럴 때는 퍼센트 계산기로 압축 전후 용량을 넣어 확인하면 페이지별 개선 폭을 빠르게 정리할 수 있습니다.
지연 로딩과 반응형 이미지 적용
지연 로딩(Lazy Loading)
지연 로딩은 화면에 보이지 않는 이미지를 스크롤로 접근할 때까지 불러오지 않는 기법입니다. 별도 라이브러리 없이 HTML 속성 하나로 적용됩니다.
<img src="photo.webp" loading="lazy" alt="설명">
첫 화면에 이미지가 20장 있는 페이지라도, 지연 로딩을 적용하면 처음에는 화면에 보이는 몇 장만 내려받으므로 초기 로딩이 크게 빨라집니다. 단, 첫 화면 상단의 대표 이미지에는 지연 로딩을 걸면 안 됩니다. LCP가 오히려 늦어지기 때문입니다.
반응형 이미지(srcset)
모바일 방문자에게 데스크톱용 대형 이미지를 보낼 이유가 없습니다. srcset 속성을 사용하면 브라우저가 화면 크기에 맞는 이미지를 골라서 내려받습니다. 방문자의 상당수가 모바일이라는 점을 생각하면 체감 효과가 큰 설정입니다.
최적화 효과 측정하고 유지하기
최적화는 한 번 하고 끝나는 작업이 아닙니다. 새 글과 새 이미지가 계속 올라오기 때문에 측정 습관이 중요합니다.
- PageSpeed Insights: URL만 입력하면 모바일과 데스크톱 점수, 이미지 관련 개선 항목을 무료로 알려줍니다.
- Lighthouse: 크롬 개발자 도구에 내장되어 있어 배포 전 로컬에서도 점검할 수 있습니다.
- 서치 콘솔 코어 웹 바이탈 보고서: 실제 방문자 데이터 기준으로 LCP 추이를 확인할 수 있습니다.
측정 결과에서 "차세대 형식으로 이미지 제공", "적절한 크기의 이미지" 항목이 사라졌다면 제대로 하고 있는 것입니다.
지금 바로 할 수 있는 액션 두 가지를 제안합니다. 첫째, PageSpeed Insights에 내 사이트 주소를 넣어 이미지 관련 감점 항목이 있는지 확인하세요. 둘째, 가장 트래픽이 많은 페이지의 대표 이미지 하나를 WebP로 변환해 용량이 몇 퍼센트 줄어드는지 직접 비교해 보세요. 이 두 가지만 해 봐도 내 사이트에서 이미지 최적화가 웹사이트 속도에 얼마나 큰 영향을 주는지 체감할 수 있습니다.
