웹사이트 이미지를 압축해야 하는 이유 | Bulk Image Compressor
웹사이트 로딩에 몇 초 이상 걸리면 사람들은 떠납니다. 이것은 의견이 아닙니다. Google의 자체 연구에 따르면 페이지 로드가 1초에서 3초로 증가하면 이탈률이 32% 증가합니다. 그리고 페이지가 느리게 로드되는 가장 큰 이유는 거의 항상 이미지입니다.
대부분의 웹사이트는 필요한 것보다 훨씬 더 큰 이미지를 제공합니다. 카메라나 스톡 사진 사이트에서 바로 가져온 단일 히어로 이미지는 쉽게 5MB 이상이 될 수 있습니다. 괜찮은 광대역 연결에서도 해당 파일 하나만 로드하는 데 몇 초가 걸립니다. 모바일 3G 연결에서는 하나의 이미지에 약 15초가 소요됩니다. 이제 그런 이미지가 5~6개 있는 페이지를 상상해보세요.
실제로 이미지가 얼마나 큰가요?
빠른 현실 확인입니다. 브라우저의 개발자 도구(F12)를 열고 Network 탭으로 이동한 후 페이지를 새로고침하고 “Img”로 필터링하세요. 크기를 살펴보세요. 아마 1MB가 넘는 이미지가 적어도 몇 개 있을 것입니다.
참고로, 일반적인 압축되지 않은 이미지는 다음과 같습니다:
- 히어로 배너로 사용된 DSLR 사진: 4~8MB
- 스마트폰에서 촬영한 제품 사진: 2~5MB
- 전체 해상도로 다운로드한 스톡 사진: 3~10MB
- PNG로 저장된 인포그래픽 또는 일러스트레이션: 1~4MB
적절한 압축 후 동일한 이미지를 품질 손실 없이 100KB~300KB로 만들 수 있습니다. 이는 90% 이상의 파일 크기 감소입니다.
페이지 속도와 Core Web Vitals
Google은 Core Web Vitals를 순위 신호로 사용하며, 이미지는 세 가지 지표 중 두 가지에 직접적인 영향을 미칩니다.
**LCP(Largest Contentful Paint)**는 가장 큰 가시 요소가 로드되는 데 걸리는 시간을 측정합니다. 대부분의 페이지에서 가장 큰 요소는 이미지입니다. 히어로 이미지가 5MB라면 LCP가 매우 나쁠 것입니다. Google은 2.5초 이상을 낮은 LCP 점수로 간주합니다. 압축된 이미지는 일반적으로 LCP를 해당 임계값 미만으로 유지합니다.
**CLS(Cumulative Layout Shift)**는 시각적 안정성을 측정합니다. 크기가 정의되지 않은 이미지는 로드될 때 레이아웃 시프트를 유발합니다. 이는 HTML 속성에 더 관련이 있지만, 느리게 로드되는 oversized 이미지는 브라우저가 최종 이미지 크기와 일치하지 않을 수 있는 자리 표시자 공간 주위로 콘텐츠를 렌더링하기 때문에 문제를 악화시킵니다.
Google PageSpeed Insights에서 현재 점수를 확인할 수 있습니다. 홈페이지와 몇 가지 내부 페이지를 실행해보세요. 성능 점수가 90 미만이면 이미지가 문제의 큰 부분일 가능성이 높습니다.
SEO 연결
페이지 속도는 확인된 Google 순위 요소입니다. 데스크톱의 경우 2010년부터, 모바일의 경우 2018년부터였습니다. 2021년 Core Web Vitals 도입으로 더욱 직접적이 되었습니다.
하지만 영향은 속도 신호 그 이상입니다. 느린 페이지는 Googlebot이 덜 자주 크롤링합니다. Google은 각 사이트에 “크롤링 예산”을 할당하며, 페이지가 느리면 봇이 더 많은 콘텐츠를 인덱싱하는 대신 응답을 기다리며 예산을 소비합니다. 수백 또는 수천 개의 페이지가 있는 대규모 사이트에서는 이것이 매우 중요합니다.
사용자 행동을 통한 간접적인 영향도 있습니다. 사람들이 느린 페이지에서 이탈하면 Google이 이를 인지합니다. 높은 이탈률과 낮은 페이지 체류 시간은 시간이 지남에 따라 순위에 영향을 줄 수 있는 부정적인 참여 신호를 보냅니다.
사용자 경험과 이탈률
사람들은 온라인에서 참을성이 없습니다. Portent의 연구에 따르면 로드 시간이 1초 추가될 때마다 전환율이 평균 4.42% 감소합니다. 이커머스 사이트가 2초 대신 5초 만에 로드된다면 의미 있는 비율의 매출을 잃을 수 있습니다.
모바일 사용자는 훨씬 더 참을성이 없습니다. 모든 웹 트래픽의 절반 이상이 모바일 기기에서 발생하며, 모바일 연결은 일반적으로 데스크톱보다 느립니다. 이미지는 셀룰러 네트워크를 사용하는 휴대폰에서 빠르게 로드될 수 있을 만큼 작아야 합니다.
인식 요소도 있습니다. 빠른 사이트는 더 전문적이고 신뢰할 수 있어 보입니다. 느린 사이트는 모든 것이 결국 로드되더라도 고장난 것처럼 느껴집니다. 첫인상은 밀리초 안에 형성됩니다.
대역폭 비용이 누적됩니다
공유 호스팅이나 기본 요금제를 사용 중이라면 대역폭에 대해 생각하지 않을 수 있습니다. 하지만 실제 트래픽이 있는 사이트의 경우 대역폭은 비용이 듭니다.
계산을 해보겠습니다. 평균 페이지에 3MB의 이미지가 있고 월 100,000 페이지뷰가 있다고 가정해보세요. 이는 월 300GB의 이미지 데이터 전송입니다. 압축 후 동일한 페이지에 400KB의 이미지가 있어 전송량이 40GB로 줄어듭니다. 이는 호스팅 비용과 CDN 요금의 상당한 감소입니다.
트래픽이 많은 사이트, 미디어 회사 또는 대규모 제품 카탈로그가 있는 이커머스 스토어의 경우 이 차이로 월 수백 또는 수천 달러를 절약할 수 있습니다.
웹사이트 이미지를 배치 압축하는 방법
Photoshop이나 GIMP에서 이미지를 하나씩 압축할 수 있지만, 수십 또는 수백 개의 이미지가 있다면 실용적이지 않습니다. 배치 압축이 방법입니다.
Bulk Image Compressor를 사용하면 모든 웹사이트 이미지를 한 번에 드래그하여 함께 압축할 수 있습니다. 실용적인 워크플로우는 다음과 같습니다:
-
현재 이미지를 내보내세요. 이미 사이트에 있다면 다운로드하세요. 새 사이트를 구축 중이라면 사용할 모든 이미지를 모으세요.
-
포맷을 선택하세요. 사진의 경우 JPEG 또는 WebP가 가장 좋습니다. 투명도가 있는 그래픽의 경우 PNG 또는 WebP를 사용하세요. 어떤 포맷을 선택해야 할지 모르겠다면 웹 성능을 위한 이미지 포맷 가이드를 확인하세요.
-
품질 수준을 설정하세요. 대부분의 웹사이트 이미지에서 75~85%의 품질 설정이 파일 크기와 시각적 품질 사이의 좋은 균형을 제공합니다. 썸네일이나 배경 이미지의 경우 더 낮출 수 있습니다. 이 트레이드오프에 대한 자세한 내용은 품질 저하 없이 파일 크기 줄이기 기사를 참조하세요.
-
압축하고 다운로드하세요. 도구가 브라우저에서 모든 것을 처리하므로 이미지가 컴퓨터를 떠나지 않습니다. 서버의 원본을 압축된 버전으로 교체하세요.
-
크기도 설정하세요. 800px 너비인 컨테이너에 4000px 너비의 이미지를 제공하지 마세요. 압축 전이나 압축 중에 이미지를 표시 크기에 맞게 조정하세요. 이것만으로도 파일 크기를 극적으로 줄일 수 있습니다.
빠른 전후 비교 예시
일반적인 웹사이트에서 압축이 실제로 어떻게 보이는지 보여드립니다:
| 이미지 | 전 | 후 | 절감 |
|---|---|---|---|
| 히어로 배너 (JPEG) | 4.2MB | 210KB | 95% |
| 팀 사진 (JPEG) | 3.1MB | 185KB | 94% |
| 로고 (PNG) | 890KB | 95KB | 89% |
| 블로그 썸네일 (JPEG) | 1.8MB | 120KB | 93% |
| 합계 | 10MB | 610KB | 94% |
이것이 1초에 로드되는 페이지와 8초에 로드되는 페이지의 차이입니다.
새 콘텐츠도 잊지 마세요
기존 이미지를 압축하는 것은 일회성 수정이지만, 지속적인 콘텐츠를 위한 프로세스도 필요합니다. 귀하나 팀이 새 블로그 게시물, 제품 페이지 또는 랜딩 페이지를 추가할 때마다 해당 이미지를 라이브 전에 압축해야 합니다.
이미지 압축을 콘텐츠 게시 워크플로우의 일부로 만드세요. 몇 분이 걸리며 사이트 속도와 SEO에 미치는 영향은 실질적이고 측정 가능합니다.
웹사이트의 이미지는 아마도 할 수 있는 가장 큰 성능 개선일 것입니다. 도구는 무료이고, 과정은 빠르며, 결과는 페이지 속도 점수에 즉시 나타납니다.
Ready to compress your images?
Bulk compress JPEG, PNG, WebP, and AVIF images right in your browser. No uploads, no sign-ups.
Try Bulk Image Compressor