웹사이트 이미지 압축 방법 (속도 가이드)

웹사이트에 속도 문제가 있다. 범인은 거의 확실히 이미지다.

이미지는 대부분의 웹페이지 전체 무게의 절반 이상을 차지한다. 최적화되지 않은 사진 한 장이 HTML, CSS, JavaScript를 합친 것보다 클 수 있다. 이 추가 무게가 페이지 로딩을 늦추고, 방문자를 좌절시키고, 검색 순위를 해친다.

좋은 소식? 이미지 압축은 빠르고 쉬우며 결과가 극적이다. 이 가이드는 웹을 위한 이미지 압축 방법을 정확히 알려준다. 올바른 설정, 올바른 포맷, 눈에 보이는 품질 손실 없이 가장 작은 파일을 만드는 올바른 워크플로우.

압축하지 않은 이미지가 왜 웹사이트를 느리게 하나?

누군가 페이지를 방문할 때마다 브라우저가 모든 이미지를 다운로드한다. 더 큰 파일은 더 오래 걸린다. 더 긴 다운로드는 더 느린 페이지를 의미한다.

몇 가지 전형적인 숫자를 보자. 카메라에서 바로 나온 사진은 5-8MB일 수 있다. 레티나 디스플레이 스크린샷은 2-3MB가 된다. Figma나 Canva 같은 디자인 도구에서 내보낸 이미지도 500KB에서 1MB인 경우가 많다.

이것을 페이지의 이미지 수로 곱하라. 최적화되지 않은 사진 5장이 있는 블로그 포스트는 이미지만 15-25MB가 될 수 있다. 모바일 네트워크에서 이것은 10초 이상 걸린다. 대부분의 방문자는 3초 후에 떠난다.

Google 데이터에 따르면 페이지 로딩 시간이 1초에서 3초로 늘면 이탈 확률이 32% 증가한다. 1초에서 5초면 90% 증가한다. 무거운 이미지가 페이지가 이 임계값을 넘는 주된 이유다.

압축이 이 문제를 해결한다. 잘 압축된 이미지는 원본과 거의 동일하게 보이지만 무게가 80-95% 줄어든다. 5MB 제품 사진이 150KB가 된다. 페이지가 8초 대신 2초에 로딩된다.

웹 이미지에 어떤 품질 설정을 사용해야 하나?

품질 슬라이더는 이미지 압축 시 가장 중요한 설정이다. 너무 높으면 파일이 여전히 크다. 너무 낮으면 보기 안 좋다. 적절한 균형점을 찾는 방법을 알아보자.

사진의 경우(제품 사진, 블로그 이미지, 배경), 75-85% 품질을 사용하라. 이 범위에서 JPEG와 WebP 파일은 원본보다 80-90% 작다. 품질 차이는 화면에서 대부분의 사람에게 보이지 않는다.

85%에서는 원본과 차이를 구분할 수 없다. 75%에서는 고디테일 영역에서 약간의 부드러움이 있을 수 있지만 거의 눈에 띄지 않는다. 60% 이하에서 아티팩트가 나타나기 시작한다. 가장자리 주변의 블록 패턴. 그라데이션의 색상 밴딩. 흐릿한 세부사항.

그래픽과 일러스트레이션의 경우(아이콘, 로고, 다이어그램), 손실 압축을 아예 사용하지 마라. 선명한 가장자리와 텍스트에는 PNG를 사용하라. 파일 크기가 중요하면 무손실 WebP로 변환하라. 무손실 WebP는 같은 PNG보다 보통 25% 작다.

스크린샷의 경우, PNG 또는 90% 이상 품질의 WebP를 사용하라. 스크린샷의 텍스트는 과도한 압축으로 흐릿해진다. 읽을 수 있는 텍스트가 포함되어 있으면 고품질을 유지하거나 무손실을 사용하라.

빠른 참고 표:

이미지 유형	포맷	품질	예상 크기
제품 사진	WebP 또는 JPEG	75-85%	50-200 KB
블로그 히어로 이미지	WebP 또는 JPEG	80-85%	100-200 KB
썸네일	WebP 또는 JPEG	70-80%	15-50 KB
로고/아이콘	PNG 또는 SVG	무손실	5-30 KB
스크린샷	PNG 또는 WebP	90-100%	100-400 KB

이 목표는 대부분의 웹사이트에 적용된다. 이미지당 200KB 이하, 가능하면 100KB 이하를 목표로 하라.

압축 전에 이미지를 리사이즈해야 하나?

그렇다. 항상. 리사이즈가 파일 크기를 가장 크게 줄이는데, 대부분의 사람이 이 단계를 건너뛴다.

왜 중요한지 보자. 현대 스마트폰 사진은 4000x3000 픽셀이다. 블로그에서는 800px 너비로 표시한다. 화면이 필요로 하는 것보다 15배 많은 픽셀을 보내고 있는 것이다. 모든 여분의 데이터가 다운로드된 후 버려진다.

