워드프레스 이미지 최적화는 화질을 무조건 낮추는 작업이 아닙니다. 화면에 실제로 필요한 크기와 형식을 선택하고, 브라우저가 레이아웃을 미리 계산하도록 크기를 선언하며, 첫 화면 이미지와 아래쪽 이미지를 다르게 로딩하는 과정입니다.
이미지가 느린 이유부터 구분한다
원본 픽셀 크기, 압축 품질, 파일 형식, 한 페이지의 이미지 수, 외부 서버 응답, 테마가 선택한 썸네일 크기가 함께 영향을 줍니다. 캐시를 켜도 원본 파일이 지나치게 크면 첫 방문자는 큰 파일을 내려받아야 합니다.
이미지 형식 선택표
| 형식 | 적합한 용도 | 주의점 |
|---|---|---|
| JPEG | 사진과 색상이 많은 이미지 | 투명 배경 미지원 |
| PNG | 투명 배경·선명한 UI 캡처 | 사진에서는 파일이 커질 수 있음 |
| WebP | 사진·그래픽의 웹 전달 | 변환 후 화질과 호환 경로 확인 |
| AVIF | 더 높은 압축 효율이 필요한 사진 | 인코딩 비용과 대체 형식 확인 |
| SVG | 로고·아이콘·벡터 | 업로드 보안과 신뢰할 수 있는 파일 필요 |
Google의 이미지 형식 안내는 사진형 래스터 이미지에 WebP와 AVIF를 검토하고 반응형 이미지를 제공하도록 설명합니다.
1단계: 업로드 전에 표시 크기를 정한다
본문 폭이 800px인데 4000px 원본을 그대로 넣으면 브라우저는 필요 이상으로 큰 파일을 받을 수 있습니다. 고해상도 화면을 고려하더라도 실제 표시 폭의 약 두 배 정도를 출발점으로 삼고, 확대가 필요한 도표는 별도 링크를 제공하세요.
- 대표 이미지와 본문 이미지의 권장 비율을 정합니다.
- 모바일에서 읽을 수 없는 작은 글자가 없는지 확인합니다.
- 파일 이름은 내용을 설명하는 짧은 영문 또는 일관된 규칙을 사용합니다.
- 원본은 별도 저장하고 웹용 사본을 만듭니다.
2단계: 손실 압축과 무손실 압축을 구분한다
사진은 약간의 정보를 줄이는 손실 압축으로 용량을 크게 낮출 수 있고, 로고나 선이 중요한 화면은 무손실 또는 높은 품질이 적합할 수 있습니다. 숫자 하나를 모든 이미지에 적용하지 말고 얼굴, 글자, 그라데이션, 선명한 경계에서 압축 흔적을 확인하세요.
3단계: WordPress 반응형 이미지 기능을 유지한다
WordPress는 업로드한 이미지에서 여러 크기를 만들고 srcset·sizes 속성을 사용해 화면에 맞는 파일을 선택할 수 있습니다. 테마가 원본 URL을 직접 출력하거나 잘못된 HTML로 이 기능을 우회하지 않는지 확인하세요. 미디어 설정을 바꾸면 기존 이미지 크기는 자동으로 다시 생성되지 않을 수 있으므로 백업과 테스트가 필요합니다.
4단계: width와 height로 레이아웃 이동 방지
이미지의 가로·세로 비율을 브라우저가 미리 알면 파일이 도착하기 전 공간을 확보할 수 있습니다. Google의 이미지 학습 문서는 크기 선언이 레이아웃 이동을 줄이는 데 중요하다고 설명합니다. CSS로 반응형 폭을 조절하더라도 HTML의 크기 정보는 유지하세요.
5단계: 지연 로딩은 첫 화면 아래에 적용한다
loading=”lazy”는 화면 밖 이미지를 나중에 불러와 초기 전송량을 줄입니다. 하지만 로고나 글 상단 대표 이미지처럼 LCP 후보가 되는 첫 화면 이미지를 지연 로딩하면 핵심 콘텐츠 표시가 늦어질 수 있습니다. Google의 브라우저 지연 로딩 안내를 참고해 첫 화면과 아래쪽 이미지를 구분하세요.
LCP 이미지 최적화
| 확인 항목 | 좋은 방향 |
|---|---|
| 발견 시점 | 초기 HTML에서 바로 찾을 수 있게 함 |
| 지연 로딩 | LCP 후보에는 적용하지 않음 |
| 우선순위 | 필요하면 fetchpriority=”high”를 신중히 검토 |
| 파일 크기 | 표시 크기와 화질에 맞춰 압축 |
| 서버 응답 | 캐시와 CDN 설정을 함께 점검 |
LCP 최적화 공식 문서는 LCP 이미지에 지연 로딩을 적용하면 발견과 다운로드가 늦어질 수 있다고 설명합니다.
대체 텍스트는 이미지의 역할을 설명한다
대체 텍스트는 키워드를 나열하는 칸이 아니라 이미지를 보지 못하는 사용자가 같은 정보를 이해하도록 돕는 설명입니다. 장식 이미지는 빈 대체 텍스트가 적합할 수 있고, 차트는 결론과 핵심 수치를 본문에도 제공해야 합니다. 이미지 주변 문장과 똑같은 내용을 반복하지 마세요.
최적화 플러그인 선택 기준
- 원본 보관과 되돌리기를 지원하는가?
- WebP·AVIF 전달 방식과 대체 형식이 명확한가?
- 기존 이미지 일괄 변환 전에 미리보기가 가능한가?
- 썸네일을 포함한 변환 범위를 선택할 수 있는가?
- CDN·캐시 플러그인과 중복 기능이 없는가?
- 변환 실패와 저장 공간 사용량을 확인할 수 있는가?
전체 미디어를 한 번에 변환하기 전 백업을 만들고 몇 장으로 품질과 URL을 시험하세요.
이미지 최적화 전후 측정
| 측정 항목 | 확인 도구·방법 |
|---|---|
| 전송 크기 | 브라우저 네트워크 패널 |
| 표시 크기와 원본 크기 | 요소 검사 |
| LCP 후보 | PageSpeed Insights·Lighthouse |
| CLS | 크기 미지정 이미지 여부 확인 |
| 화질 | 모바일·데스크톱 실제 화면 비교 |
실험실 점수 한 번보다 같은 조건의 전후 비교와 Search Console 현장 데이터를 함께 봅니다.
자주 발생하는 문제
- WebP를 만들었지만 HTML은 계속 JPEG 원본을 요청함
- CDN 캐시 때문에 변환 전 이미지가 남음
- 대표 이미지까지 지연 로딩되어 LCP가 악화됨
- width·height가 사라져 로딩 중 레이아웃이 이동함
- 압축률을 과도하게 높여 글자와 선이 흐려짐
- 사용하지 않는 원본과 썸네일이 계속 쌓임
최종 체크리스트
- 실제 표시 폭에 맞는 크기로 업로드했는가?
- 사진과 그래픽에 맞는 형식을 선택했는가?
- 반응형 srcset이 출력되는가?
- 첫 화면 이미지는 지연 로딩에서 제외했는가?
- width와 height가 존재하는가?
- 대체 텍스트가 이미지 역할을 설명하는가?
- 변환 전 원본과 복원 방법이 있는가?
- 모바일에서 화질과 레이아웃을 확인했는가?
캐시 전달은 캐시 설정 가이드, 체감 지표는 Core Web Vitals 가이드와 함께 점검하세요.