검색 엔진에 맞도록 웹 이미지 최적화 하기

네이버의 검색 비중이 높은 우리나라는 이미지 검색 비율이 상대적으로 낮지만, 전세계 적으로는 구글 이미지 검색 비율이 전체 검색 쿼리에서 약 20%의 비율을 차지합니다.

이 비율은 큰 변동 없이 계속 유지되고 있기 때문에 글 내용에 사용한 이미지들, 특히 사용한 이미지가 주제가 있는 경우 검색이 잘 되도록 최적화를 잘 하면 이미지를 통해 유입되는 방문자를 20%는 늘릴 수 있습니다.

구글 검색 엔진은 검색을 위해 이미지 최적화를 별도로 하지 않아도 검색된 이미지를 AI를 통해 분석해 특정 주제의 키워드를 부여할 수 있는 이미지인 경우, 인덱싱을 해서 검색 결과에 노출을 해주기도 합니다.

반대로, 이미지가 주제 판별이 안되거나 키워드로 분류를 할 수 없는 경우 검색 노출이 거의 되지 않게 됩니다.

검색엔진 검색 쿼리 비율 - 출처 Statista

이미지를 글에 포함할 때 검색 엔진에 이미지가 잘 노출될 수 있도록 몇가지 검색 최적화 방법을 사용해 검색 노출 빈도를 높일 수 있습니다.

1. 이미지 파일 크기 최적화

JPEG, PNG 파일 최적화는

  1. 파일 크기를 최적화 해서 더 작게 만드는 것
  2. 웹 브라우저에서 이미지가 로딩되는 속도 최적화

2가지가 있습니다.

- 파일 크기 최적화

이미지를 더 작게 최적화를 하는 것은 사용자 경험의 측면이 강하기 때문에 어느 정도까지 압축을 해야 하는지는 전적으로 사용자의 몫입니다.

웹에서 사용하기에 적합한 JPEG 이미지의 압축은 70~80 정도의 압축율을 권장하며, 가독성이 크게 중요하지 않은 이미지일 경우 60-70 까지 압축율을 올려도 괜찮습니다. 구글 검색 엔진은 빠르게 로딩되는 웹페이지와 이미지를 선호하며, 검색 결과에 유리하도록 지수를 부여합니다.

가독성에 문제가 없을 경우 70이하의 압축율을 사용하는 것이 구글 검색 엔진의 검색 결과에는 조금이라도 더 유리하게 작용합니다.

대부분의 이미지 편집 프로그램은 JPEG 이미지 저장시 사용자가 압축율을 선택할 수 있는 옵션을 제공합니다.

JPEG 이미지의 압축율은 숫자가 작을 수록 압축이 더 많이 되며, 이미지에 손상이 더 많이 가게 됩니다. 보통 60이하로 품질을 낮추면 이미지가 뭉개져 보이는게 눈에 많이 띄게 됩니다.

윈도우10 그림판에서 저장한 이미지는 구글 검색에 좋지 않습니다.

그림판은 압축율을 별도로 지정할 수 없으며, 그림판에서 저장한 JPEG 이미지는 압축율이 100으로 저장되기 때문에 이미지 파일 크기가 상당히 큽니다.

별도의 이미지 편집 프로그램을 사용하지 않는 다면 웹 이미지 최적화를 해주는 온라인 서비스를 이용하는 것을 추천합니다. "티니PNG" 서비스는 JPEG와 PNG 이미지의 화질을 최대한 유지해주면서 최대한 압축된 이미지를 생성해주는 서비스로 유명합니다.

tinypng.com/

 TinyPNG – Compress PNG images while preserving transparencyMake your website faster and save bandwidth. TinyPNG optimizes your PNG images by 50-80% while preserving full transparency!tinypng.com

워드프레스는 이미지 압축 및 지연 로드(Lazy load)를 지원하는 다앙한 플러그인들이 있어 플러그인을 설치해 활성화만 해주면 검색 엔진에 최적화 된 이미지를 표시할 수 있습니다. 대표적인 이미지 압축 및 지연 로드 플러그인으로  smush 가 있습니다.

wordpress.org/plugins/wp-smushit/

 Smush – Lazy Load Images, Optimize & Compress ImagesCompress images & optimize images with lazy load, WebP conversion, and resize detection to make your site load amazingly fast.wordpress.org

- 웹 브라우저 이미지 로딩 속도 최적화

