이미지를 압축했는데도 페이지가 느리거나, 썸네일이 깨지거나, 어떤 이미지에 대체 텍스트를 써야 할지 애매한 경우가 있다. 이미지 최적화는 파일 크기만 줄이는 작업이 아니다. 독자가 이미지를 정상적으로 볼 수 있는지, 이미지를 보지 못할 때 내용이 전달되는지, 필요한 이미지가 너무 늦게 불려 오지 않는지를 함께 확인해야 한다.
이 글은 특정 플러그인의 점수를 올리는 방법이 아니라, 이미지를 올린 뒤 운영자가 실제로 점검할 순서를 기록한 것이다. 앞서 이미지 압축 플러그인 설정을 다뤘다면, 이번에는 결과가 실제 글 화면에서 어떻게 보이는지 확인해 보자.
1. 먼저 구분할 것: 콘텐츠 이미지와 장식 이미지
대체 텍스트(alt)는 이미지를 못 보는 독자와 검색 시스템에 이미지의 역할을 설명하는 정보다. 그러나 모든 이미지에 긴 문장을 채울 필요는 없다. 본문 내용에 새로운 정보를 더하는 이미지에는 설명을 쓰고, 디자인만 위한 배경·구분선·반복 아이콘에는 비워 두는 편이 낫다.[1]
| 이미지 역할 | alt 작성 원칙 | 예시 |
|---|---|---|
| 설정 화면 캡처 | 독자가 캡처에서 확인해야 할 핵심을 적기 | 사이트 건강 상태의 치명적 문제 탭 |
| 글의 대표 이미지 | 글 주제를 자연스럽게 요약 | 워드프레스 백업 복구 점검표가 보이는 관리자 화면 |
| 버튼·아이콘 | 기능이 이미지에만 의존할 때 역할을 적기 | 검색 열기 |
| 단순 배경·장식 | 비워 두기 | 빈 alt |
alt에 이미지, 사진, 키워드를 여러 번 반복하는 방식은 독자에게 도움이 되지 않는다. 같은 글에 같은 스크린샷을 여러 장 넣었다면, 각 장에서 무엇을 봐야 하는지 달라야 한다.
2. WebP로 바꾼 뒤에는 ‘표시’부터 확인한다
WebP는 일반적으로 웹 전송량을 줄이는 데 도움이 될 수 있지만, 확장자 변경 자체가 결과를 보장하지는 않는다. 업로드한 이미지가 대표 이미지·본문·모바일 화면에서 모두 정상 표시되는지 먼저 확인한다. 워드프레스는 이미지 크기별 사본을 만들 수 있으므로, 원본만 열어 보고 끝내면 목록 썸네일의 오류를 놓칠 수 있다.[2]
| 확인 위치 | 확인 질문 | 문제가 보일 때 첫 조치 |
|---|---|---|
| 글 본문 | 이미지 비율이 찌그러지지 않았는가 | 블록의 크기·자르기 설정 확인 |
| 블로그 목록 | 썸네일이 비어 있지 않은가 | 대표 이미지와 미디어 첨부 상태 확인 |
| 모바일 | 가로로 넘치거나 글을 가리지 않는가 | 너비·정렬·캡션 길이 조정 |
| 새 브라우저 창 | 로그인 상태에만 이미지가 보이지 않는가 | 캐시를 비운 뒤 공개 화면 재확인 |
3. 지연 로딩은 첫 화면 이미지까지 늦추지 않는다
브라우저와 워드프레스는 화면 아래의 이미지를 나중에 불러오도록 처리할 수 있다. 다만 글을 열었을 때 가장 먼저 보여야 하는 대표 이미지나 핵심 설명 이미지는 늦게 나타나면 독자 경험이 나빠질 수 있다. 실제 화면에서 스크롤하기 전의 이미지를 확인하고, 이미지가 비어 있다가 뒤늦게 나타나는지 살핀다. WordPress의 이미지 처리 방식과 성능 관련 안내는 버전에 따라 달라질 수 있으므로 업데이트 전후에는 다시 확인한다.[3]
4. 이 사이트에서 남길 운영 기록
로니트윈스처럼 워드프레스 운영 방법을 설명하는 글에서는 설정 화면 캡처가 특히 중요하다. 이미지를 넣었다면 파일명만 적어 두지 말고, 다음을 한 줄로 기록한다.
운영 기록 예시:
2026-08-24 / 본문 설정 캡처 3장 / 모바일·비로그인 창 확인 / alt 입력 완료 / 대표 이미지 정상 노출.
이 기록은 다음 글에서 같은 화면을 다시 찍을 때 어떤 상태를 확인했는지 알려준다. 이미지 수를 늘리는 것보다, 독자가 이 화면을 보고 무엇을 할 수 있는지가 중요하다.
발행 전 5분 점검
- 대표 이미지와 본문 이미지가 새 브라우저 창에서 열리는지 확인한다.
- 내용을 전달하는 이미지에만 구체적인 alt를 넣는다.
- 목록·글 본문·모바일에서 다른 크기 이미지가 깨지지 않는지 확인한다.
- 첫 화면 이미지가 늦게 나타나지 않는지 확인한다.
- 원본 파일·압축 방식·확인 날짜를 운영 메모에 남긴다.
이미지 최적화는 숫자를 낮추기 위한 작업이 아니라, 글을 읽는 사람이 필요한 정보를 빠뜨리지 않도록 만드는 과정이다. 캐시와 성능 문제는 사이트 속도 측정 글에서, 변경 전 백업 원칙은 복구 테스트 글에서 이어서 확인할 수 있다.
참고 자료
[1] W3C WAI — 이미지 대체 텍스트 튜토리얼
[2] WordPress Support — 미디어 라이브러리
[3] WordPress Developer Resources — 이미지 성능
이미지 한 장을 올리기 전에는 목적부터 적는다
alt 텍스트는 파일명을 다시 쓰는 칸이 아니다. 화면을 보지 못하는 독자와 검색엔진이 그 이미지가 문단에서 어떤 역할을 하는지 이해하도록 돕는 설명이다. 예를 들어 관리자 화면의 설정값을 보여주는 캡처라면 “워드프레스 미디어 설정에서 큰 이미지 크기를 1,200px로 지정한 화면”처럼, 독자가 다음 행동을 결정할 수 있는 정보를 남긴다.
반대로 장식용 선, 반복되는 아이콘, 이미 본문에서 충분히 설명한 배경 이미지는 긴 설명을 넣지 않는 편이 낫다. 장식 이미지는 빈 alt로 두고, 본문의 핵심을 전달하는 이미지에만 구체적인 설명을 붙이면 읽기 흐름과 접근성을 함께 지킬 수 있다.
업로드 전·후 검증 순서
| 확인 시점 | 실행 항목 | 통과 기준 |
|---|---|---|
| 업로드 전 | 원본 가로 폭과 불필요한 여백 확인 | 본문 최대 폭보다 과도하게 크지 않음 |
| 업로드 직후 | 미디어 상세 화면에서 alt와 캡션 분리 작성 | alt에 파일명·키워드 반복이 없음 |
| 공개 전 | 모바일 화면과 페이지 속도 도구로 실제 로딩 확인 | 본문 첫 화면의 핵심 이미지가 늦게 사라지지 않음 |
WebP와 지연 로딩에서 자주 생기는 문제
WebP로 변환했다고 해서 원본 파일을 바로 지우면 안 된다. 플러그인·CDN·백업 도구가 원본을 참조하는 경우가 있어, 먼저 공개 글에서 이미지가 정상적으로 보이는지와 백업본에 원본이 남아 있는지를 확인한다. 특히 기존 게시물의 이미지를 대량 변환할 때는 한 번에 전부 처리하지 말고, 대표 글 몇 편에서 변환 전후 품질과 링크를 비교하는 것이 안전하다.
지연 로딩은 본문 아래쪽 이미지에는 도움이 되지만, 글 맨 위의 대표 이미지나 첫 화면에서 바로 읽어야 하는 안내 이미지는 예외가 될 수 있다. 첫 화면 이미지가 빈 공간으로 오래 남는다면 해당 이미지의 지연 로딩 제외 옵션을 검토하고, 변경 뒤에는 시크릿 창과 휴대전화에서 다시 확인한다.
마지막 확인 질문
- 이미지가 없어도 본문의 설명만으로 절차를 이해할 수 있는가?
- alt 텍스트가 이미지의 기능을 설명하며 불필요한 키워드 반복이 없는가?
- 변환 후 이미지 주소와 크기가 깨지지 않았는가?
- 대표 이미지와 표 안의 이미지가 모바일 폭을 넘지 않는가?