고객들이 즉각적인 만족을 기대하는 세상에서, 전자상거래 웹사이트의 빠른 페이지 로딩은 매우 중요합니다. 반응형 이미지는 페이지 로딩 시간과 전환율을 개선하는 데 도움을 줄 수 있습니다.
이미지 품질은 높은 전환율을 보장하기 위해서 중요한 반면에 이미지 최적화는 온라인 스토어의 사용자 경험과 SEO에서 매우 중요합니다. 이미지 최적화 방법을 배우면 브랜드를 강화하고 Google 이미지 검색을 통해 고객을 유치하는 등 큰 보상을 얻을 수 있습니다.
이미지 최적화란?
이미지 최적화란 이미지 형식, 크기, 해상도를 조정하여 품질을 유지하는 작업을 포함하여 이미지가 데스크톱과 모바일에서 완벽하게 표시되고 웹 성능을 저해하지 않도록 하는 것을 의미합니다.
여기서 중요한 세 가지 요소는 다음과 같습니다.
- 이미지 파일 형식
- 이미지 크기 (높이 및 너비)
- 화면 해상도
이미지를 최적화해야 하는 이유
이미지는 뛰어난 온라인 쇼핑 경험을 제공하기 위해 매우 중요합니다. 제품을 제대로 볼 수 없다면 고객은 제품을 구매하지 않을 것입니다. HTTP Archive의 데이터에 따르면, 최적화되지 않은 이미지는 평균적으로 모바일 웹페이지 전체 용량의 약 38%를 차지합니다.
이미지 최적화는 웹페이지의 용량을 줄이는 데 도움이 됩니다. 이는 멋진 전자상거래 사이트 웹 디자인의 핵심 요소이며, 결론적으로 다음과 같은 이점이 있습니다.
속도와 품질의 균형
웹 및 모바일용 이미지 최적화는 로딩 속도와 품질의 균형 유지를 위해 필요합니다. 보기 좋은 이미지를 제공하는 것은 전자상거래에서 중요하며, 고객에게 더 나은 탐색 경험을 제공합니다.
Google은 사이트 속도가 페이지 순위를 매기는 요소 중 하나라고 답했습니다. 속도가 느린 페이지는 검색 엔진이 크롤링할 수 있는 페이지 수를 줄여 인덱싱에 부정적인 영향을 미칠 수 있습니다.
검색 성능 향상
최적화된 이미지는 독자와 검색 엔진이 웹사이트를 더 잘 이해하고 온라인에서 콘텐츠를 볼 수 있도록 도와줍니다. 최근 데이터에 따르면, Google에서 18%의 검색 쿼리에 이미지가 반환됩니다.
이미지 최적화는 Google의 이미지 검색에서 이미지를 순위에 올리는 데 도움이 되며, 웹사이트로 더 많은 트래픽을 유도하여 브랜드를 구축하는데 기여합니다.
웹을 위한 이미지 최적화 방법
1. 간결하고 직접적인 이미지명 사용
웹사이트에 이미지를 업로드 시, 카메라가 지정한 기본 파일 이름 그대로 사용하기 쉽습니다. 하지만 이미지 SEO에 있어서는 관련 키워드를 사용하여 웹 페이지가 검색 엔진에서 순위에 오르도록 하는 것이 중요합니다.
이미지 최적화에서는 자세한 설명 및 풍부한 키워드를 사용하여 파일명을 작성하는 것이 필수입니다. 검색 엔진은 웹페이지의 텍스트뿐만 아니라 이미지 파일명도 크롤링합니다.
예를 들어, 다음 이미지를 생각해 보세요.
카메라에서 자동으로 지정한 일반적인 이미지명(예: DCMIMAGE10.jpg)을 사용할 수 있지만, 2012-Ford-Mustang-LX-Red.jpg로 지정하는 것이 더 좋은 선택입니다.
고객이 웹사이트에서 제품을 검색할 때 어떤 이름 패턴을 사용하는지 생각해 보세요. 위의 예에서 자동차 쇼핑 고객은 다음과 같은 검색어를 사용할 수 있습니다.
- 2012년식 빨간색 Ford Mustang LX
- Ford Mustang LX 빨간색 2012년식
- 빨간색 Ford Mustang LX 2012년식
웹사이트 분석을 통해 고객이 사용하는 키워드를 확인하고, 그들이 사용하는 가장 일반적인 키워드 패턴을 파악하여 이미지 파일명으로 사용하세요.
데이터를 기반으로 접근하지 않더라도, 이미지명을 지정할 때는 관련성 있고 유용한 키워드를 사용하는 것이 좋습니다(즉, 설명 형식으로 작성하세요).
이미지 파일명의 전략적 중요성을 이해하려면 Moz의 Q&A를 확인해보세요. 온페이지 SEO를 개선하고 검색 엔진 결과 페이지(SERPs)에서 페이지와 이미지의 순위를 높이는 데 도움이 될 수 있습니다.
2. 신중하게 alt 속성 최적화
alt 속성은 브라우저가 이미지를 제대로 렌더링 하지 못할 때 이미지를 텍스트로 대체한 결과물이며, 웹 접근성을 위해서도 사용됩니다. 이미지가 렌더링 될 때도 이미지에 마우스를 올리면 alt 속성가 표시됩니다(브라우저 설정에 따라 다를 수 있음).
alt 속성은 웹사이트에 SEO 가치를 추가합니다. 웹사이트 이미지에 관련 키워드를 포함한 적절한 alt 속성을 추가하면 검색 엔진에서 더 나은 순위를 차지하는 데 도움이 됩니다. alt 속성은 전자상거래 제품을 Google 이미지 및 웹 검색에서 노출시키는 가장 좋은 방법일 수 있습니다.
alt 속성의 소스 코드를 살펴보겠습니다.
이미지 최적화에서 가장 중요한 우선사항은 사이트의 각 제품 이미지에 alt 속성을 작성하는 것입니다.
다음은 몇 가지 간단한 alt 속성 작성 규칙입니다.
- 이미지를 설명할 때는 이미지 파일명과 마찬가지로 이해하기 쉽게 작성하세요.
- 모델 번호나 시리얼 번호가 있는 제품을 판매하는 경우, alt 속성에 이를 포함하세요.
- alt 속성에 지나치게 많은 키워드를 사용하지 마세요(예: alt="ford mustang 머슬카 지금 구매 최고로 저렴한 가격으로 판매").
- 장식용 이미지에 alt 속성을 사용하지 마세요. 과도한 최적화로 인해 검색 엔진으로부터 페널티를 받을 수 있습니다.
마지막으로, 가끔씩 온전성 검사를 해보세요. 웹 페이지의 소스를 보고 alt 속성이 있는지, 해당 속성이 여전히 이미지와 관련성이 있는지 확인하세요. 너무 바쁘게 일하다 보면 많은 것을 놓칠 수 있습니다.
3. 현명한 이미지 크기와 제품 각도 선택
제품의 여러 각도를 보여주는 것이 일반적인 관행입니다. 예를 들어, Ford Mustang의 경우 자동차의 한 면만 보여주는 것은 좋지 않습니다. 다음과 같은 모습을 보여주는 것이 좋습니다.
- 내부
- 후면(특히 에어 스포일러)
- 휠
- 엔진(어쨌든 Mustang이니까요)
이 추가 사진을 활용하는 가장 좋은 방법은 alt 속성을 작성하는 것입니다. 각 제품 이미지에 고유한 alt 속성을 작성하는 방법은 다음과 같습니다.
- 2012-Ford-Mustang-LX-Red-Leather-Interior-Trim.jpg -> alt 속성: alt="빨간색 2012년식 Ford Mustang LX 가죽 인테리어 트림"
- 2012-Ford-Mustang-LX-Red-Rear-View-Air-Spoiler.jpg -> alt 속성: alt="빨간색 2012년식 Ford Mustang LX 후면 에어 스포일러"
여기서 중요한 것은 잠재적인 검색자가 웹사이트를 방문할 수 있도록 기본 alt 속성에 설명을 추가하는 것입니다.
4. 이미지 크기 조정
모든 기기에서 잘 보이도록 웹사이트의 이미지를 처리하는 것이 중요합니다. 특히 모바일 및 고해상도 화면에서는 더욱 그렇습니다.
더 밀도가 높은 디스플레이 화면을 만족시키려면 같은 물리적 공간에 더 많은 픽셀이 포함된 이미지를 사용해야 합니다. 예를 들어, 웹사이트에 200픽셀 x 200픽셀 크기의 이미지 공간이 있다면, 고해상도 디스플레이에서는 선명함을 유지하기 위해 400픽셀 x 400픽셀 크기의 이미지를 사용해야 합니다. 현재 거의 모든 모바일 기기에서는 2배 이상의 화면 해상도를 사용하고 있습니다.
이러한 해상도를 만족시키는 가장 쉬운 방법은 콘텐츠 전송 네트워크(CDN)를 사용하는 것입니다. 콘텐츠 전송 네트워크는 이미지의 크기를 조절하고 사용자의 기기에 가장 적합한 이미지 형식을 제공합니다. 또한 사용자와 가까운 서버에서 이미지를 제공하기 때문에 이미지 파일 로딩 속도도 빨라집니다.
💡참고: Shopify 스토어를 운영 중이라면, Shopify 테마는 Shopify의 이미지 콘텐츠 전송 네트워크를 사용합니다. 작동 방식이 궁금하신가요? 이미지를 업로드하고 Shopify의 콘텐츠 전송 네트워크를 사용해 보세요. 테마 개발자라면 Liquid에서 반응형 이미지 코드 작성하는 방법을 배워보세요.
5. 올바른 이미지 파일 형식 선택
이미지 형식은 웹사이트에서 가장 중요한 요소 중 하나입니다. 일부 이미지 파일 형식은 다른 이미지 파일 형식보다 품질이 더 뛰어납니다. 일부 파일 형식은 더 많은 공간을 차지하여 사이트 로딩 시간에 영향을 미칩니다.
먼저, 이미지 형식에는 비트맵(raster)과 벡터(vector)라는 두 가지 주요 파일 형식이 있습니다.
벡터 이미지는 수학 공식을 기반으로 만들어집니다. 품질 저하 없이 다양한 크기로 확장할 수 있는 그래픽이 필요할 때는 벡터 그래픽을 사용하세요. 가장 일반적인 벡터 이미지 형식으로 SVG(Scalable Vector Graphics)가 있습니다. 이 형식은 로고, 아이콘 및 간단한 그래픽에 적합하며, 크기를 확장해도 선명도를 유지합니다.
비트맵 이미지는 픽셀로 구성되어 매우 세밀한 이미지를 형성할 수 있습니다. 이미지에 포함된 픽셀 수가 많을수록 파일 크기가 크고 해상도가 높습니다.
시간이 지남에 따라 비트맵 이미지용으로 보다 새롭게 개선된 코덱이 개발되었습니다. 예를 들어, GIF는 웹을 위한 초기 이미지 코덱이었지만, 주변 픽셀을 평균으로 한 압축 기술 때문에 품질이 낮았습니다. 최신 기술에서는 육안으로 감지하기 어려운 수준으로 이미지를 코딩하고 압축하는 방법을 모색하고 있습니다.
이는 최신 이미지 형식을 사용하면 더 작은 파일 크기로 더 높은 품질의 이미지를 제공할 수 있음을 의미합니다. 현재 웹에서 가장 일반적으로 사용되는 형식은 다음과 같습니다.
- JPG: 사진에 널리 사용되는 이미지 형식입니다. 손실 압축을 사용하여 파일 크기를 줄이지만 약간의 품질 손상이 있습니다.
- PNG: 투명한 배경의 그래픽을 처리할 수 있어 웹 디자이너에게 인기 있는 파일 형식입니다. 압축할 때 원본 데이터를 모두 유지하여 웹사이트의 그래픽과 차트에 적합합니다.
- WEBP: 웹용으로 설계된 현대적인 형식입니다. 손실 및 비손실 압축을 모두 지원하며, JPG 및 PNG보다 파일 크기는 작지만, 이미지 품질은 두 파일 형식과 유사하거나 더 낫습니다.
- AVIF: 최신 이미지 형식으로, 이미지 압축에 뛰어나지만 품질 저하가 적습니다.
모든 브라우저에서 모든 파일 형식을 지원하는 것은 아닙니다. 이때 이미지 콘텐츠 전송 네트워크를 유용하게 사용할 수 있습니다. 콘텐츠 전송 네트워크는 특정 브라우저에 가장 적합한 형식을 자동으로 선택하고 원본 이미지를 변환합니다. 이러한 기능이 있는 콘텐츠 전송 네트워크를 사용하지 않는 경우, HTML에서 <picture> 태그를 사용해야 합니다.
💡참고: Shopify의 콘텐츠 전송 네트워크는 브라우저에서 지원하는 파일 형식을 자동으로 감지하고 최상의 옵션을 제공합니다. 예를 들어, 지원 가능한 경우에는 이미지를 WebP 또는 AVIF로 변환하고, 구형 브라우저에서는 대체 버전으로 PNG 또는 JPEG 이미지를 보냅니다.
6. 이미지 사이트맵 사용
사이트에서 자바스크립트 갤러리, 이미지 팝업 또는 기타 “현란한” 방법으로 전반적인 쇼핑 경험을 개선하는 경우, 이미지 사이트맵은 Google이 이미지를 인식하는 데 도움이 됩니다.
웹 크롤러는 웹페이지 소스 코드에서 특별히 요청하지 않은 이미지를 크롤링할 수 없습니다. 따라서 크롤러가 식별하지 못한 이미지를 인식하도록 만들려면 이미지 사이트맵에 위치를 나열해야 합니다.
다음 줄을 robots.txt 파일에 삽입하여 사이트맵의 경로를 표시할 수 있습니다.
Sitemap: http://example.com/sitemap_location.xml
또는 Search Console을 사용하여 사이트맵을 Google에 제출할 수 있습니다. Google은 이미지 게시를 위한 많은 가이드라인을 제공하고 있으며 이를 활용해 웹사이트의 SERP 순위를 높일 수 있습니다. 또한 Google 사이트맵을 사용하여 웹사이트 이미지의 추가 정보를 제공하면 Google이 더 많은 이미지를 찾는 데 도움이 됩니다.
Shopify 스토어 운영자로서, 제품 이미지가 포함된 자동 생성 사이트맵을 받게 됩니다. 이 사이트맵을 통해 제품 페이지의 이미지와 블로그나 컬렉션에서 사용되는 기타 중요한 이미지를 검색 엔진이 발견할 수 있습니다. 이는 이미지가 검색 결과에 노출될 가능성을 높이고 웹사이트로 더 많은 트래픽을 유도하는 데 도움이 됩니다.
Shopify는 새로운 페이지나 제품이 추가되거나 기존 페이지가 제거될 때마다 사이트맵을 자동으로 업데이트합니다. 따라서 사이트맵을 수동으로 생성하거나 업데이트할 필요가 없습니다.
7. 좋은 이미지 콘텐츠 전송 네트워크(콘텐츠 전송 네트워크) 사용
전문 이미지 콘텐츠 전송 네트워크의 이미지 변환 기능은 고품질 이미지를 한 번만 업로드하면 요청에 따라 크기를 조절하고 형식을 재설정하며 캐시화합니다.
Shopify의 이미지 콘텐츠 전송 네트워크를 사용하면 이미지 업로드 시 파일 크기가 자동으로 최적화됩니다. 품질 변화는 육안으로 인식 가능한 수준이 아니지만 페이지 로딩 시간은 개선됩니다. 콘텐츠 전송 네트워크는 또한 클라이언트 측에서 지원하는 파일 형식을 자동으로 감지하여 원본 파일을 잃지 않고 이미지를 자르고 변형할 수 있는 동적 편집 기능을 제공합니다.
💡Shopify 스토어 운영자는 웹사이트 속도, 전환율, 검색 엔진 최적화 개선을 위해 전문 서비스 팀에 도움을 요청할 수 있습니다.
8. 이미지 테스트
이미지 최적화의 주요 목적은 수익 증대입니다. 파일 크기를 줄이고 검색 엔진의 이미지 인덱싱 하는 법에 대해 이야기했지만, 어떤 이미지가 더 많은 고객을 유도하는지 테스트하는 방법은 무엇이 있을까요?
- 페이지당 제품 이미지 수 테스트: 일부 호스팅되지 않는 전자상거래 사이트에서는 로딩 시간이 문제가 될 수 있으므로 페이지의 이미지 수를 줄이면 클릭률과 매출이 증가할 수 있습니다. 또한 페이지마다 다량의 이미지를 제공하면 사용자 경험이 개선되어 더 많은 판매로 이어질 수 있습니다. 이를 알아내는 유일한 방법은 테스트입니다.
- 고객이 선호하는 각도 테스트: 고객이 보고 싶어 하는 각도의 이미지를 제공하여 고객 충성도를 높일 수 있습니다. 이를 알아내는 좋은 방법은 제품 샷에서 가장 마음에 든 이미지에 대해 고객 설문조사를 실시하는 것입니다. 고객을 대상으로 하는 설문조사와 대화는 대체로 좋은 습관이지만, 그래도 테스트를 통해 검증하세요.
- 카테고리 페이지에 나열할 제품 수 테스트: 10개, 20개, 아니면 100개의 제품을 나열하는 게 적절할까요? 카테고리 페이지에 나열할 제품 수를 테스트하여 고객에게 가장 적합한 제품 수를 확인하세요.
이미지 최적화 도구
이미지 최적화 모범 사례를 알아보았으니 이제 웹사이트에 사용할 수 있는 이미지 최적화 도구와 플러그인 몇 가지를 살펴보겠습니다.
Shopify를 사용하거나 전문 이미지 콘텐츠 전송 네트워크를 사용한다면 이러한 이미지 최적화 도구를 사용할 필요는 없습니다. 단, SVGOMG는 예외인데, 대부분의 이미지 콘텐츠 전송 네트워크에서 SVG 최적화를 제공하지 않기 때문입니다.
Squoosh
Squoosh는 이미지 압축 시 쉽게 사용할 수 있는 웹 기반의 앱입니다. 이미지를 앱에 드래그 앤 드롭하고 JPEG XL, WEBP, PNG 등과 같은 최적화된 이미지 형식 중에서 선택하면 됩니다.
TinyPNG
TinyPNG는 웹에서 인기 있는 또 다른 이미지 최적화 도구입니다. 스마트 손실 압축 기술을 활용하여 웹 페이지(WEBP), JPEG, PNG 파일의 이미지 파일 크기를 줄입니다.
앱이나 스토어용 이미지의 크기를 줄일 수 있으며, 애니메이션 이미지도 축소할 수 있습니다. 이미지 압축뿐만 아니라 API 통합 및 개발자 도구를 제공하여 TinyPNG를 맞춤형 소프트웨어 솔루션에 통합할 수 있습니다.
TinyPNG의 API는 썸네일을 자동으로 조정하고 불필요한 부분을 제거하여 배경을 더 추가합니다. WordPress 기반의 웹사이트인 경우 이 도구를 플러그인으로 사용할 수 있습니다.
SVGOMG
SVGOMG는 또 다른 간단한 이미지 최적화 도구입니다. SVG 파일을 정리하고 최소화하는 여러 옵션을 제공합니다. SVG의 소스를 업로드하거나 복사하여 시작할 수 있습니다. 다양한 제어 기능으로 원본보다 크기는 더 작지만 동일한 품질의 이미지를 만들 수 있습니다.
이미지 최적화로 사진의 기능성을 유지하세요
이미지 최적화는 온라인 비즈니스를 성공적으로 운영하는 데 반드시 필요합니다. 이는 제품의 외관을 개선할 뿐만 아니라 원활한 쇼핑 경험을 제공하고 온라인에서 발견하는 데 도움이 됩니다.
Shopify와 같은 전자상거래 플랫폼은 자동으로 가장 적합한 형식으로 이미지를 제공하여 판매를 증대하며 온라인 비즈니스를 성장시킬 수 있습니다.
이미지 최적화 관련 자주 묻는 질문
품질 손상 없이 이미지를 최적화하는 방법은 무엇인가요?
품질 손상 없이 이미지를 최적화하는 가장 좋은 방법은 특정 상황에 맞는 올바른 이미지 크기와 형식을 제공하는 것입니다. 이 글에서 언급한 수동 도구를 사용하여 파일을 생성하고 브라우저에 맞는 올바른 HTML을 작성할 수 있습니다. 또는 Shopify와 같은 전문 이미지 콘텐츠 전송 네트워크를 사용하여 자동으로 이미지를 변환하여 모든 기기에 고품질 이미지를 제공할 수 있습니다.
최고의 이미지 최적화 도구는 무엇인가요?
Squoosh와 TinyPNG는 최고의 이미지 최적화 도구로 꼽을 수 있습니다. 두 가지 모두 웹 기반 도구로 JPG 및 PNG 이미지와 같은 다양한 형식 옵션을 제공합니다. 더 복잡한 SVG 파일의 경우 SVGOMG를 사용하여 파일 크기를 줄일 수 있습니다.
Shopify에서 이미지를 최적화해야 하나요?
이미지를 Shopify에 업로드하기 전에 최적화할 필요는 없습니다. 최적화할 경우, 종종 저품질 이미지가 생성되어 전환율이 낮아지고 반품이 증가할 수 있습니다. Shopify의 콘텐츠 전송 네트워크는 전자상거래에 더 적합한 품질 설정으로 이미지를 자동으로 압축합니다. 테마 코드는 Liquid의 image_url 및 image_tag를 사용하여 많은 반응형 이미지 기능을 자동으로 활용할 수 있도록 작성되어야 합니다.
