웹사이트 이미지를 다루는 방법: 크기, 대체 텍스트, 검색 가독성

허브 분갈이를 설명하는 글에 사진 열 장을 넣고 모두 압축했더라도, 독자가 어느 사진에서 뿌리를 확인하고 어느 사진에서 흙을 더하는지 알지 못할 수 있습니다. 이미지 작업은 각 사진이 무엇을 설명해야 하는지에서 시작합니다. 크기, 설명, 다운로드 용량은 그 목적에 맞아야 합니다.

이미지 하나를 역할이 있는 작은 자료 묶음으로 생각해 보세요. 원본을 보관하고, 웹용 버전을 만들고, 쓰임을 설명한 뒤 실제 공개 페이지에서 어떻게 보이는지 확인합니다. 이렇게 하면 사이트를 개편하거나 도구를 바꾼 뒤에도 문제를 추적하기 쉽고, 이미지 검색 성과를 플러그인 점수 하나에만 맡기지 않게 됩니다.

이미지가 보탤 정보를 먼저 결정하기

이미지를 넣기 전에 그 이미지가 답할 질문을 한 문장으로 적습니다. 뿌리 확대 사진은 뿌리 덩어리가 지나치게 빽빽한지 보여주고, 완성 사진은 흙 표면과 화분 테두리 사이의 거리를 보여줄 수 있습니다. 같은 식물 사진 두 장이라도 글에서 하는 일이 다르므로 같은 파일 이름과 설명을 그대로 복사하지 않습니다.

이미지를 지우면 독자가 필요한 단계를 놓치게 된다면 중요한 정보는 글로도 이해할 수 있게 해야 합니다. 복잡한 흐름도는 본문에 절차와 조건을 적고, 작은 그림에 빼곡한 표기만으로 전체 안내를 대신하지 않습니다. 관련 문단 가까이에 이미지를 놓으면 사람과 검색 시스템이 맥락을 파악하는 데도 도움이 됩니다.

단순한 배경 무늬나 새로운 정보를 주지 않는 장식 이미지는 다르게 다룹니다. 모든 이미지에 키워드를 채워 넣어 혼란을 만들 필요는 없습니다. 먼저 정보 전달용, 기능용, 장식용 이미지를 구분하면 나중에 대체 텍스트를 쓸 때 일관된 기준을 적용할 수 있습니다.

표시 용도에 맞게 크기와 형식 내보내기

본문 영역의 너비, 휴대전화 화면, 확대해서 볼 필요를 확인한 뒤 내보낼 크기를 정합니다. 사진 원본은 페이지에서 필요한 것보다 훨씬 클 수 있지만 교육에 필요한 세부 요소가 흐려져서도 안 됩니다. 고품질 원본을 보관하고 별도의 웹용 버전에서 자르기, 해상도, 압축을 조절하면 나중에 다시 만들 수 있습니다.

사진, 투명한 그림, 글자가 든 화면 캡처에는 각각 적합한 형식을 시험해 봅니다. Google 이미지는 JPEG, PNG, WebP, AVIF, SVG 등을 지원하지만 지원한다는 사실이 모든 자료에서 그 형식의 용량이 가장 작다는 뜻은 아닙니다. 실제 파일 크기와 선명도를 비교하고 특히 화면 캡처의 작은 글자, 가장자리, 투명 배경, 색 변화에 주의합니다.

반응형 이미지는 여러 크기를 제공해 브라우저가 조건에 따라 고를 수 있게 합니다. Google은 표준 img 요소를 권장하며 srcset이나 picture를 쓸 때도 대체할 src URL을 제공하도록 안내합니다. CSS 배경에만 나타나는 그림을 Google 이미지 검색에서 색인할 수 있는 본문 이미지로 취급해서는 안 됩니다. 편집기의 작은 미리보기만 보지 말고 실제 출력을 확인하세요.

파일 이름과 대체 텍스트의 역할 나누기

업로드 전에 카메라의 연속 번호 대신 herb-root-check처럼 짧고 내용을 알아볼 수 있는 파일 이름을 사용합니다. 파일 이름은 단서를 줄 수 있지만 도시, 브랜드, 인기 검색어를 모두 쌓아 넣을 필요는 없습니다. 기존 사이트에서 이름을 바꾼다면 예전 참조도 처리해야 하므로 일괄 변경으로 이미지가 깨지지 않도록 합니다.

대체 텍스트는 현재 글에서 이미지가 갖는 의미를 설명합니다. 뿌리 사진에 '화분에서 꺼낸 뒤 뿌리가 화분 안쪽 벽을 따라 빽빽하게 감겨 있다'고 쓰면 사진을 볼 수 없는 사람도 이 단계를 이해할 수 있습니다. 같은 사진을 화분 판매 페이지에서 쓰면 설명의 초점은 달라질 수 있습니다. 이미지에 영원히 붙는 광고 문구가 아니며 '이것은 이미지입니다'로 시작할 필요도 없습니다.

W3C의 판단 방법은 기능과 장식도 다룹니다. 이미지만 있는 버튼은 동작이나 목적지를 표현해야 하고, 순수한 장식용 img에는 빈 alt 속성을 사용할 수 있습니다. 빈 값과 속성을 아예 빠뜨린 것은 다릅니다. 캡션은 모든 독자에게 보이는 보충 설명이며, 캡션을 썼다고 대체 텍스트까지 완성된 것은 아닙니다.

