JPG를 WebP로 바꾸면 용량이 얼마나 줄어들까
구글 페이지스피드 인사이트나 라이트하우스로 사이트 속도를 진단해 보면 "이미지를 차세대 포맷으로 제공하세요"라는 경고가 뜨고, 클릭해 보면 JPG 파일들이 콕 집혀 나열되는 경우가 많습니다. 왜 하필 JPG가 지적당하는지, WebP로 바꾸면 실제로 용량이 얼마나 줄어드는지 이 글에서 정리합니다.
요약 ① 구글 페이지스피드가 JPG를 지적하는 이유는 WebP가 같은 화질에서 평균 25~35% 더 작은 파일 크기를 내는 압축 방식을 쓰기 때문입니다 ② JPG는 8x8 블록 단위 압축만 쓰지만 WebP는 예측 부호화와 블록 간 참조를 함께 써서 중복 데이터를 더 많이 제거합니다 ③ 화질 손실 없이 용량만 줄이려면 무손실 WebP를, 용량을 더 줄여도 되면 손실 WebP를 품질 수치로 조절해서 씁니다
페이지스피드가 JPG를 지적하는 이유
이미지가 들어간 페이지에서 속도 진단을 돌리면 거의 예외 없이 "이미지 형식을 최신 포맷으로 제공하세요" 항목이 걸립니다. 항목을 펼치면 사용 중인 JPG 파일 목록과 함께 "예상 절감 용량"이 파일별로 적혀 있는 것을 볼 수 있습니다.
이 지적이 나오는 이유는 브라우저 호환성이 이미 해결됐기 때문입니다. WebP는 2010년에 공개된 포맷이지만 지금은 크롬, 사파리, 파이어폭스, 엣지 모두 지원합니다. 반면 예전에 만든 페이지에 올려둔 이미지는 여전히 JPG로 남아 있는 경우가 많습니다.
로딩 속도는 검색 순위 평가 요소인 코어 웹 바이털(특히 LCP, 최대 콘텐츠풀 페인트)에도 영향을 줍니다. 그래서 배너 이미지 한 장이 800KB짜리 JPG라면, 같은 화질의 WebP로 바꾸는 것만으로도 500KB대까지 떨어지는 경우가 흔하고, 이미지가 여러 장인 페이지에서는 이 차이가 누적됩니다.
JPG를 WebP로 바꾸는 방법
이 변환을 손으로 하는 방법은 두 가지입니다.
첫째, 구글이 배포하는 공식 인코더인 cwebp를 터미널에 설치해 파일을 하나씩 변환하는 방법입니다. 예를 들어 cwebp -q 80 photo.jpg -o photo.webp라고 입력하면 품질 80(0에서 100 사이) 기준으로 변환된 WebP 파일이 만들어집니다. 품질 숫자를 낮출수록 용량은 더 줄지만 압축 손상이 눈에 띄기 시작하므로, 사진처럼 그러데이션이 많은 이미지는 75에서 85 사이에서 눈으로 확인하며 정하는 것이 안전합니다.
둘째, 포토샵이나 김프(GIMP) 같은 이미지 편집 프로그램에서 "다른 이름으로 내보내기"를 열어 파일 형식을 WebP로 바꾸는 방법입니다. 두 방법 모두 결과는 같지만, 파일이 여러 개거나 터미널이 낯설다면 매번 프로그램을 열고 옵션을 맞추는 과정이 번거롭습니다.
저희 도구로 확인하기. JPG 파일을 올리고 품질 슬라이더를 옮기면 변환 전후 용량이 얼마나 차이 나는지 바로 보고 다운로드할 수 있습니다.
무료 · 가입 불필요 · 품질을 조절하며 변환 전후 용량을 바로 비교하고 다운로드
자주 막히는 지점
| 상황 | 왜 그런지 |
|---|---|
| WebP로 바꿨는데 화질이 흐려 보임 | 품질 수치를 너무 낮게 잡으면 색이 뭉개지는 손실 압축 특성 때문입니다 |
| 투명 배경 PNG도 WebP로 바꿔도 되는지 궁금함 | WebP는 알파 채널(투명도)을 지원하므로 PNG 대신 써도 투명 배경이 그대로 유지됩니다 |
| 오래된 브라우저에서 안 보인다는 이야기를 들음 | 몇 해 전 구형 사파리·인터넷 익스플로러 이야기이고, 현재 배포 중인 주요 브라우저는 모두 WebP를 지원합니다 |
정리
JPG는 오래된 블록 압축만 쓰고 WebP는 예측 부호화를 더해 같은 화질에서 파일이 더 작습니다. 페이지스피드나 라이트하우스가 JPG를 지적하는 이유는 이 용량 차이가 곧 로딩 속도 차이로 이어지기 때문입니다. 손으로 바꾸려면 cwebp 명령이나 이미지 편집 프로그램의 내보내기 기능을 쓰면 되고, 품질 수치는 75에서 85 사이에서 원본과 비교하며 정하는 것이 안전합니다.
무료 · 가입 불필요 · 품질을 조절하며 변환 전후 용량을 바로 비교하고 다운로드
자주 묻는 질문
WebP로 바꾸면 화질이 떨어지나요?
손실 압축 방식으로 바꾸면 원본과 100% 동일하지는 않지만, 품질 수치를 80 안팎으로 두면 육안으로는 차이를 구분하기 어렵습니다. 화질을 전혀 포기할 수 없다면 무손실 WebP로 바꾸면 되지만, 이 경우 용량 절감 폭은 손실 방식보다 작습니다.
모든 JPG를 WebP로 바꿔야 하나요?
로고나 아이콘처럼 반복해서 쓰는 작은 이미지보다는, 배너나 상품 사진처럼 용량이 큰 이미지부터 바꾸는 편이 체감 효과가 큽니다. 로딩 속도에 영향을 주는 건 파일 개수가 아니라 누적 용량이기 때문입니다.
WebP로 바꾸면 페이지스피드 점수가 바로 오르나요?
이미지 용량 감소는 LCP 개선에 직접 도움이 됩니다. 다만 전체 점수는 서버 응답 속도, 자바스크립트 실행 시간 등 다른 요인도 함께 반영되므로 이미지만 바꿨다고 즉시 만점이 되는 것은 아닙니다.