SEO를 위한 이미지 최적화 방법

 최적화되지 않은 이미지는 사이트 속도를 늦추고 방문자로하여금 스토어에서 멀어지게 만듭니다. 한 연구에 따르면 전자상거래 사이트가 예상보다 느리게 로드되는 경우 방문자의 45% 이상이 구매를 하지 않고 이탈한다고 합니다. 이미지 최적화는 구글 이미지를 통해 잠재고객을 유치하기 위한 목적부터 사이트 로드 시간을 줄이는 것까지 영향을 끼칩니다. 제품 사진은 온라인 스토어의 가장 기본적인 요소이기때문에 성공적인 웹사이트를 구축하는 데 최적화 작업은 반드시 필요합니다.

•  - 구글 이미지 검색에서 내 사이트의 제품사진들이 표시되지 않는 이유를 알고 있나요?
•  - alt 태그를 추가하는 방법을 알고 있나요? 어떤 이미지에 alt 속성을 추가해야 할까요?
•  - JPEG, GIF, PNG의 차이점을 알고 있나요? 

 위 질문에대해 명확한 해답을 갖고 있지 않다면 아래 가이드를 참고하시기 바랍니다.

 

 

이미지 최적화란?

이미지 최적화는 이미지의 품질을 저하시키지 않으면서 파일 크기를 최대한 줄여 페이지 로드 시간을 낮게 유지하는 것입니다. 최적화를 하는 주된 이유는 제품 이미지와 사이트의 다른 이미지들이 구글 및 기타 검색엔진의 이미지 검색에서 상위에 노출될 수 있도록 하여 잠재고객의 방문을 높이기 위함입니다.

 

 

이미지 최적화 기술

 

1. 간결하고 직접적인 파일명 사용

 이미지 SEO( 검색엔진에서 웹페이지 순위를 높이는 것)를 위해 이미지와 관련된 키워드들을 파일명 지정시 추가하는 것이 좋습니다. 이미지를 잘 설명하면서도 키워드가 풍부한 파일명을 만드는 것은 이미지 최적화에 매우 중요합니다. 검색엔진은 웹페이지의 텍스트를 크롤링할 뿐만 아니라 이미지 파일명도 크롤링하기때문에 사이트에서 사용하는 모든 이미지에는 관련 키워드를 넣어 파일명을 지정하세요.

 아래의 머스탱 이미지 파일명을 정할 때 카메라가 자동 지정하는  DCMIMAGE1.jpg 과같은 이름을 그대로 사용하지 마세요. 2012-Ford-Mustang-LX-Red.jpg 와같이 설명을 넣어 키워드와함께 파일명을 지정하는 것이 좋습니다. 

 

 

*참고: 관련 키워드가 떠오르지 않을 때에는 검색엔진의 자동완성 기능을 활용하여 (고객의 키워드 패턴/관련성) 파일명으로 사용하는 것도 좋은 방법이 될 수 있으니 활용해보세요.

 

 

 

 

2. alt 태그를 사용하여 최적화

 alt 태그란 브라우저가 이미지를 제대로 렌더링할 수 없을 때 이미지를 대체하는 텍스트를 뜻합니다. alt 태그는 웹접근성뿐만아니라 렌더링된 이후 이미지 위로 마우스를 오버했을때 alt 태그가 표시되게 되도록 하는데에도 사용되며, SEO 값을 추가하기도 합니다. 웹사이트의 이미지에 관련 키워드를 포함하는 적절한 대체 속성을 추가하면 검색 엔진에서 순위를 높이는 데 도움이 됩니다. 사실 alt 태그를 사용하는 것이 온라인 스토어 제품이 구글 이미지 및 웹 검색에 표시되는 가장 좋은 방법이라고 할 수 있을 것입니다.

 

 

 

3. 이미지 크기 조정

 온라인 쇼핑몰을 운영중이시라면 아래사항을 유념하세요. 

• 소비자의 약 50%는 사이트가 로드되는 3초도 기다리지 않습니다.
• 전 세계적으로 평균 페이지 로드 시간이 증가하고 있습니다.
• 아마존은 페이지 속도가 1초만 느려지면 연간 16억 달러의 손실이 발생한다는 사실을 발견했습니다.
• 구글은 페이지 로드 시간을 알고리즘의 순위 요소로 사용합니다.

 

 파일 크기가 클수록 웹 페이지를 로드하는 데 더 오랜 시간이 걸리게 됩니다. 온라인 스토어 이미지의 경우 이미지 파일 크기를 70KB 미만으로 유지하는 것이 좋습니다. 

 

 

 

5. 올바른 이미지 형식 선택

 웹에 이미지를 게시하는 데 사용되는 세 가지 일반적인 파일 형식은 JPEG, GIF, PNG입니다. 

