같은 화질을 유지하면서 이미지 용량을 25~50%까지 줄일 수 있는 WebP는 이제 대부분의 브라우저가 지원하는 표준 포맷입니다. 다만 전면 전환이 아니라 업로드 파이프라인과 폴백 처리를 함께 설계해야 구형 환경에서 이미지가 깨지는 사고를 막을 수 있습니다.
WebP가 JPG·PNG보다 유리한 이유
WebP는 손실·무손실 압축을 모두 지원하면서 JPG 대비 25~35%, PNG 대비 훨씬 큰 폭으로 파일 용량을 줄입니다. 이미지 용량 감소는 페이지 로딩 속도와 직결되고, 로딩 속도는 코어 웹 바이탈(LCP)을 통해 검색 순위에도 영향을 줍니다.
다만 png의 투명도(alpha) 처리나 극히 오래된 브라우저 호환성은 별도로 검토가 필요해, 무조건 전체 전환보다는 파이프라인화가 안전합니다.
변환 파이프라인 설계: 원본은 보존, 배포는 WebP
실무에서 안전한 구조는 원본 이미지는 그대로 저장하고, 업로드 시점에 WebP 파생 파일을 함께 생성하는 방식입니다.
- 사용자가 JPG/PNG 업로드
- 서버가 원본 저장 후 백그라운드에서 WebP 버전 생성
- DB에는 원본 경로와 WebP 경로를 함께 기록
- 출력 시 브라우저 지원 여부에 따라 적절한 포맷 서빙
원본을 지워버리면 나중에 다른 포맷(AVIF 등)으로 재변환이 필요할 때 품질 손실이 누적되므로, 원본 보존은 필수입니다.
서버 사이드 변환 명령 예시
PHP + GD 또는 Imagick 확장이 설치되어 있다면 다음과 같이 변환합니다.
// GD 확장 사용 예시 $img = imagecreatefromjpeg($src_path); imagewebp($img, $dest_path, 80); // 품질 80 imagedestroy($img);
대량 일괄 변환이 필요할 때는 서버 커맨드라인 도구가 더 빠릅니다.
cwebp -q 80 input.jpg -o output.webp
HTML에서 폴백을 함께 제공하는 방법
구형 브라우저 대비 없이 <img src="photo.webp">만 쓰면 극히 일부 환경에서 이미지가 아예 안 보일 수 있습니다. <picture> 태그로 폴백을 함께 제공하는 것이 안전합니다.
<picture> <source srcset="photo.webp" type="image/webp"> <source srcset="photo.jpg" type="image/jpeg"> <img src="photo.jpg" alt="상품 이미지" width="800" height="600" loading="lazy"> </picture>
브라우저는 지원하는 첫 번째 source를 사용하고, 아무것도 지원하지 않으면 마지막 img 태그로 폴백합니다.
서버 설정으로 자동 협상(Content Negotiation)하는 방법
모든 HTML을 일일이 picture 태그로 바꾸기 어렵다면, 웹서버 레벨에서 요청 헤더(Accept)를 보고 WebP를 자동으로 내려주는 방식도 있습니다.
# Nginx 예시: Accept 헤더에 webp가 있으면 .webp 파일로 대체
location ~* \.(jpe?g|png)$ {
add_header Vary Accept;
try_files "${uri}.webp" $uri =404;
}이 방식은 HTML 수정 없이 기존 이미지 태그를 그대로 두고도 전환할 수 있어, 레거시 게시판 콘텐츠가 많은 사이트에 유리합니다.
변환 품질·용량 기준표
| 이미지 유형 | 권장 품질 | 비고 |
|---|---|---|
| 상품·사진 콘텐츠 | 75~85 | 화질 저하 육안 구분 어려움 |
| 로고·아이콘(단순 그래픽) | 무손실 또는 90 이상 | 디테일 손실 민감 |
| 배경·배너 이미지 | 65~75 | 큰 화면에서도 체감 차이 적음 |
적용 후 검증 방법
- 페이지스피드 인사이트 또는 라이트하우스로 "차세대 이미지 포맷 사용" 경고가 해소됐는지 확인
- 실제 파일 용량을 변환 전/후로 비교해 절감률 기록
- 구형 브라우저(또는 개발자도구 UA 스위칭)로 폴백이 정상 동작하는지 확인
오픈 그래프 이미지는 WebP를 쓰면 안 되는 이유
페이지 내부 이미지는 WebP로 전환해도 무방하지만, SNS 공유용 og:image는 예외로 두는 것이 안전합니다. 카카오톡·일부 메신저의 링크 미리보기 크롤러가 WebP 디코딩을 지원하지 않아 이미지가 아예 표시되지 않는 사례가 있기 때문입니다. og:image는 JPG나 PNG로 별도 관리하고, 본문 이미지만 WebP 파이프라인에 태우는 것을 권장합니다. 자세한 내용은 오픈 그래프 최적화 문서를 참고하세요.
실무 정리
WebP 전환은 속도 개선 효과가 확실한 반면, 폴백 처리를 빠뜨리면 사고로 이어지는 작업입니다. 이미지 최적화와 함께 서버 압축 설정을 같이 적용하면 전송 용량을 한 번 더 줄일 수 있습니다. 대량 이미지 자동 변환 파이프라인 구축이 필요하면 무료 견적요청으로 현재 이미지 운영 방식을 알려주세요.
자주 묻는 질문 (FAQ)
WebP로 바꾸면 화질이 눈에 띄게 나빠지나요? +
품질 75~85 구간에서 변환하면 대부분의 사진 콘텐츠는 원본과 육안으로 구분하기 어렵습니다. 다만 텍스트가 포함된 스크린샷이나 세밀한 그래픽은 변환 전후 비교를 권장합니다.
이미 올려둔 기존 이미지도 전부 변환해야 하나요? +
대량 이미지가 있다면 일괄 변환 스크립트로 한 번에 처리할 수 있습니다. 트래픽이 많은 페이지의 이미지부터 우선 변환하는 것이 효율적입니다.
PNG 투명 배경 이미지도 WebP로 바꿔도 되나요? +
네, WebP는 알파 채널(투명도)을 지원합니다. 다만 무손실 옵션을 사용해야 투명 영역의 경계가 흐려지지 않습니다.
WebP 대신 AVIF를 써야 하나요? +
AVIF가 압축률은 더 높지만 브라우저·도구 호환성이 WebP보다 아직 좁습니다. 안정성이 중요한 실서비스는 WebP를 기본으로, AVIF는 지원 브라우저 확인 후 점진 도입을 권장합니다.
변환 작업이 서버 부하를 많이 차지하나요? +
업로드 시점에 실시간으로 변환하면 순간 부하가 있을 수 있어, 대량 트래픽 환경에서는 업로드 직후 큐에 넣고 백그라운드 워커가 순차 변환하는 구조를 권장합니다.
기존 URL(.jpg)을 그대로 유지하면서 WebP로 서빙할 수 있나요? +
가능합니다. 웹서버의 Accept 헤더 협상 설정을 사용하면 URL 확장자는 .jpg로 유지한 채, 지원 브라우저에는 내부적으로 WebP 파일을 대신 내려줄 수 있어 기존 링크 구조를 바꾸지 않아도 됩니다.