• 주요 최적화 방법으로는 적절한 파일명 지정, 대체 텍스트 추가, 이미지 압축, 크기 조정 등이 있습니다.
• 이미지 최적화를 통해 구글 이미지 검색과 일반 검색 결과에서 노출 기회를 높일 수 있습니다.
혹시 웹사이트 이미지가 페이지 속도를 늦추고 있지는 않나요? 수많은 이미지를 열심히 올렸는데, 검색 결과에는 잘 나타나지 않아 고민이신가요? 아마 많은 분들이 겪고 계신 문제일 겁니다.
하지만 걱정하지 마세요. 오늘 설명 드릴 이미지 최적화로 이 문제를 해결하고, 사이트 속도도 높이고, 이미지 순위를 올릴 수 있습니다.
이미지 SEO(최적화)란?
이미지 SEO는 웹사이트의 이미지를 최적화하여 페이지와 이미지가 구글 결과에서 더 높은 순위에 오를 수 있도록 하는 작업입니다.
일반적인 이미지 SEO 전략은 다음과 같습니다:
- 이미지 크기 조정 및 압축
- 파일 이름을 이미지에 대한 설명으로 지정
- 이미지에 대체 텍스트(alt text) 추가
이미지 SEO는 구글과 같은 검색엔진이 이미지를 더 쉽게 찾고 이해할 수 있도록 만듭니다. 즉, 검색 키워드에 대해 이미지(및 해당 이미지가 있는 페이지)가 표시될 가능성이 높아집니다.
최적화된 이미지는 로드 속도도 빨라집니다.
검색결과에서 이미지의 위치
이미지 SEO의 주요 이점 중 하나는 이미지가 검색엔진 결과 페이지에서 나타나게 되어 사용자들로부터 가치 있는 클릭을 유도할 수 있다는 점입니다.
많은 사용자가 구글 이미지로 바로 이동합니다. 다음과 같은 결과를 얻기 위해서입니다:
또한 구글 렌즈 검색은 매달 수십억 번 이루어집니다. 구글 렌즈는 사람들이 카메라나 이미지를 사용해 시각적 검색을 할 수 있는 앱입니다.
그리고 다음과 같은 결과를 제공합니다:
구글 렌즈 이미지 검색 결과에서 유사한 모습의 apricot roses(살구 장미)가 표시됩니다. 또한 구글은 일반 검색 결과에서도 이미지를 보여줍니다.
2024년 4월 29일 Semrush Sensor에 따르면 미국의 표준 SERP 중 55.62%가 이미지 팩을 포함하고 있었습니다.
예시:
다음 이미지 SEO 사례를 참고하여 적용하면 구글 검색 결과에서 상단에 노출될 확률이 높아집니다.
이미지 최적화(SEO)하는 방법
대표 오프페이지 SEO 요소
1. 유용한 이미지 찾기 또는 제작하기
이미지 최적화의 첫 번째 단계는 목적에 맞는 이미지를 제작하는 것입니다.
예를 들어:
- 사진은 제품을 보여주거나 콘텐츠의 가독성을 위해 문단을 나누는 역할
- 그래픽 디자인은 추상적인 아이디어를 전달 가능
- 차트와 그래프는 복잡한 데이터를 표시 가능
- 아이콘은 웹사이트 탐색과 사용성을 개선
- 로고는 브랜드 아이덴티티를 강화
- 스크린샷은 명확한 지침과 예시를 제공
스톡 이미지를 사용하는 대신 직접 이미지를 만드는 것이 좋습니다. 그래야 사용자들의 반응이 더 좋고, 구글이 더 높게 순위 매길 수 있습니다. 또한 스톡 이미지는 다른 나 뿐만 아니라 다른 사람들도 똑같이 이용할 수 있습니다.(중복 문제)
만약 다른 사람이 만든 이미지를 사용한다면, 저작권과 관련하여 문제 없이 사용할 수 있는지 꼭 확인하세요.
2. 적절한 이미지 형식 선택하기
이미지 파일은 다양한 형식으로 저장하거나 변환할 수 있습니다.
SVG 확장자는 아이콘과 로고에 가장 적합합니다. SVG는 품질 손실 없이 크기를 조정할 수 있으며, JavaScript나 CSS(웹사이트 코딩 언어)로 조작할 수 있기 때문입니다.
WebP는 로고와 아이콘을 제외한 다른 종류의 이미지들에 가장 적합한 형식 중 하나입니다. 이유는 다음과 같습니다:
- 주요 검색엔진, 인터넷 브라우저, 소셜 미디어 사이트에서 지원(일부 오래된 브라우저/시스템에서는 지원되지 않음)
- 다른 형식보다 일반적으로 더 작은(따라서 더 빠르게 로드되는) 파일 생성
- 투명도와 애니메이션 지원
- 손실 및 무손실 압축 사용(파일 크기와 이미지 품질 간의 균형을 유지)
하지만 SVG와 WebP 이미지는 제작과 관리에 어려울 수 있습니다.
따라서 SVG와 WebP 사용이 어렵다면, 가장 좋은 대안은 다음과 같습니다:
- 표준 이미지에는 JPEG
- 투명도, 텍스트, 또는 세부 사항이 많은 이미지에는 PNG
- 간단한 애니메이션에는 GIF
3. 이미지에 설명적인 파일 이름 지정하기
구글은 이미지 파일 이름으로 이미지가 무엇을 묘사하고 있는지 이해합니다. 따라서 이미지 파일명을 간결한 이미지에 대한 설명으로 설정하는 것이 좋습니다.
예를 들어:
✅ 애플-아이폰-15-핑크색-측면-사진.jpg
❌ 애플-아이폰-15-최신-모델-비브란트-핑크-컬러-측면-카메라-렌즈-부분과-버튼-2024-버전.jpg
❌ IMG00353.jpg
콘텐츠의 번역된 페이지들에서 동일한 이미지를 사용할 경우, 파일 이름을 그에 맞게 업데이트해야 합니다.
예를 들어, 스페인어 페이지에서는 파일 이름을 iphone-apple-15-rosa-vista-lateral.jpg로, 한국어 페이지에서는 애플-아이폰-15-핑크.jpg와 같이 설정하면 됩니다.
4. 대체 텍스트(Alt Text) 추가하기
대체 텍스트(Alt Text)란?
대체 텍스트(alt text)는 웹페이지 코드에 저장된 이미지에 대한 설명입니다.
이미지의 대체 텍스트는 다음과 같이 작성합니다.
<img decoding="async" src="image-file-example.jpg" alt="대체 텍스트는 여기에 입력">
대체 텍스트는 주로 접근성을 위해 사용됩니다. 텍스트-음성 변환 도구가 이 설명을 소리 내어 읽어 시각 장애인이 이미지로 전달되는 내용을 알 수 있도록 합니다.
또한 페이지가 제대로 로드되지 않거나 로드가 느릴 때 표시됩니다.
이미지 대신, coolife spinner carry on luggage라는 대체 텍스트와 함께 찢어진 이미지 아이콘이 표시됩니다.
하지만 대체 텍스트는 이미지 검색엔진 최적화(SEO)에도 유용합니다. 검색엔진이 대체 텍스트를 사용해 이미지가 무엇을 묘사하는지 더 잘 이해하기 때문입니다.
다음은 대체 텍스트에 대한 가이드입니다:
- 기능적인 이미지만 대체 텍스트를 작성하고, 장식적인 이미지(예. 화살표, 디자인을 위한 단순 도형 등)는 제외합니다. 그러지 않는다면, 소리로 이미지에 대한 묘사를 듣는 시각 장애인들에게 방해가 될 수 있습니다.
- 동일한 차트 2장을 다른 요점을 설명하는 데 사용할 경우, 각 경우에 대해 다른 대체 텍스트를 사용해 요점을 명확히 설명.
- 최대 길이를 125자로 제한.(일부 보조 기술은 이 길이에서 대체 텍스트 읽기를 중단)
- 모든 독자가 알아야 할 내용이 있다면, 본문 콘텐츠나 이미지 하단의 캡션에 작성(대체 텍스트에 넣지 말고, 모두가 접근할 수 있도록).
- 대체 텍스트에 “~에 대한 사진”과 같이 “이미지” 또는 “사진”과 같은 표현은 피하기. 대체 텍스트가 이미지를 가리킨다는 것은 이미 명백하기 때문.
5. 이미지 크기 조정
이미지를 더 작은 크기로 조정하면 로딩 시간을 줄이는 데 도움이 됩니다.
일반적으로 웹사이트 이미지는 2,500픽셀보다 넓을 필요가 없습니다.
하지만 특정 이미지에 필요한 최대 크기는 다음과 같은 요소에 따라 달라집니다:
- 컨테이너의 최대 너비: 이미지가 웹 디자인에서 레이아웃을 관리하는 데 사용되는 컨테이너에 배치된다면, 컨테이너의 최대 크기보다 커서는 안 됩니다.
- 이미지의 목적: 예를 들어, 사용자가 세부 사항을 확대해서 명확히 볼 수 있도록 큰 제품 사진이 필요한 경우. 하지만 썸네일은 작아도 괜찮습니다.
- 방문자의 기기: Google Analytics 4(Google Analytics 가이드)를 사용해 방문자가 사용하는 화면 해상도를 확인하면, 지원해야 할 크기를 알 수 있습니다.
이미지 크기는 포토샵에서는 조정할 수 있습니다.
그리고 워드프레스를 사용하신다면, 업로드한 이미지를 자동으로 조정하는 웹사이트 플러그인(Resize Image After Upload])을 사용할 수도 있습니다.
하지만 플러그인은 사이트 속도에 영향을 줄 수 있고, 포토샵 또한 복잡하게 느끼실 수도 있습니다.
그런 경우 photopea가 간편한 대안이 될 수 있습니다.
6. 이미지 압축
다양한 도구와 플러그인을 사용하면 이미지를 압축할 수 있습니다. 즉, 원하는 이미지 품질을 유지하면서 이미지 파일 크기를 줄이는 것입니다.
예를 들어:
7. 반응형 이미지 사용
반응형 이미지 크기 조정은 웹사이트 이미지가 사용자의 뷰포트(화면에서 웹페이지를 보여주는 부분) 크기에 따라 자동으로 조정되는 것을 의미합니다.
이미지가 너무 보기 어려워지는 것을 방지하기 때문 이는 모든 종류의 기기에서 좋은 사용자 경험을 보장하는 데 도움이 됩니다 (예: 모바일에서 너무 크거나 데스크톱에서 너무 작음).
따라서 반응형 이미지 크기는 이미지가 필요 이상으로 커지지 않도록 하여 로딩 시간을 최소화합니다.
아래는 반응형 이미지 크기 예시입니다.
이미지를 반응형으로 만들기 위해서는 CSS를 사용하면 됩니다.
일부 웹사이트 제작 도구(예: Wix)는 기본적으로 반응형 이미지 크기 조정을 사용합니다. 그렇지 않은 경우에는 적합한 플러그인이나 웹 개발자의 도움을 받아야 합니다.
8. Lazy load 구현
Lazy load란?
Lazy load는 사용자의 뷰포트에 콘텐츠가 표시될 때까지 해당 콘텐츠가 로드되지 않도록 하는 것을 의미합니다. 따라서 페이지 하단에 있는 이미지는 사용자가 스크롤하지 않으면 로드되지 않습니다. 웹페이지 속도 상승에 도움이 됩니다.
이는 초기 로드 시간이 페이지 상단의 콘텐츠(사용자가 스크롤하기 전에 보는 페이지 부분, 즉 “Above the fold”)에만 영향을 주어 더 빠르게 만듭니다.
<img decoding="async" src="image-file-example.jpg" loading="lazy" alt="대체 텍스트는 여기에 입력">
Lazy load를 구현하는 가장 쉬운 방법은 이미지 태그에 다음과 같이 loading=”lazy” 속성을 추가하는 것입니다.
9. 이미지 사이트맵 생성
이미지 사이트맵은 이미지 전용으로 제작된 XML 사이트맵입니다.
다시 말해, 검색엔진이 크롤링하고 인덱싱(즉, 찾아서 검색 결과 데이터베이스에 추가)하기를 원하는 이미지를 나열한 특수 형식의 파일입니다.
이미지 사이트맵을 생성하면 검색엔진 봇이 사이트를 크롤링할 때 중요한 이미지를 놓치지 않도록 보장하는 데 도움이 됩니다.
구글은 이미지 사이트맵을 다음과 같이 구조화할 것을 권장합니다:
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
<url>
<loc>[웹사이트의 웹페이지 URL]</loc>
<image:image>
<image:loc>[이 웹페이지의 이미지 URL]</image:loc>
</image:image>
<image:image>
<image:loc>[이 웹페이지의 다른 이미지 URL]</image:loc>
</image:image>
</url>
<url>
<loc>[웹사이트의 다른 웹페이지 URL]</loc>
<image:image>
<image:loc>[이 웹페이지의 이미지 URL]</image:loc>
</image:image>
</url>
</urlset>
10. CDN(Content Delivery Network) 사용
CDN(Content Delivery Network)은 이미지를 전 세계 여러 서버에 저장할 수 있게 합니다.
따라서 매번 본 서버에서 전송되는 대신, 방문자에게 “가장 가까운” 서버에서 이미지가 전송되기 때문에 로딩 속도가 빠릅니다.
데이터가 미국 서버에서 호주 사용자에게 전송되는 데 3초가 걸리지만, 아프리카 서버에서는 1초가 걸림
이미지에 CDN을 구현하려면 다음 단계를 따라야 합니다:
- CDN 제공업체 선택(예: Cloudflare 또는 Amazon CloudFront)
- CDN을 웹사이트에 통합(예: 플러그인을 통해)
- 이미지를 CDN에 업로드
- DNS 레코드를 업데이트하여 이미지 요청이 CDN을 통해 처리되도록 설정
- 웹사이트 HTML(및 이미지 사이트맵)을 수정하여 새로운 이미지 URL을 참조하도록 변경
이 작업 개발 지식 없이 하기엔 조금 복잡합니다. 따라서 웹 개발자에게 도움을 요청하는 게 좋습니다.
11. 캐싱 활성화
브라우저 캐싱은 방문자의 브라우저가 특정 파일(예: 이미지)을 지정된 기간 동안 저장하여, 다시 요청될 경우 더 빠르게 로드할 수 있도록 하는 기능입니다.
예를 들어, 새로운 사용자가 홈페이지를 방문한다고 가정해 봅시다:
– 사이트 로고가 365일 동안 캐싱되어 있다면, 사용자가 사이트의 다른 페이지로 이동하거나 다음 해에 웹사이트를 다시 방문할 때 로고가 더 빠르게 로드됩니다.
– 반면, 사이트 로고가 캐싱되지 않았다면, 브라우저는 매번 이미지를 다시 다운로드해야 합니다. 이는 서버가 처리해야 하는 요청 수를 증가시킵니다.
일반적으로 이미지는 자주 업데이트되지 않기 때문에 오랜 기간 캐싱할 수 있습니다.
구글 Lighthouse를 사용하면 사이트의 이미지가 얼마간의 기간 동안 캐싱되고 있는지 확인할 수 있습니다.
크롬 확장 프로그램을 설치한 후, Lighthouse Viewer 옵션을 선택하여 특정 웹페이지를 분석할 수 있습니다.
12. 오픈 그래프 메타 태그(Open Graph Meta Tag) 최적화
오픈 그래프 메타 태그를 사용하면 SNS나 카카오톡에서 페이지가 공유될 때 최적의 미리보기가 표시되도록 할 수 있습니다.
이때 설정이 꼭 필요한 네 가지 속성이 있습니다:
- og:title: 미리보기에 나타날 제목을 지정
- og:type: 객체의 유형을 지정(예: “article”)
- og:image: 미리보기에 사용할 이미지의 URL을 지정
- og:url: 페이지의 URL을 지정
또한 다양한 종류의 태그를 추가할 수도 있습니다.
예를 들어, 마케팅 엑시트 홈페이지는 다음과 같은 오픈 그래프 태그를 사용합니다:
<meta property="og:url" content="https://marketingexit.com/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="구글 SEO는 선택이 아니라 필수입니다 - Marketing EXIT \| 마케팅 엑시트" />
<meta property="og:description" content="SEO 전문 업체 마케팅 엑시트 입니다. 어떻게 하면 광고비를 줄이고 매출을 폭발적으로 늘릴 수 있을까요? 검색엔진최적화로 가능합니다! 구글SEO업체, 사이트상위노출, 구글상위노출, 구글상위작업, 구글상위작업방법, 구글SEO업체 EXIT와 함께하세요!" />
<meta property="og:image" content="https://marketingexit.com/wp-content/uploads/2021/10/cropped-dsd-1-1.png" />
<meta property="og:image:width" content="512" />
<meta property="og:image:height" content="512" />
페이스북에서 링크를 공유하면 다음과 같이 표시됩니다:
만일 워드프레스를 사용하신다면, Yoast SEO와 같은 플러그인에서 손쉽게 설정할 수 있습니다.
