이미지 압축과 WebP — 700MB로 버티는 법

시작하기 전에

cafe24로 워드프레스 블로그 만들기에서 스타트업 요금제를 골랐다고 썼다. 월 450원, 저장공간 700MB.

트래픽은 걱정 안 됐는데 저장공간이 계속 마음에 걸렸다. 코어랑 테마·플러그인이 이미 자리를 차지하니까 내가 실제로 쓸 수 있는 건 400~550MB 정도임.

스크린샷 한 장이 1~2MB인 걸 생각하면 몇백 장이 한계라는 얘기다. 글 하나에 이미지 5~8장을 목표로 잡았으니 100편도 못 가서 찰 수 있음.

(처음엔 “요금제 올리면 되지” 싶었는데….. 월 450원짜리를 이미지 때문에 올리는 건 좀 아깝다 싶어서 먼저 압축부터 파봤다.)

워드프레스가 알아서 압축해주지 않나

한다. 근데 생각보다 약하다.

1. 워드프레스는 4.5버전부터 이미지 업로드 시 JPEG 품질 82로 자동 압축함. 예전엔 90이었음.
2. 7.1 “Mary Lou”부터는 브라우저 쪽에서 처리하는 클라이언트 사이드 압축(libvips)이 추가돼서 평균 15% 정도 더 줄어듦.
3. 단, 이건 Chrome/Edge 137 이상 데스크톱에서만 걸린다. Safari·Firefox는 기존 서버(PHP) 방식으로 처리됨.

문제는 이 압축이 포맷을 안 바꾼다는 거다. JPEG는 JPEG로, PNG는 PNG로 두고 품질만 낮추는 수준임.

WebP로 자동 변환해주는 기능은 코어에 없다.

진짜 함정은 압축이 아니라 사본이다

이게 더 중요하다.

워드프레스는 이미지 한 장을 올리면 원본을 그대로 두고 썸네일·중간·큰 사이즈를 추가로 만들어 저장한다. 사진 1장을 올렸는데 실제 파일은 4~5개가 생기는 구조임.

실제로 이번에 1200px짜리 사진을 올려보니 -1024x716 같은 변형본이 자동으로 붙어 있었다. 반대로 882px짜리를 올렸더니 변형본이 안 생겼다. 코어가 만드는 “large” 기준(1024px)을 안 넘어서 그렇다.

즉 애초에 작게 올리면 사본도 덜 생긴다. 압축률만 신경 쓰다가 놓치기 쉬운 부분.

이걸 모르고 원본 그대로 몇백 장 올렸으면 진짜 큰일날 뻔했다;

WebP로 바꾸면 얼마나 줄어드나

말로만 하면 안 와닿아서 직접 변환해봤다. 대표 이미지로 쓸 사진 3장을 가로 1200px WebP로 바꿨을 때다.

원본	원본 크기	WebP 변환 후	감소율
데이터센터 사진 (JPG)	278KB	91KB	67% ↓
체크리스트 사진 (JPG)	104KB	23KB	78% ↓
검색 관련 사진 (JPG)	125KB	25KB	80% ↓

평균 75% 정도 줄었다. 눈으로 봐서는 차이를 못 느끼겠더라.

700MB 기준으로 환산하면 사진 한 장에 100KB 잡아도 5,000장은 들어간다는 계산이 나온다. 이 정도면 저장공간 걱정은 사실상 없어진 셈이다..!

무손실이 더 작을 때가 있다

여기서 예상 못 한 걸 하나 발견했다.

WebP에는 손실(lossy)과 무손실(lossless) 두 가지 모드가 있다. 보통은 당연히 손실이 더 작다고 생각하는데, 항상 그런 건 아니었다.

카드뉴스처럼 색이 평평한 일러스트 3장을 두 방식으로 각각 저장해봤다.

이미지	손실 (q82)	무손실	결과
카드뉴스 A	29,770B	25,550B	무손실이 14% 작음
카드뉴스 B	24,098B	16,514B	무손실이 31% 작음
카드뉴스 C	29,364B	23,164B	무손실이 21% 작음

셋 다 무손실이 이겼다. 평균 22% 더 작으면서 화질은 원본 그대로임.

이유는 단순하다. 손실 압축은 사진처럼 색이 미세하게 계속 변하는 이미지에 유리한 방식이다. 반대로 카드뉴스·도식·로고처럼 같은 색 덩어리가 큰 이미지는 무손실 쪽이 압축할 거리가 훨씬 많다.

정리하면 이렇다.

1. 사진 — 손실(quality 75~85). 무손실로 하면 오히려 몇 배로 커짐.
2. 카드뉴스·도식·스크린샷 — 무손실. 더 작고 화질도 안 깨진다.
3. 헷갈리면 양쪽 다 저장해보고 작은 쪽을 쓰면 된다. 몇 초면 확인함.

(그동안 아무 생각 없이 전부 손실로 저장했는데,, 알고 나니 좀 억울했다.)

어떻게 적용할까 — 플러그인 vs 업로드 전 변환

방법은 두 가지다.

	플러그인 자동 변환	업로드 전 수동 변환
대표	Converter for Media, ShortPixel, Imagify, Smush	꿀뷰, 온라인 변환기, 스크립트
장점	올리기만 하면 알아서 됨	용량·화질을 정확히 통제
단점	설정에 따라 저장공간이 오히려 늘 수 있음	매번 손이 감
추천	이미지가 많고 손대기 싫을 때	저장공간이 빠듯할 때

플러그인 쓸 때 반드시 확인해야 하는 함정이 하나 있다.

Converter for Media 같은 일부 플러그인은 원본을 그대로 두고 변환본을 별도 폴더에 추가로 저장한다. 용량을 줄이려고 깔았는데 원본 + WebP가 둘 다 남아서 오히려 늘어나는 상황이 생김.

“원본을 변환본으로 교체” 또는 “원본 자동 삭제” 옵션이 있는지 꼭 보고 켜야 한다.

나는 저장공간이 빠듯한 쪽이라 업로드 전에 미리 변환하는 방식을 쓰고 있다. 어차피 글 쓸 때 이미지를 정리하는 김에 같이 처리하니까 크게 번거롭지도 않다.

참고로 WebP보다 압축률이 더 높은 AVIF도 나와 있다. 다만 브라우저 호환성은 아직 WebP가 훨씬 넓어서, 지금은 WebP가 무난한 선택임.

정리

1. 워드프레스 기본 압축은 있긴 한데 포맷을 안 바꿔서 부족하다.
2. 진짜 저장공간을 먹는 건 압축률이 아니라 자동 생성되는 사본이다. 애초에 작게 올리면 사본도 덜 생긴다.
3. JPG/PNG → WebP만 해도 평균 75% 줄었다. 700MB로도 수천 장 들어간다.
4. 카드뉴스·도식은 무손실 WebP가 더 작다. 사진만 손실로 저장하면 됨.
5. 플러그인 쓸 거면 원본을 지우는 옵션이 있는지 반드시 확인한다. 아니면 용량이 되레 는다.
6. 이미지가 가벼워지면 로딩이 빨라지고, 로딩 속도는 구글이 순위에 반영하는 요소다. 저장공간이랑 SEO를 같이 챙기는 셈.

JPG·PNG를 WebP로 바꾸는 것만으로 용량이 평균 75% 줄었다.

---

← 이전 글	다음 글 →
검색엔진에 제대로 노출되려면 챙겨야 할 것들	AI 크롤러가 내 블로그를 가져가면