검색 엔진 최적화 (Search Engine Optimization, SEO)는 블로그나 웹사이트가 검색엔진이 잘 식별하고 사용자의 검색결과에 대해 상위에 노출 시킬 수 있도록 하는 작업을 말한다. 많은 요소들이 포함되는데, 그 중 이미지 최적화는 온페이지 SEO (On-page SEO) 의 중요한 부분 중 하나이다. 블로그나 웹사이트의 이미지를 최적화하면 페이지 로드 속도를 개선하고 사용자 경험을 향상시키며 궁극적으로 검색 엔진 순위를 높이는 데 도움이 될 수 있다. 이미지 최적화가 왜 중요한지 어떻게 최적화 시킬 수 있는지 차근차근 알아보자.


  • 이미지 최적화의 중요성
  • 올바른 이미지 선택
  • 이미지 파일 형식
  • 이미지 크기 및 압축
  • 대체 텍스트 및 이미지 설명
  • 파일 이름 지정 및 구조화





이미지 최적화의 중요성


이미지 최적화는 웹사이트의 페이지 로드 속도를 개선하는 데 도움이 되므로 SEO에 중요하다.


사용자가 검색을 통해 관심있는 내용을 포함한 블로그 게시물이나 웹사이트를 클릭하고 들어갔을때 해당 블로그 게시물이나 웹사이트가 빠르게 로드되면 사용자 경험이 향상되고 이탈률이 감소하며 방문자가 사이트에 머무를 가능성이 높아진다.


많은 트래픽의 경향을 조사한 결과 로딩 속도에 문제가 있어 느리게 열리는 경우 검색자는 로딩이 다 될때까지 기다리는 대신 바로 뒤로가기를 누르고 다른 검색 결과를 선택하는 경향이 높다고 나타났다.


또한 최적화된 이미지는 검색 엔진 결과 페이지(SERP)에서 귀하의 웹사이트 순위를 높이는 데 도움이 되어 본인의 사이트에 대한 유기적 트래픽을 증가시킬 수 있다.





올바른 이미지 선택



A. 고품질의 관련 이미지 선택의 중요성


웹사이트용 이미지를 선택할 때 페이지의 콘텐츠와 일치하는 고품질 관련 이미지를 선택하는 것이 중요하다. 고품질 이미지는 시각적으로 매력적이며 방문자의 관심을 끌고 참여를 유지하는 데 도움이 될 수 있다. 콘텐츠와 밀접하게 관련된 이미지도 사용자 경험을 개선하는 데 도움이 될 수 있다.



B. 적절한 이미지를 찾는 팁


적절한 이미지의 가장 좋은 팁은 본인이 직접 촬영하는 것이다. 요즘은 누구나 휴대전화를 가지고 있고, 휴대전화의 카메라 성능은 날로 좋아지고 있다. 직접 촬영하고 적절하게 편집하는 것이 가장 추천할만한 팁이다.


직접 촬영할 수 없다면, Unsplash, Pexels, Shutterstock 과 같은 스톡 이미지 웹사이트에서 로열티 프리 이미지 ( royalty-free images) 를 검색하여 블로그 게시물이나 웹사이트에 적합한 이미지를 찾아서 사용할 수 있다.


또한, Canva, Adobe Creative Suite, Adobe Photoshop, Adobe Illustrator, inkscape 와 같은 웹툴이나 프로그램을 사용해 직접 그래픽을 디자인하고 나만의 독특한 이미지를 만들 수 있다.





이미지 파일 형식



일반적인 이미지 파일 형식: JPEG, PNG, GIF


JPEG, PNG 및 GIF는 널리 사용되는 이미지 파일 형식이며 각각 고유한 기능과 이점이 있다.

JPEG (Joint Photographic Experts Group)는 다양한 색상의 사진 및 이미지 에 이상적인 손실 이미지 압축 형식 ( lossy image compression format)이 다. JPEG 이미지는 품질 저하 없이 더 작은 파일 크기로 압축할 수 있으므로 웹 사용에 이상적이다.