JPEG 이미지는 이미지 포맷에서 "프로그레시브" 옵션을 지원합니다. 프로그레시브는 이미지 전체가 다운로드 되지 않은 상태에서도 이미지 일부, 또는 저해상도의 이미지를 미리 보여주는 기능으로, 사용자 경험 측면에서 굉장히 효과적이며, 느린 회선, 특히 모바일 접속 환경에서 이미지 다운로드가 완료되기 전에 사용자가 글의 컨텐츠를 파악하는데 도움을 줍니다.

웹 용으로 이미지를 저장할 경우 프로그램의 JPEG 포맷 저장 옵션에 "프로그레시브(Progressive)" 옵션이 있는지 확인을 해서 옵션 체크를 꼭 하도록 하는 것이 좋습니다.

JPEG 포맷 저장 옵션중 "프로그레시브(Progressive)" 옵션

2. 이미지 태그의 대체 문구를 표시하는 "alt" 속성에 이미지 관련된 키워드 사용

구글 검색은 대체문구 표시 속성인 "alt", 또는 "data-alt" 속성을 중요하게 생각합니다. 이미지가 없을 경우 표시되는 대체 문구는 이미지를 설명해주는 텍스트 내용이기 때문에 이미지와 직접 관련이 있는 문구, 또는 내용이라고 판단합니다.

이미지를 글에 표시할 때 대체 문구 속성에 이미지와 관련된 텍스트 내용을 표시하면, 이미지 검색 결과를 표시할 때 대체문구에 있는 키워드를 기준으로 이미지를 표시해줍니다.

대부분의 블로그 플랫폼, 또는 워드프레스는 캡션 내용을 작성하면 "alt", "data-alt" 속성에 캡션 내용을 표시해줍니다.

티스토리는 이미지 캡션을 입력하면 캡션(<figcaption>) 내용을 "data-alt" 태그에 함께 표시해 줍니다.

이미지에 캡션을 사용한 티스토리 이미지 태그 소스

3. 이미지 캡션에 이미지에 대한 설명, 또는 키워드 작성

캡션에 이미지에 대한 설명을 다는 것은 매우 중요합니다.

구글 검색 엔진은 캡션에 입력된 내용을 이미지와 관련이 있는 문구로 이해하며, 이미지 검색을 할 때 이미지와 관련된 키워드로 캡션에 입력된 내용을 우선 매칭합니다.

블로그 플랫폼 대부분이 캡션을 작성하면 대체 문구 속성인 "alt", "data-alt" 속성에 캡션을 자동으로 입력해 주기 때문에 대체 문구 표시를 위해 별도의 작업을 하지 않아도 됩니다.

4. 이미지 파일 명을 글의 주제와 관련된 파일명으로 사용

구글 검색은 이미지 파일명도 이미지 검색의 중요한 키워드로 사용하며, 이미지 검색시의 키워드로 파일명 또한 인덱싱을 합니다.

글에 이미지를 붙일 때 아무런 관련이 없는 파일명을 사용하기 보다는 글의 주제와 관련이 있는 이미지 파일명을 사용하는 것이 이미지 검색시 우선 노출될 가능성이 높습니다.

대부분의 블로그 플랫폼이 이미지 서버를 별도로 운영하기 때문에 글에 붙인 이미지는 임의의 파일명으로 이미지 서버에 저장됩니다. 실제 이미지 서버에 저장된 파일과 별개로 대부분 블로그 플랫폼이 업로드한 이미지 파일명을 "data-" 속성 등을 이용해 별도로 HTML 이미지 태그, 또는 피규어 태그를 사용해 표시를 하기 때문에 원래의 이미지 파일명에 대한 정보는 사라지지 않고 남아있게 됩니다.

5. 구글 검색 콘솔로 내 사이트의 이미지 검색 비중을 알기

구글 검색 콘솔을 사용하면 내 사이트에 이미지 검색을 통해 유입이 얼마나 들어오는지 확인할 수 있습니다.

실적 그래프 화면에서 상단의 "검색 유형: 웹" 을 클릭하면 검색 유형을 필터링 할 수 있는 선택 대화상자가 표시됩니다.

"이미지" 를 선택한 후 "적용" 을 누르면 이미지 검색 유입 량만 실적 그래프로 확인할 수 있습니다.

구글 애널리틱스 이미지 검색 유형 옵션 선택

검색 유입 중 이미지 검색 유입 비중이 5% 미만일 경우, 이미지 검색을 통한 유입이 현저히 낮은 것이므로 이미지를 통한 검색 유입을 늘릴 수 있도록 최적화를 통한 개선이 필요합니다.