JPEG(또는 .jpg)는 웹의 표준 이미지 파일 형식입니다. JPEG 이미지는 압축에 용이해 파일 크기가 작은 고품질 이미지를 얻을 수 있습니다. JPEG 형식을 사용하면 작은 파일 크기로 적절한 품질을 얻을 수 있습니다.

 

GIF(.gif) 이미지는 JPEG 이미지보다 품질이 낮으며 아이콘 및 장식 이미지와 같은 보다 단순한 이미지에 사용됩니다. GIF는 애니메이션을 지원하기때문에 밈 사용이 잦은 요즘 웹에서 더 많이 활용되고 있습니다. GIF는 몇 가지 색상만 포함하는 단순한 이미지에 적합합니다.

 PNG 이미지는 GIF의 대안으로 사용될 수 있습니다. PNG는 GIF보다 더 많은 색상을 지원하며 JPEG처럼 시간이 지남에 따라 다시 저장해도 품질이 저하되지 않습니다. PNG 파일 형식이 요즘 더 많이 사용되고 있지만 파일 크기는 여전히 JPEG 이미지보다 훨씬 클 수 있습니다. PNG-24 이미지가 PNG-8보다 파일 크기가 3배 이상 크게 되는데 이것이 PNG 이미지 사용에 주의해야 하는 이유입니다.

 다음은 세 가지 파일 유형 모두에 대해 이미지 파일 크기가 24KB로 일정하게 유지되는 예시입니다.

 

위 3개의 이미지로 비교해보면 알 수 있듯이 JPEG가 이미지 품질면에서 훨씬 뛰어나다는 것을 알 수 있습니다. 

 

 

다음은 파일 형식을 선택할 때 기억해야 할 몇 가지 팁입니다.

• JPEG 는 가장 작은 파일 크기에 대해 최상의 이미지 품질을 제공하므로 웹에서 사용하는 이미지 중 가장 좋습니다. 
• GIF는 제품이미지에 사용하지 마세요. 큰 제품 이미지는 파일 크기가 매우 커지게 되어 로드 시간이 길어질 수 있습니다. 썸네일 및 장식용 이미지와 같은 작은 이미지에만 GIF를 사용하세요.
• PNG는 JPEG와 GIF 모두에 대한 좋은 대안이 될 수 있습니다. 제품 사진을 PNG 형식으로만 얻을 수 있는 경우 PNG-24보다 PNG-8을 사용해 보세요. PNG는 파일 크기가 매우 작기 때문에 단순한 장식 이미지로 탁월하게 활용될 수 있습니다.

 

 

 

6. 썸네일 최적화

 썸네일의 파일 크기를 너무 크게 지정하면 페이지 로드 속도를 저하시키게 됩니다. 썸네일은 일반적으로 쇼핑 과정에서 매우 중요한 지점에 표시됩니다. 카테고리 페이지가 빠르게 로드되지 않는 경우 잠재 고객을 잃을 수 있으므로 썸네일 파일 크기를 가능한 작게 만드세요. 

 

 

 

7. 이미지 사이트맵 사용

 사이트에서 Javascript 갤러리, 이미지 팝업 또는 기타 다양항 방법을 사용하여 전반적인 쇼핑 경험을 개선하고 있는 경우 이미지 사이트맵을 사용하면 구글에서 내 사이트의 이미지를 인지하도록 할 수 있습니다.

 웹 크롤러는 웹페이지 소스 코드에서 구체적으로 호출되지 않은 이미지들은 크롤링할 수 없습니다. 따라서 크롤러에게 미확인 이미지에 대해 알리려면 이미지 사이트맵에 크롤러의 위치를 나열해야만 합니다. 

 robots.txt 파일에 다음 줄을 삽입하여 사이트맵 경로를 표시할 수 있으니 다음 줄을 삽입해보세요.

 

사이트맵: http://example.com/sitemap_location.xml

 

 또는 Search Console을 사용하여 사이트맵을 구글에 제출할 수 있습니다. 

 구글 웹마스터 도구를 활용하여 웹사이트를 최적화하는 다양한 방법들을 지침대로 시도해보세요. alt태그에서 설명드렸지만 모든 이미지에 특정 태그를 추가하는 것은 중요합니다. 이미지만 나열하는 별도의 사이트맵을 만들 수도 있습니다. 중요한 것은 특정 태그를 사용하면서 필요한 모든 정보를 가지고 있거나 만들 예정인 사이트맵에 추가하는 것입니다. 이미지 정보가 포함된 사이트맵을 만들 때 구글에서 제안하는 다음 가이드라인을 따라보세요.