PNG (Portable Network Graphics)는 투명한 배경의 그래픽, 로고 및 이미지에 이상적인 무손실 이미지 형식 ( lossless image format) 이다. PNG 이미지는 더 높은 품질과 투명도를 지원하지만 파일 크기가 더 커질 수 있다.

GIF (Graphics Interchange Format)는 애니메이션을 지원하는 압축 이미지 형식 ( compressed image format) 으로 간단한 그래픽 및 애니메이션에 적합하다. GIF 이미지는 최대 256색으로 제한되므로 JPEG 또는 PNG 이미지에 비해 품질이 떨어진다.

요약하면 JPEG는 사진에 가장 적합하고 PNG는 투명도가 있는 그래픽 및 이미지에 가장 적합하며 GIF는 단순한 그래픽 및 애니메이션에 가장 적합하다. 각 형식에는 각각의 장단점이 있으니 이미지의 사용 용도에 맞게 선택하면 된다.





이미지 크기 및 압축



A. 이미지 크기가 페이지 로드 속도에 미치는 영향


이미지가 크면 웹 사이트의 페이지 로드 속도가 느려져 사용자 경험에 부정적인 영향을 미칠 수 있다. 페이지 로딩 속도에 따른 사용자 경험의 변화를 살펴보자면,


  • 페이지 로딩에 1초가 지연되면 페이지 조회수가 11% 감소한다.
  • 페이지 로딩에 1초가 지연되면 고객 만족도가 16% 감소한다.
  • 페이지 로딩에 1초가 지연되면 전환율이 7% 감소한다.
  • 웹사이트 로딩 시간이 1~3초라면 이탈률은 32%이다



이와 같은 영향 때문에 가능하면 이미지 크기를 줄이고 압축하여 웹 환경에 최적화된 이미지를 사용하는 것이 중요하다.



B. 적당한 이미지 크기


블로그 게시물이나 웹사이트의 이미지를 최적화할 때 데스크톱 모니터와 휴대폰을 포함하여 방문자가 사용할 수 있는 장치의 화면 크기와 해상도를 고려하는 것이 중요하다. 일반적으로 데스크톱 모니터의 표시 영역 너비는 1280px (픽셀) 이상이고, 태블릿 장치의 경우 640px, 모바일 휴대기기의 표시 영역 너비는 320px이하이다. 휴대기기에서 너무 작은 사이즈의 이미지는 해상도가 떨어지기 때문에 적어도 가로 600px 이상의 이미지를 사용하는 것이 적당하다.


C. 품질 저하 없이 이미지를 압축하는 팁


Adobe Photoshop, ImageOptim 또는 TinyPNG와 같은 도구를 사용하여 품질 저하 없이 이미지를 압축할 수 있다. 포토샵을 이용하여 이미지를 편집한 후, 저장 옵션에서 " Save for Web tool"을 선택해 저장하면 웹에서 사용할 수 있도록 압축된 형태의 파일로 저장할 수 있다.





대체 텍스트 및 이미지 설명



A. SEO를 위한 대체 텍스트 및 이미지 설명의 중요성


대체 텍스트 (alt text), 또는 대체 속성 (alt attribute), 대체 설명 (alt description),은 이미지 콘텐츠에 대한 정보를 검색 엔진에 제공하는 HTML속성이다. 이 정보는 이미지가 이미지 검색 결과에 표시되거나 스크린 리더가 해당 이미지 내용을 이해하는데 도움을 줘 블로그나 웹사이트의 전반적인 SEO를 개선하는 데 도움이 될 수 있다.


시각장애인을 위한 스크린 리더 검색 결과 제공에서 이미지 부분은 alt tag를 바탕으로 제공하기 때문에 구글 검색엔진에서 특히 중요하게 여긴다.



B. 효과적인 대체 텍스트 및 이미지 설명 작성을 위한 팁


대체 텍스트 및 이미지 설명을 작성할 때 이미지의 내용을 명확하고 간결하게 설명해야 합니다.