이미지를 먼저 디스플레이 크기로 리사이즈하라. 그다음 압축하라. 결과가 극적이다.

5MB의 4000x3000 사진을 예로 들면:

1. 1200px 너비로 리사이즈 (대부분의 블로그에 적합): ~1MB로 줄어듬
2. WebP 80% 품질로 압축: ~100KB로 줄어듬
3. 메타데이터 제거: 20-30KB 추가 절약

최종 결과: 약 80KB. 원본 5MB에서 98% 감소.

레티나 화면에는 디스플레이 크기의 2배로 이미지를 제공하라. 블로그 칼럼이 600px 너비면 1200px로 리사이즈하라. 추가 픽셀이 고밀도 화면에서 이미지를 선명하게 보이게 하면서도 원본 4000px만큼 낭비하지 않는다.

반응형 이미지도 잊지 마라. srcset를 사용해서 화면 너비별로 다른 크기를 제공하라. 375px 화면의 모바일 사용자에게 1200px 이미지는 필요 없다.

<img
  src="/photo-800.webp"
  srcset="/photo-400.webp 400w, /photo-800.webp 800w, /photo-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  alt="제품 사진"
>

이것은 모든 기기에 적절한 크기의 이미지를 전달한다. 모바일 사용자는 더 작은 파일을 받는다. 데스크톱 사용자는 완전한 품질을 받는다. 모두 더 빠른 페이지를 받는다.

웹사이트 속도에 가장 좋은 이미지 포맷은?

포맷 선택이 파일 크기에 큰 영향을 미친다. 같은 사진도 다른 포맷으로 저장하면 50% 이상 차이날 수 있다.

WebP는 현재 웹 이미지에 가장 좋은 범용 선택이다. JPEG보다 25-35% 더 효율적으로 압축한다. 손실과 무손실 압축 모두 지원한다. 투명도도 처리한다. 그리고 97% 이상의 브라우저가 지원한다.

JPEG는 여전히 사진에 가장 널리 사용되는 포맷이다. 잘 압축되고 어디서든 동작한다. WebP로 전환할 준비가 안 됐다면 75-85% 품질의 JPEG도 여전히 좋은 선택이다.

PNG는 투명도나 픽셀 퍼펙트 정확도가 필요한 이미지에 가장 적합하다. 로고, 아이콘, 텍스트가 있는 스크린샷. 하지만 PNG 파일은 사진에서 동등한 JPEG보다 3-5배 크다. 사진에 PNG를 사용하지 마라.

AVIF는 현재 가장 좋은 압축비를 제공한다. JPEG보다 최대 50% 작다. 하지만 인코딩이 느리고 브라우저 지원이 아직 완전하지 않다. 기술 스택이 지원하면 테스트해볼 가치가 있다.

각 포맷이 어떻게 작동하는지 더 깊이 알고 싶다면, 이미지 압축 완벽 가이드를 확인하라. 손실 vs 무손실, 각 포맷을 언제 사용하는지, 흔한 실수를 피하는 방법을 다룬다.

이미지를 효율적으로 일괄 압축하는 방법은?

이미지를 하나씩 압축하는 것은 빠른 수정에는 괜찮다. 하지만 전체 웹사이트를 최적화한다면 더 빠른 워크플로우가 필요하다.

옵션 1: 온라인 일괄 압축 도구 사용. CompressIMG 같은 도구로 최대 20장의 이미지를 한 번에 업로드할 수 있다. 품질 설정하고, 압축하고, ZIP으로 다운로드하라. 설치할 소프트웨어 없음. 계정 필요 없음.

이것이 대부분의 사람에게 가장 빠른 옵션이다. 블로그 이미지를 업로드하고, 품질을 80%로 설정하고, 압축된 배치를 다운로드하라. 전체 과정이 1분도 안 걸린다.

옵션 2: 빌드 도구로 자동 압축. 개발자라면 빌드 파이프라인에 이미지 최적화를 추가하라. Next.js, Astro 등의 프레임워크에 내장된 이미지 최적화가 있다. 빌드 시 또는 요청 시 자동으로 리사이즈, 압축, 변환한다.

옵션 3: API로 자동화 워크플로우. 사이트가 사용자 업로드를 처리하거나 CMS에서 이미지를 가져온다면, 압축이 자동으로 이루어지기를 원할 것이다. 이미지 압축 API가 파일을 프로그래밍 방식으로 처리한다. 수동 단계 필요 없음.

옵션 4: 자동 최적화가 있는 CDN 사용. Cloudflare, Imgix, Cloudinary 같은 서비스가 이미지를 즉석에서 압축하고 리사이즈할 수 있다. 원본을 업로드하면 CDN이 방문자의 기기와 브라우저에 맞는 최적화 버전을 제공한다.

