페이지가 무거우면 방문자는 기다리지 않습니다. 워드프레스 이미지 최적화는 속도와 검색 노출 모두에 직접 영향을 줍니다. 아래 순서대로 적용하면 초보자도 안정적으로 체감 속도를 끌어올릴 수 있습니다.
워드프레스 이미지 최적화, 어디서부터 시작해야 할까?
먼저 현 상태를 파악합니다. PageSpeed Insights로 느린 페이지를 찾고, LCP 이미지(가장 크게 보이는 첫 화면 이미지)를 확인합니다. 다음으로 업로드되는 이미지의 규격, 압축 수준, 파일 형식을 표준화합니다. 마지막으로 캐시·CDN과 연동해 자동화를 걸면 유지 관리가 쉬워집니다.
점검 리스트
- 느린 페이지 주소 3개 선정
- LCP로 잡히는 이미지 파일명 기록
- 현재 최대 콘텐츠 폭(px), 본문 영역 폭 확인
- 사용 중인 압축/형식 변환 플러그인 유무 확인
- 사이즈: 업로드 전 크기와 워드프레스 썸네일 규격 설정
- 이미지 크기는 품질보다 속도에 더 큰 영향을 줍니다. 본문 폭이 800~1200px라면 원본을 1.5배 이내로 제한하세요. 너무 큰 원본은 썸네일까지 과도한 용량을 유발합니다.
권장 해상도
- 본문 이미지: 1600px 너비(레티나 고려), 세로는 비율 유지
- 히어로/배너: 1920px 너비
- 썸네일/카드: 400~800px 너비
- 워드프레스 설정 : 설정 > 미디어: 불필요한 중간 크기를 줄이고 실제 쓰는 크기만 남깁니다.
- 테마 최대 콘텐츠 폭 확인: 블록/페이지 빌더의 컨테이너 폭에 맞춰 원본을 리사이즈합니다.
- Regenerate Thumbnails로 기존 썸네일 재생성(규격 변경 후 1회 실행).
- 압축: 손실·무손실 선택 기준과 기본 세팅 : 압축은 품질 체감이 적은 선에서 일괄 적용합니다. 사진류는 손실(Lossy), UI 캡처나 텍스트는 무손실(Lossless)을 우선 고려합니다.
권장 플러그인 세팅
- ShortPixel: Glossy(사진), Lossless(스크린샷). EXIF 제거 ON, WebP 생성 ON.
- Imagify: Aggressive(사진), Normal(스크린샷). Backups ON, WebP 생성 ON.
- EWWW: Smart 압축 ON, 메타데이터 제거 ON, WebP 변환 ON.
팁
JPEG 목표 용량: 본문용 80~200KB, 히어로 150~350KB.
PNG는 투명 필요 시만 사용. 가능하면 JPEG/WEBP로 전환.
편집 단계에서 sRGB 색공간으로 저장하면 색상 이슈를 줄일 수 있습니다.
형식 변환: WebP·AVIF 적용 절차
형식 변환은 용량 절감 효과가 큽니다. 우선 WebP를 기본으로, 여유가 있으면 AVIF까지 생성하고 브라우저 호환을 고려해 폴백을 둡니다.
실전 단계
1) 플러그인에서 WebP(그리고 가능하면 AVIF) 생성 옵션 ON
2) 기존 미디어 일괄 변환 실행
3) 프런트에서 picture/srcset으로 차세대 형식이 제공되는지 확인
4) 위더폴드(첫 화면) 이미지는 lazy 속성을 해제하고 fetchpriority=”high” 설정
5) Safari 등 미지원 브라우저에 JPEG/PNG 폴백 여부 점검
CDN 연동 선택
Cloudflare(Polish/Images), Bunny Optimizer 등을 쓰면 원본 보관+엣지 변환이 가능합니다.
해외 트래픽이 많다면 CDN 자원으로 자동 WebP/AVIF 제공을 검토하세요.
실전 적용 순서와 예시 팁
예시 1: 블로그 본문 이미지
1) 편집기에서 1600px로 저장
2) JPEG 고정, 화질 70~80
3) 업로드 시 플러그인으로 WebP 생성
4) 본문 첫 이미지 lazy 해제, 나머지는 기본 lazy 유지
예시 2: 제품 썸네일(쇼핑몰) 1) 800px 정사각으로 일괄 리사이즈
2) 배경 투명이 필요 없으면 PNG→JPEG/WebP 변환
3) 테마 커스터마이저에서 썸네일 크기 고정, 재생성
4) 목록/카드에서 동일 비율 유지로 CLS 방지
예시 3: 히어로 배너
1) 1920px, 중요 영역에 샤프닝
2) JPEG 60~70 또는 WebP 품질 70
3) preload 또는 fetchpriority=”high”로 초기 로드 가속
자주 묻는 질문과 주의점
Q. WebP로 바꾸면 SEO에 문제 없나?
A. 문제 없습니다. ALT, 파일명, 캡션, 주변 문맥이 중요합니다.
Q. 레티나 화면 품질이 걱정된다.
A. 1.5~2배 해상도와 적정 샤프닝으로 충분합니다. 과도한 3~4배는 낭비입니다.
Q. lazy 때문에 LCP가 늦어질 수 있나?
A. 첫 화면 핵심 이미지는 lazy를 꺼야 합니다. 테마/플러그인 예외 리스트에 LCP 이미지를 추가하세요.
Q. PNG와 SVG는 언제 쓰나?
A. 로고, 아이콘은 SVG 우선. 투명 배경이 필요한 사진은 PNG, 그렇지 않다면 JPEG/WebP.
Q. 원본 보관은 필요할까?
A. 자동 백업 ON을 권장합니다. 디자인 변경이나 크기 재생성 시 유용합니다.
마지막 점검표
본문 최대 폭 파악 및 원본 리사이즈 규칙 수립
설정 > 미디어에서 실제 쓰는 썸네일만 유지
압축 플러그인 설치, 손실·무손실 기준 분리
WebP(가능하면 AVIF) 자동 변환과 폴백 점검
LCP 이미지 lazy 해제, fetchpriority 적용
변경 후 PageSpeed/Lighthouse 재측정 및 LCP/CLS 확인
