웹용 이미지 압축은 방문자가 차이를 느끼지 못할 만큼 이미지를 선명하게 유지하면서 파일 크기를 줄이는 것을 의미합니다. 압축되지 않았거나 가볍게 압축된 이미지는 페이지 로딩 속도 저하의 단일 최대 원인입니다 — 웹 페이지에 직접 배치된 4 MB DSLR 사진은 Core Web Vitals를 실패하게 만듭니다. 이 가이드는 목표 크기, 올바른 형식, 몇 분 안에 완료할 수 있는 워크플로우를 다룹니다.

웹 이미지의 목표 파일 크기

일반적인 웹 사용 사례를 위한 실용적인 목표치:

히어로 / 배너 이미지 (전체 너비): 200 KB 이하
콘텐츠 이미지 (기사 본문 내): 100 KB 이하
썸네일 / 카드 이미지: 30 KB 이하
블로그 포스트 대표 이미지: 150 KB 이하
제품 이미지 (이커머스): 100 KB 이하
배경 이미지: 300 KB 이하
로고 / 아이콘: 20 KB 이하

이 수치는 WebP 형식을 기준으로 합니다. JPEG 목표치는 약 1.3배 높아야 합니다 (WebP는 동일한 품질에서 JPEG보다 약 25~35% 작습니다).

1단계: 먼저 표시 치수로 리사이즈

압축만으로는 크기가 너무 큰 이미지를 해결할 수 없습니다. 이미지가 4000×3000 px이지만 화면에서 1200×900 px로 표시된다면, 필요한 것보다 11배 더 많은 픽셀을 제공하는 것입니다. 먼저 리사이즈한 후 압축하세요.

일반적인 웹 표시 너비와 권장 업로드 크기:

전체 너비 히어로: 최대 1920 px 너비로 리사이즈
블로그 콘텐츠 이미지: 최대 1200 px 너비로 리사이즈
카드 / 썸네일: 400~600 px 너비로 리사이즈
사이드바 이미지: 300~400 px 너비로 리사이즈

리사이즈 도구를 사용하여 정확한 픽셀 치수를 설정하세요. 비율이 맞지 않으면 먼저 크롭하세요.

2단계: 올바른 형식 선택

WebP: 대부분의 웹 이미지에 최적. JPEG보다 25~35% 작고, PNG처럼 투명도를 지원합니다. 현대 웹사이트의 사진과 그래픽에 사용하세요. 모든 주요 브라우저가 WebP를 지원합니다.
JPEG: 광범위한 호환성이 필요한 사진에 적합합니다. 선명한 가장자리나 텍스트가 있는 그래픽에는 피하세요 — JPEG는 이를 흐릿하게 만듭니다.
PNG: 무손실 품질이나 투명도가 필요하고 WebP를 사용할 수 없을 때만 사용하세요(예: 일부 이메일 클라이언트). PNG 파일은 크며 — 폴백으로만 PNG를 압축하세요.
AVIF: WebP보다 20~30% 더 작습니다. 2026년의 훌륭한 선택. 브라우저 지원이 거의 보편적입니다 (Chrome 85+, Firefox 93+, Safari 16+).
GIF: 단순한 애니메이션에만 사용하세요. 정적 이미지에는 항상 WebP 또는 JPEG를 대신 사용하세요.

3단계: 올바른 품질 설정으로 압축

JPEG와 WebP 품질은 0~100으로 스케일됩니다. 품질이 높을수록 파일이 크고, 품질이 낮을수록 아티팩트가 더 많습니다. 웹 사용을 위한 최적 지점:

사진 (JPEG/WebP): 75~85% 품질 — 100%와 시각적 차이가 거의 없지만 파일이 3~5배 작습니다.
텍스트가 있는 그래픽 (WebP/PNG): 무손실 모드 또는 90%+ 품질로 텍스트 흐림을 방지하세요.
썸네일: 65~75% — 작은 크기에서 압축 아티팩트가 거의 보이지 않습니다.

Picovert의 압축기를 열어 사진과 그래픽을 브라우저에서 압축하세요. 파일이 업로드되지 않습니다 — 모든 것이 로컬에서 처리됩니다.

눈에 보이는 품질 손실 없이 얼마나 압축할 수 있나요?

경험적 법칙으로:

10 MB DSLR JPEG → 80% 품질의 WebP로 압축 → 일반적으로 200~400 KB, 일반 시청 거리에서 시각적으로 동일.
2 MB PNG 스크린샷 → 압축된 PNG → 일반적으로 400~800 KB. WebP로 전환하면 300~500 KB 결과.
스마트폰 카메라의 500 KB JPEG → WebP로 압축 → 일반적으로 80~150 KB.

최대 웹 압축을 위한 WebP 변환

JPEG를 WebP로 변환하는 것이 종종 단일 최고 영향 단계입니다. 이미 80%로 압축된 JPEG도 동일한 체감 품질에서 WebP로 변환하면 25~35% 더 줄일 수 있습니다.

JPG → WebP 변환 — 한 번에 변환 및 압축
PNG → WebP 변환 — 투명 이미지용

웹 이미지를 압축하지 않으면 어떻게 되나요?

Core Web Vitals 실패: Google의 LCP(최대 콘텐츠풀 페인트) 기준은 주요 이미지가 2.5초 이내에 로드되어야 합니다. 큰 이미지는 직접적으로 LCP 실패를 초래합니다.
검색 순위 하락: 페이지 속도는 순위 신호입니다. 무거운 이미지로 인한 느린 페이지는 압축된 경쟁자에게 순위를 잃습니다.
높은 대역폭 비용: CDN 및 서버 이그레스 비용은 전송된 바이트에 따라 늘어납니다. 이미지 크기를 10배 줄이면 대역폭 비용도 직접 10배 줄어듭니다.
불량한 모바일 경험: 모바일 연결은 종종 4G 이하입니다. 광섬유에서 0.5초에 로드되는 2 MB 이미지는 일반 4G 연결에서 4초 이상 걸립니다.

빠른 압축 체크리스트

압축 전에 실제 표시 치수로 리사이즈
가능한 경우 JPEG나 PNG 대신 WebP 형식 사용
사진의 품질을 75~85%로 설정
히어로 이미지는 200 KB 이하, 콘텐츠 이미지는 100 KB 이하 유지
레이아웃 이동을 방지하기 위해 HTML에 명시적인 width와 height 속성 설정
접힌 아래 이미지에 loading="lazy" 사용
CDN을 사용하여 방문자 근처의 엣지에서 이미지 제공