대부분의 콘텐츠 중심 웹사이트에는 옵션 1이면 충분하다. 이미지를 업로드하고, 압축하면 끝이다. 콘텐츠 업데이트가 잦은 대형 사이트에는 옵션 2-4가 프로세스를 자동화해서 시간을 절약한다.

TinyPNG, Squoosh, CompressIMG 비교에서 어떤 도구가 어떤 워크플로우에 맞는지 상세히 설명한다. 일괄 처리를 하는 것도 있고, 설정을 세밀하게 제어하는 것도 있다. 일하는 방식에 맞는 것을 고르면 된다.

각 이미지 유형별로 어떤 파일 크기를 목표로 해야 하나?

좋은 목표가 있으면 이미지가 언제 "완성"인지 알 수 있다. 현실적인 벤치마크를 보자:

히어로 이미지와 전체 너비 배너: 200KB 이하. 페이지에서 가장 큰 이미지이자 보통 LCP 요소다. 200KB 이하로 유지하면 Core Web Vitals 점수에 도움이 된다.

블로그 포스트 이미지: 100KB 이하. 텍스트 칼럼 안의 콘텐츠 이미지는 클 필요가 없다. 800-1200px 너비에 80% 품질이면 쉽게 이 목표에 도달한다.

제품 썸네일: 50KB 이하. 그리드나 캐러셀에 표시되는 작은 이미지. 디스플레이 크기(보통 300-400px)로 리사이즈하고 70-80%로 압축하라.

아이콘과 로고: 20KB 이하. 색상이 적은 단순한 그래픽. 가능하면 SVG를 사용하라. 아니면 PNG나 무손실 WebP를 사용하라.

페이지 이미지 총 무게: 초기 뷰포트 500KB 이하. 폴드 아래 lazy load된 이미지는 초기 로딩에 포함되지 않지만, 전송되는 총 데이터에는 영향을 준다.

Google PageSpeed Insights는 추가 최적화할 수 있는 이미지를 표시한다. 압축 후 테스트를 실행해서 아직 작업이 필요한 이미지가 있는지 확인하라. "차세대 형식으로 이미지 제공" 제안은 JPEG나 PNG에서 WebP 또는 AVIF로 전환해야 한다는 의미다.

이미지를 압축하면 품질이 떨어지나?

가장 흔한 걱정이다. 솔직한 답은: 기술적으로는 그렇다. 하지만 시각적으로는 아니다.

손실 압축은 데이터를 제거한다. 그렇게 파일을 작게 만든다. 하지만 현대 알고리즘은 무엇을 제거할지 똑똑하다. 눈에 보이지 않는 세부사항을 제거한다. 미세한 색상 변화. 서브픽셀 패턴. 컴퓨터에게는 의미 있지만 사람에게는 아닌 데이터.

80% 품질에서 압축된 JPEG나 WebP는 화면에서 원본과 시각적으로 동일하다. 차이를 발견하려면 400%로 확대해서 픽셀 단위로 비교해야 한다. 방문자는 절대 눈치채지 못한다.

아티팩트가 보이는 품질 수준은 이미지 내용에 따라 다르다. 부드러운 그라데이션 사진은 날카로운 가장자리와 텍스트가 있는 이미지보다 더 많은 압축을 견딘다. 그래서 권장 품질이 이미지 유형별로 다르다.

핵심 규칙: 항상 최고 품질의 원본 파일에서 시작하라. 이미 압축된 JPEG를 다시 압축하지 마라. 손실 압축을 반복할 때마다 품질이 더 떨어진다. 원본에서 한 번만 압축하면 품질이 훌륭하게 유지된다.

다운로드 전에 결과를 확인할 수 있는 비교 미리보기 도구를 사용하라. CompressIMG는 원본과 압축된 이미지를 드래그할 수 있는 슬라이더와 함께 보여준다. 차이가 보이면 품질을 올리라. 안 보이면 완성이다.

웹사이트를 빠르게 할 준비가 되었나?

이미지 압축은 웹사이트 로딩을 빠르게 하는 가장 빠른 방법이다. 몇 분이면 되고, 비용이 들지 않으며, 개선 효과를 측정할 수 있다.

가장 큰 이미지부터 시작하라. 히어로 배너, 제품 사진, 블로그 이미지. 디스플레이 크기로 리사이즈하라. 75-85% 품질로 압축하라. 가능하면 WebP로 변환하라.

CompressIMG가 브라우저에서 모든 것을 처리한다. 최대 20장의 이미지를 업로드하고, 품질을 설정하고, 최적화된 파일을 다운로드하라. 계정 필요 없음.

더 빠른 웹사이트는 더 행복한 방문자, 더 좋은 검색 순위, 더 많은 전환을 의미한다. 이미지가 가장 빠른 해결책이다.