좋은 대체 텍스트를 작성하기 위한 아래 몇 가지 팁들을 참고하자.

  • 이미지를 구체적이고 간결하게 설명한다.
  • 이미지가 콘텐츠와 어떤 관련이 있는지 설명하는 컨텍스트를 추가한다.
  • 대체 텍스트를 짧게 유지한다 (125자 미만).
  • "이미지" 또는 "사진"은 중복되므로 사용하지 않는다.
  • 키워드 사용을 제한하고 키워드만으로 이미지 설명을 채우지 않는다.
  • 정보가 중복될 수 있으므로 이미지 캡션 또는 제목을 복사하지 않는다.
  • 맞춤법 오류 및 문법 오류를 확인한다.
  • 이미지를 정확히 설명하지 않는 불필요한 수식어를 제외한다.


블로그 이미지에 대체 텍스트를 추가하려면 <img> 태그 내에 "alt"라는 HTML 속성을 사용해야 한다. 예를 들어: <img src=“example.jpg” alt=“한 잔의 커피를 들고 웃고 있는 여성”> "alt" 속성의 값은 대체 텍스트에 해당한다. 블로그 플랫폼마다 이 속성을 추가하는 방법이 다를 수 있다.


티스토리의 경우 이미지를 삽입하고 이미지를 클릭하면 뜨는 팝업메뉴의 가장 오른쪽 톱니바퀴 모양을 선택해 "대체 텍스트 삽입"이 가능하다. 이미지 아래의 "이미지를 설명해 보세요"에 작성한 내용은 "caption"으로 설정된다.


구글 블로그스팟의 경우도 이미지를 삽입하고 이미지를 클릭하면 이미지 하단에 뜨는 팝업메뉴의 가장 오른쪽 톱니바퀴 모양을 선택해 이미지 제목과 대체 텍스트 작성이 가능하다.





파일 이름 지정 및 구조화



A. 파일명과 구조가 SEO에 미치는 영향


파일 이름과 구조는 검색 엔진에 이미지 콘텐츠에 대한 정보를 제공하기 때문에 SEO에 영향을 줄 수 있다. 잘 구조화된 파일 이름과 디렉토리는 블로그나 웹사이트를 보다 체계적이고 탐색하기 쉽게 만드는 데 도움이 될 수 있다.



B. 파일 이름 및 구조 최적화를 위한 팁


파일 이름을 최적화할 때 이미지 내용을 정확하게 반영하는 설명이 포함된 이름을 사용하는 것이 중요하다. "image1.jpg" 또는 "picture1.png"와 같은 일반적인 이름은 검색 엔진이 이미지를 인식할 수 있는 정보를 제공하지 않으니 사용하지 않는 편이 좋다. SEO에 적합한 이미지 파일 이름은 단어 사이에 대시(-)를 포함하고, 사진과 관련이 있고, 가능한 한 짧고, 키워드가 아닌 이미지 고유의 설명이 좋다. 예를 들어: rustic-wedding-barn-1.jpg smiling-woman-coffee.jpg blue-sky-clouds.jpg

소박한-결혼식-헛간-1.jpg 미소짓는-여자-커피.jpg 푸른-하늘-구름들.jpg

이와 같은 파일 이름 설정은 검색 엔진이 게시물에 사용된 이미지가 무엇인지 잘 인식할 수 있도록 하고 사이트를 더 잘 색인화하는 데 도움이 된다.






이상 온페이지 SEO의 중요한 부분인 이미지 최적화에 대해 알아봤다. 블로그나 웹사이트에서 이미지 최적화가 페이지 로드 속도 개선, 사용자 경험 개선, 검색 엔진 순위 향상에 도움이 될 수 있다.


고품질의 관련 이미지를 선택하고, 적절한 파일 형식을 선택하고, 이미지를 압축하여 크기를 줄이고, 효과적인 대체 텍스트 및 이미지 설명을 작성하고, 설명이 포함된 파일 이름과 잘 구성된 디렉토리를 사용하자. 전문적인 기술이 필요한 내용이 아닌 간단한 팁들이니 이를 잘 활용해 블로그 게시물이나 웹사이트를 작성한다면 구글SEO에 맞는 글을 쓰고 구글 검색 상위 노출을 노려볼 수 있다.