WordPress에서 페이지마다 이미지 필드 확인하기

이미지 블록으로 파일을 업로드하거나 미디어를 고른 뒤 해상도, 잘림 비율, 관련 문구를 확인합니다. WordPress 공식 문서에 따르면 블록 설정에서 바꾼 대체 텍스트는 해당 페이지나 글에만 적용되고, 미디어 라이브러리의 대체 텍스트는 이후 이미지를 넣을 때 기본값이 됩니다. 따라서 라이브러리를 갱신한 뒤에도 중요한 예전 글의 실제 출력을 살펴봅니다.

표시 너비만 줄였다고 다운로드 파일까지 작아진 것은 아닙니다. 공개 페이지를 열어 브라우저가 불러온 이미지 버전과 실제 파일 용량이 화면의 필요에 맞는지 확인합니다. 테마가 가로 사진을 정사각형으로 자른다면 뿌리, 손동작, 꼭 필요한 표시가 여전히 화면에 남는지도 살펴봅니다.

갤러리, 글 표지, 본문 블록은 설정이 서로 다른 곳에서 올 수 있으므로 따로 골라 확인합니다. 분갈이 글에서는 한 단계의 확대 사진, 전체 사진, 도표를 대표로 선택한 뒤 나머지 이미지도 같은 절차를 따르는지 점검할 수 있습니다. 홈 화면의 표지만 보고 미디어 라이브러리 전체가 준비됐다고 판단하지 않습니다.

1. 원본과 웹용 버전을 정리하고 용도, 크기, 자료 출처를 기록한다.
2. 이미지 블록에 넣고 화면에 맞는 해상도와 잘림 범위를 고른다.
3. 해당 페이지의 맥락에 맞춰 대체 텍스트를 쓰거나 장식 이미지임을 확인한다.
4. 공개 페이지에서 실제 이미지, 문구 필드, 휴대전화 표시를 확인한다.

Smush는 적은 양을 비교한 뒤 보조 도구로 사용하기

Smush 공식 플러그인 페이지에는 업로드 시 압축, 개별·일괄 처리, 지연 로딩 등이 나와 있으며 이미지 CDN 등은 Pro 기능으로 표시됩니다. 설치 전에 현재 버전과 요금제에 포함된 기능을 확인합니다. 호스팅 서비스나 다른 플러그인이 이미 이미지를 처리한다면 어느 단계의 책임이 어디에 있는지 먼저 정하세요.

복구할 수 있는 환경에서 대표 이미지 몇 장을 골라 처리 전후의 파일과 화면을 보관합니다. 설정 때문에 교육에 필요한 세부 요소가 사라지지 않는지 확인한 다음 일괄 처리를 검토합니다. 원본은 따로 백업하고 도구가 실제로 복원할 수 있는 범위도 확인하세요. '압축 완료'라는 메시지만으로 원본, 썸네일, 외부 파일까지 모두 되돌릴 수 있다고 믿어서는 안 됩니다.

플러그인의 압축률이 콘텐츠 검수를 대신할 수는 없습니다. 가는 뿌리가 사라지거나 화면 캡처의 글자가 읽기 어렵거나 도표의 선이 배경과 섞인다면 품질을 조정하거나 해당 이미지를 제외합니다. 압축 도구는 문단 안에서 사진이 갖는 의미도 결정하지 못합니다. 대체 텍스트와 캡션에는 편집 판단이 필요합니다.

게시할 때 읽기 쉬운지 확인하고 갱신 기록 남기기

독자가 본문을 따라가며 각 이미지를 이해할 수 있는지, 이미지 URL에 접근할 수 있는지, 필요한 정보가 너무 작은 글자에 숨지 않았는지 확인합니다. 잘리거나 누락되거나 휴대전화 화면 밖으로 넘치는 이미지는 구체적인 문제로 적습니다. '이미지 SEO가 나쁘다'만으로는 어디를 고칠지 알 수 없습니다.

자료 목록에 파일 이름, 사용한 글, 원본 위치, 출처 또는 직접 제작 기록, 내보낸 버전, 대체 텍스트를 보관합니다. 사용 허가를 받은 사진도 제작자, 허가 조건, 출처 링크를 남겨야 다음에 다시 만들 수 있는지 알 수 있습니다. 이 목록은 이미지 교체와 미사용 자료 삭제에도 도움이 됩니다.

작업을 마친 뒤 다운로드 용량, 시각적 품질, 검색 시스템의 이해 가능성을 따로 기록합니다. 이미지를 찾을 수 있다고 해서 색인이나 특정 순위가 보장되지는 않으며 파일이 작아져도 전체 페이지가 반드시 빨라지는 것은 아닙니다. 매번 수정한 이유와 결과를 남겨 다음에는 이미지, 레이아웃, 다른 로딩 자원 중 무엇을 바꿀지 판단합니다.

글 공유 카드에서 이미지가 어떻게 보이는지 확인하세요.

사이트의 테크니컬 SEO를 확인할 순서를 세우세요.

이미지를 크게 바꾸기 전에 WordPress 파일과 데이터를 백업하세요.

• 튜토리얼
• 앱·소프트웨어
• 마케팅·SEO
• SEO