워드프레스 블로그의 체감 속도는 이미지가 절반을 먹습니다. 저는 여행·리뷰 글을 자주 올리는데, 초반엔 사진을 그대로 올려 LCP가 3초대였고 CLS가 0.1을 넘는 페이지도 있었습니다. 작년부터 Squoosh(브라우저 툴)와 XnConvert(무료 배치 변환기)만으로 워크플로를 바꿨더니, 모바일 LCP가 3.1s→2.0s로 떨어졌고 CLS는 0.12→0.02까지 안정화됐습니다. 광고 가시성도 올라가서 스크롤 중간 이탈이 줄더군요. 제가 실제로 쓰는 공짜 도구 레시피를 단계별로 정리해 보겠습니다.
1) JPG·PNG·WebP·AVIF 언제 쓰는지 한눈에 고르는 기준
- 사진(풍경, 인물): WebP가 기본, 퀄리티(Q) 70~80. 고정 배경으로 쓰는 히어로 이미지는 AVIF Q 0.45~0.6도 검토합니다. 같은 품질에서 용량이 20~30% 더 줄어드는 경우가 많습니다.
- 투명 배경 로고/아이콘: PNG-24 또는 WebP(손실 없음). PNG는 여전히 선명하고, WebP 무손실도 대안이 됩니다. 색 수가 적으면 PNG-8(팔레트)로 더 줄일 수 있습니다.
- 썸네일에 글자 포함: WebP Q 72~78 권장. 너무 낮추면 문자 가장자리에 링잉이 생깁니다.
- OG(소셜 미리보기) 전용: 호환성 때문에 JPG(품질 75) 사본을 함께 보관해 두면 안전합니다.
- 한 페이지 안에서 섞어 쓰기: 사진은 WebP/AVIF, 아이콘·UI는 PNG/WebP 무손실로 일관되게. 포맷 혼용 자체는 문제 없지만, 한 파일에 투명도가 필요 없다면 PNG는 피하세요.
저는 “사진은 WebP, 히어로는 AVIF 예비 테스트, 투명은 PNG”라는 간단한 룰로 시작했고, 예외가 생길 때만 조정합니다.
2) Squoosh로 품질 0.6~0.8 구간 테스트하는 실전 절차
Squoosh.app는 브라우저에서 돌고, 압축 전·후를 슬라이더로 비교할 수 있어 판단이 쉽습니다. 제가 쓰는 루틴은 이렇습니다.
- 원본 열기: Squoosh.app 접속 → 이미지를 드래그 앤 드롭
- 먼저 리사이즈: Resize 체크 → 긴 변 기준 1600px(블로그 본문 너비 700~1200px라면 1200~1600px이 안전). sRGB 유지
- 코덱 선택
- 사진: WebP → Quality 0.72부터 시작 → 0.68~0.8 사이에서 가장자리 깨짐 없는 최저점 찾기
- 히어로: AVIF → Quality 0.5, Effort 4~6. 노이즈·밴딩이 생기면 0.55~0.6로 올림
- 체크 포인트: 인물 머리카락·하늘 그라데이션·문자 가장자리 확대(100~200%)로 확인
- 저장: 파일명에 규격을 포함해 관리. 예) jeju-sunset-1600w.webp
실제 예로, 4032×3024 아이폰 사진(3.5MB)을 1600px로 줄인 뒤 WebP Q=0.74로 저장하면 150KB대가 자주 나옵니다. 같은 장면을 AVIF Q=0.55로 저장하면 110KB 수준까지 떨어지는데, 밤하늘처럼 그라데이션이 넓은 사진은 밴딩이 보일 때가 있어 WebP로 남기는 편이 더 안전했습니다.
3) XnConvert에서 폴더 단위 리사이즈·워터마크 자동 처리
단일 파일은 Squoosh, 대량 작업은 XnConvert가 시간을 씹어 먹습니다. 무료고 윈도우·맥 모두 지원합니다. 제 배치 프리셋:
- Input: 폴더 통째로 추가(하위 폴더 포함 체크)
- Actions
- Resize: Longer side 1600px(썸네일 세트가 필요하면 800px, 1200px용 프리셋도 각각 만들어 둡니다)
- Sharpen: Unsharp Mask Amount 0.3, Radius 0.3, Threshold 0(리사이즈 후 미세 선명도 보정)
- Watermark: 투명 PNG 로고 하단 오른쪽, Opacity 20%, Margin 24px
- Metadata: Remove all(EXIF/위치정보 완전 제거)
- Output
- Format: WebP, Quality 75, Method Default
- File name: {Filename}-{Width}w
- Output folder: 원본과 분리된 /export 폴더
이 프리셋으로 124장을 2분 40초 만에 처리했고, 총 용량이 412MB→86MB로 줄었습니다. 워터마크는 과하지 않게, 모바일에서 거의 보이지 않는 20% 불투명도로 통일해 저작권 이슈를 예방합니다. 추가로 800w/1200w/1600w 세 가지 크기를 각각 다른 프리셋으로 내보내 srcset용 세트를 쌓아두면 페이지 빌드가 수월해집니다.
4) 워드프레스 업로드 시 EXIF 제거와 파일명 규칙 잡기
서버에서 다시 손대지 않아도 되게, 로컬에서 최대한 끝내는 게 좋습니다.
- 파일명 규칙: 소문자-하이픈, 핵심 키워드 포함. 예) squoosh-webp-compress-guide-1200w.webp. “IMG_1234”는 피합니다.
- ALT 텍스트: 맥락 설명형으로 한 문장. 예) “제주 협재 해수욕장 노을을 1600픽셀로 압축한 WebP 샘플”
- EXIF 제거: XnConvert/Squoosh에서 삭제했다면 추가 플러그인은 필요 없습니다. 만약 원본을 바로 올린다면 EWWW Image Optimizer(무료)에서 메타데이터 제거만 켜는 방법도 있습니다.
- OG 이미지: 일부 메신저/봇에서 AVIF/WebP가 불안정할 수 있어, 대표 글엔 1200×630 JPG 사본을 Yoast/RankMath의 OG 이미지로 지정해 두는 걸 추천합니다.
저는 한 번 실수로 GPS가 남은 원본을 올렸다가, 글 공개 10분 만에 위치가 노출된 적이 있습니다. 그 뒤로는 “업로드 전 반드시 EXIF 제거”를 체크리스트 첫 줄에 올려두었습니다.
5) CLS 줄이는 LCP 이미지 사이즈·preload 실무 세팅
이미지 최적화의 끝은 “자리 잡기”입니다. 늦게 로드되어 레이아웃이 밀리면 CLS가 튑니다.
- 고정 크기 지정: 워드프레스는 width/height 속성을 자동으로 넣지만, 히어로 영역(대표 이미지)을 커버 블록으로 쓸 때는 블록 설정에서 고정 비율(예: 16:9)과 픽셀 높이를 명확히 지정합니다.
- srcset 준비: 800w, 1200w, 1600w 세트를 올리면 WP가 자동으로 srcset을 구성합니다. 테마가 이를 출력하는지 개발자 도구에서 확인하세요(img 태그에 srcset/sizes 존재).
- 첫 이미지 lazy 제거: LCP 후보 이미지는 lazy를 끄는 편이 안정적입니다. 블록 편집기에서 “지연 로딩” 해제 옵션이 없으면, “Disable Lazy Load for First Image” 같은 무료 플러그인을 사용하면 됩니다.
- preload 적용: 히어로 이미지는 프리로드하면 LCP가 눈에 띄게 안정됩니다. 저는 Header Footer Code Manager로 아래 한 줄을 헤더에 넣습니다.
<link rel="preload" as="image" href="/wp-content/uploads/2025/01/jeju-sunset-1200w.webp" imagesrcset="/wp-content/uploads/2025/01/jeju-sunset-800w.webp 800w, /wp-content/uploads/2025/01/jeju-sunset-1200w.webp 1200w, /wp-content/uploads/2025/01/jeju-sunset-1600w.webp 1600w" imagesizes="(max-width: 768px) 100vw, 1200px" fetchpriority="high">이 세팅만으로 모바일 LCP가 2.6s→2.0s로 떨어졌습니다(Cloudflare 캐시 ON, 동일 글 기준). 마지막으로, 바뀐 이미지를 실서버에서 크롬 Lighthouse로 재검해 보세요. 120~180KB 사이에서 가장 안정적인 구간을 찾는 게 목표입니다. 저는 “1600px WebP 120~160KB, 히어로 AVIF 100~140KB”를 기본선으로 삼고, 글자 포함 이미지는 WebP만 사용해 아트팩트를 피하고 있습니다. 이렇게 루틴을 굳혀 두면, 새 글을 올릴 때도 속도와 가시성을 꾸준히 지킬 수 있고, 애드센스 심사에서도 빠른 LCP·안정적 CLS라는 좋은 신호를 보낼 수 있습니다.
