워드프레스 본문 이미지 최적화: 크기·형식·대체 텍스트

조회 179좋아요 0

본문 이미지는 업로드에 성공했다고 끝나지 않는다. 원본 사진을 그대로 올리면 모바일 화면에 필요한 크기보다 훨씬 큰 파일을 내려받고, 잘못된 비율은 레이아웃을 흔들며, 설명 없는 이미지는 보조 기술 사용자에게 정보를 주지 못한다. 워드프레스 글에 넣기 전부터 공개 화면 확인까지의 흐름을 정리한다.

워드프레스 본문 이미지의 크기, 형식, 대체 텍스트를 최적화하는 그림

이미지의 역할부터 결정한다

이미지는 세 종류로 나눌 수 있다. 검색·목록에서 글을 구분하는 대표 이미지, 절차를 설명하는 화면 캡처, 내용을 요약하는 도표다. 역할이 없고 분위기만 채우는 이미지는 꼭 필요한지 다시 본다. 특히 AI 생성 이미지를 여러 글에 비슷하게 사용하면 고유한 정보보다 장식 비중이 커질 수 있다.

화면 캡처에는 필요한 패널만 남기고 계정명, 이메일, 서버 주소, API 키를 가린다. 흐림 처리만으로 원문 복원이 가능한 경우도 있으므로 민감 영역은 완전히 덮고 편집 파일도 공개 폴더에 올리지 않는다.

표시 크기에 맞게 원본을 줄인다

본문 최대 폭이 약 800px인데 4,000px 사진을 올리면 브라우저가 축소해 보여도 전송량은 클 수 있다. 고해상도 화면을 고려해 표시 폭의 약 두 배 정도면 대부분 충분하다. 확대해 읽어야 하는 도표는 작은 글씨를 줄이기보다 내용을 여러 장으로 나눈다.

사진은 WebP나 적절히 압축한 JPEG가 효율적인 경우가 많고, 투명 배경이나 선명한 UI 캡처는 PNG가 나을 수 있다. 형식 이름만 보고 결정하지 말고 같은 크기로 변환한 뒤 글자 선명도와 파일 용량을 비교한다. 중요한 원본은 업로드용 파일과 별도로 보관한다.

파일 이름과 대체 텍스트를 다르게 생각한다

파일 이름은 관리자가 미디어 보관함에서 찾기 쉬운 짧은 영문으로 정한다. 예: wordpress-image-alt-text-panel.webp. 대체 텍스트는 파일 이름 번역이 아니라 현재 문맥에서 이미지가 전달하는 의미다.

좋은 대체 텍스트는 다음 질문에 답한다. 이미지가 보이지 않을 때 독자가 놓치는 정보는 무엇인가? 단순 장식이라면 빈 대체 텍스트가 적절할 수 있고, 그래프라면 축·비교 대상·핵심 변화가 필요하다. 그래프의 모든 수치를 대체 텍스트에 넣기보다 주변 본문이나 표에서 같은 데이터를 제공한다.

키워드를 반복해서 넣는 것은 접근성에도 검색 품질에도 도움이 되지 않는다. “워드프레스 이미지 워드프레스 최적화 이미지 SEO” 대신 “미디어 설정에서 큰 이미지 크기를 1200픽셀로 지정한 화면”처럼 구체적으로 쓴다.

워드프레스에서 크기 선택

이미지를 업로드하면 워드프레스는 썸네일·중간·큰 크기 등 여러 파생 파일을 만들 수 있다. 글 안에서는 실제 표시 영역과 가장 가까운 크기를 선택한다. 원본 연결이 꼭 필요하지 않다면 이미지 클릭 시 첨부 파일이나 원본을 열지 않도록 설정해 불필요한 이동을 줄인다.

테마가 반응형 이미지의 srcsetsizes를 올바르게 출력하는지 공개 페이지 소스에서 확인할 수 있다. 브라우저 개발자 도구의 네트워크 탭에서 모바일 폭으로 새로고침했을 때 지나치게 큰 원본을 받는지도 본다.

지연 로딩과 첫 화면 이미지

화면 아래의 이미지는 지연 로딩으로 초기 전송을 줄일 수 있다. 반면 첫 화면의 대표 이미지까지 지나치게 늦게 불러오면 큰 콘텐츠 표시 시간이 나빠질 수 있다. 워드프레스 코어와 테마가 기본으로 처리하는 동작을 먼저 확인하고 지연 로딩 플러그인을 겹쳐 쓰지 않는다.

이미지에 폭과 높이 속성이 있으면 브라우저가 로드 전 공간을 예약할 수 있어 화면 흔들림을 줄인다. CSS로 높이를 강제해 비율이 찌그러지지 않는지도 확인한다.

공개 후 검증

  • 360px 모바일 폭에서 가로 스크롤이 생기지 않는가
  • 이미지 속 글자가 확대 없이도 읽히는가
  • 대체 텍스트가 주변 문장과 중복되지 않는가
  • 캡션과 출처가 필요한 이미지에 표시됐는가
  • 링크가 깨지거나 미디어 첨부 페이지로 잘못 이동하지 않는가
  • 네트워크에서 원본보다 적절한 파생 크기를 받는가
  • 광고가 이미지 캡션이나 본문 의미와 혼동되지 않는가

기존 글은 방문이 많은 글부터 점검한다. 미디어 보관함의 모든 파일을 무작정 재압축하기 전에 백업하고, 본문에서 실제로 사용되는 크기와 URL이 바뀌지 않는지 작은 범위에서 시험한다.

참고 자료