·2분 읽기
PNG를 WebP로 전환 — 서버 비용 40% 줄인 이미지 포맷 마이그레이션 기록
블로그 이미지를 PNG에서 WebP로 전량 전환하면서 대역폭 비용 40% 줄인 실제 기록이에요. 전환 도구, 배치 스크립트, 브라우저 호환성까지 정리했어요.
🖼️
이미지 압축 바로 사용하기
이미지를 압축하고 포맷을 변환하세요
→
왜 WebP인가
WebP는 구글이 2010년에 만든 웹 전용 이미지 포맷이에요. 같은 품질로 **PNG 대비 25~45%, JPG 대비 25~35% 용량 감소**를 달성해요.
블로그 6개에 총 3000장의 이미지를 운영 중인데, 전량 WebP 전환으로 Cloudflare Pages 대역폭 사용량이 **40% 줄었어요.** 비용도 그만큼 절감.
기존 PNG 대비 WebP 장점
- 용량: PNG 100KB → WebP 55~75KB
- 투명도 지원 (PNG처럼 알파 채널 가능)
- 무손실·손실 모드 선택
- 애니메이션 지원 (GIF 대체 가능)
- 대부분 최신 브라우저 호환
단점은 하나, **ImageMagick 오래된 버전·구형 브라우저 미지원**이에요. 2026년 현재 브라우저 시장 점유율 98% 이상이 지원해 실무엔 문제없어요.
전환 도구 3가지 비교
### cwebp (Google 공식 CLI)
```
cwebp -q 80 input.png -o output.webp
```
가장 안정적·빠름.
### squoosh (웹 GUI)
브라우저에서 바로 변환. 업로드 없이 로컬 처리.
### sharp (Node.js 라이브러리)
```js
await sharp('input.png').webp({ quality: 80 }).toFile('output.webp');
```
빌드 파이프라인에 통합 시 유리.
배치 변환 스크립트
폴더 내 모든 PNG를 WebP로 일괄 변환하는 Bash:
```bash
find ./public/images -name '*.png' -type f |
while read f; do
cwebp -q 85 "$f" -o "${f%.png}.webp"
done
```
3000장 변환이 5분이면 끝나요. 동시에 PNG는 백업 폴더로 이동해 복구 대비.
품질 설정 가이드
- 블로그 썸네일: 85 (용량·품질 균형)
- 본문 일러스트: 80
- 사진·실사: 75~80
- 로고·아이콘: 90 (무손실 고려)
85 이하는 눈으로 차이 감지 거의 불가. **질보다 용량 우선**할수록 좋아요.
HTML에서 fallback 처리
구형 브라우저 대응용으로 `<picture>` 태그 사용:
```html
<picture>
<source srcset='photo.webp' type='image/webp'>
<img src='photo.png' alt='설명'>
</picture>
```
2026년 기준 거의 필요 없지만, 법인 환경 IE 남아 있는 경우 보험용.
성능·SEO 효과
실제 측정 결과
- LCP (Largest Contentful Paint): 2.1s → 1.3s
- CLS: 0.02 변화 없음
- Google PageSpeed: 68 → 86
- Cloudflare 월 대역폭: 820GB → 490GB
- Cloudflare Pages 비용: 동일 (무료 한도 내)
- 대규모 사이트라면 CDN 비용 직접 절감
SEO 점수 상승 + 사용자 이탈률 감소가 동시에 왔어요.
AVIF는 다음 단계
AVIF는 WebP보다 30% 더 작은 차세대 포맷. 2026년 브라우저 지원 95%로 실용 단계에 진입. 다만 인코딩 속도가 느리고 라이브러리 성숙도가 낮아 **WebP 전환 후 AVIF 추가 전환**이 안전한 순서예요.
Toolkio Image Compressor로 빠른 변환
대량 변환이 아닌 단건·소량은 Toolkio Image Compressor가 빨라요. PNG·JPG 업로드 → WebP 다운로드가 5초에 끝나요. 브라우저 내 처리라 민감 이미지도 안심.