이미지 WebP 변환 기준 잡기
웹 페이지에 원본 사진을 그대로 올리면 전송량이 빠르게 늘어나고 페이지도 느려집니다. 스마트폰 사진 한 장이 3~6MB인데, 실제 화면에서 필요한 폭은 대부분 1600px 이하입니다. 리사이즈(크기 줄이기)와 형식 변환만으로 파일 크기를 보통 5분의 1 이하로 줄일 수 있습니다.
형식 선택
WebP(용량이 작은 최신 이미지 형식)는 같은 화질 기준으로 JPEG보다 25~35% 정도 작고, 현재 주요 브라우저가 모두 지원합니다. 사진에는 WebP 또는 JPEG를, 스크린샷처럼 선이 또렷한 이미지나 투명 배경이 필요한 경우에는 PNG를 사용합니다. PNG는 손실 압축(화질을 조금 양보해 용량을 줄이는 방식)이 아니므로 품질 값의 영향을 받지 않는 대신 파일이 큽니다.
품질과 최대 가로 기준
사진은 품질 75~85 사이에서 화질 차이를 눈으로 구분하기 어렵습니다. 본문 삽입용 이미지는 최대 가로 1200~1600px, 썸네일은 320~640px이면 충분합니다. 원본보다 크게 늘리는 업스케일은 화질만 나빠지므로 피해야 합니다.
이미지 도구 페이지의 리사이즈·WebP 변환 도구는 이 기준을 그대로 적용합니다. 파일은 서버로 업로드되지 않고 브라우저에 내장된 canvas 기능으로 변환된 뒤 바로 내려받기 링크로 제공됩니다. 원본 파일은 변경되지 않습니다.
변환 전 확인할 것
변환하면 EXIF 메타데이터(촬영 시각, GPS 위치)가 함께 제거됩니다. 공개용 이미지는 오히려 장점이지만, 촬영 정보를 보관해야 하는 원본은 따로 백업해 두세요. 또 JPEG는 투명 배경을 지원하지 않으므로 투명 PNG를 JPEG로 바꾸면 배경이 흰색으로 채워집니다.
cwebp로 변환해 보기
기준을 정했으면 실제 변환은 cwebp 한 줄입니다. 리사이즈와 품질을 함께 지정합니다.
# 0) cwebp 설치 (우분투·데비안 계열)
sudo apt install -y webp
# 맥이면: brew install webp
# 설치 확인: cwebp -version → 숫자가 나오면 OK
# 1) 사진 한 장: 품질 80 + 가로 1600px로 줄이며 변환
cwebp -q 80 -resize 1600 0 photo.jpg -o photo.webp
# -resize 1600 0 → 가로 1600, 세로 0은 "비율 맞춰 자동"
# → "Saved ... bytes" 가 나오면 photo.webp 생성 완료
# 2) 폴더 안 .jpg 전부 한 번에 변환
for f in *.jpg; do
cwebp -q 80 -resize 1600 0 "$f" -o "${f%.jpg}.webp"
done
# 3) 스크린샷·로고처럼 글자가 선명해야 하면 무손실로
cwebp -lossless logo.png -o logo.webp