대표적인 이미지 최적화 팁 10가지

대표적인 이미지 최적화 팁 10가지

온라인 상점을 운영하는 경우 이미지 최적화는 습득하고자하는 예술입니다. 이미지를 정독하여 사이트로드 시간을 줄이는 구매자를 끌어 들이기 때문에 이미지 최적화는 성공적인 전자 상거래 웹 사이트 를 구축하는 데 있어 중요한 부분입니다 .

이미지 최적화 란 무엇입니까?

이미지 최적화는 이미지의 파일 크기를 최대한 줄여서 품질을 저하시키지 않으면 서 페이지로드 시간이 낮게 유지되도록합니다. 그것은 또한 이미지 SEO에 관한 것입니다. 즉, 제품 이미지와 장식 이미지를 Google 및 기타 이미지 검색 엔진에서 순위를 매기는 것입니다.
다음 질문이 머리를 긁적 거리게 만들었습니까?

Google 이미지 검색을 할 때 제품 사진이 표시되지 않는 이유는 무엇입니까?
내 이미지에 alt 속성을 추가해야합니까?
JPEG, GIF 및 PNG의 차이점은 무엇입니까? 언제 다른 것을 사용해야합니까?
오늘 우리는이 질문들과 그 이상에 깊이 빠져들고 있기 때문에 드디어 답을 얻을 것입니다.

웹용 이미지를 최적화하는 방법은 다음과 같습니다.
이미지의 이름을 설명 적으로 그리고 평이한 언어로 지정하십시오.
alt 속성을 신중하게 최적화하십시오.
이미지 치수와 제품 각도를 현명하게 선택하십시오.
이미지의 파일 크기를 줄입니다.
올바른 파일 형식을 선택하십시오.
미리보기 이미지를 최적화하십시오.
이미지 사이트 맵을 사용하십시오.
장식적인 이미지를 조심하십시오.
CDN (Content Delivery Network)을 사용할 때는주의하십시오.
이미지를 테스트하십시오.

무료 가이드 : DIY 제품 사진

무료로 제공되는 포괄적 인 비디오 가이드를 통해 예산으로 아름다운 제품 사진을 찍는 방법에 대해 알아보십시오.

1. 이미지의 이름을 설명 적으로 그리고 평이한 언어로 지정하십시오
수백 가지의 제품 사진을 찍어서 카메라가 할당 한 기본 파일 이름을 유지하는 것은 정말 쉽습니다.

이미지 검색 엔진 최적화에 관해서는 관련 키워드를 사용하여 검색 엔진에서 웹 페이지 순위를 결정하는 것이 중요합니다. 설명이 풍부하고 키워드가 풍부한 파일 이름을 만드는 것이 이미지 최적화에 중요합니다. 검색 엔진은 웹 페이지의 텍스트를 크롤링 할뿐만 아니라 이미지 파일 이름도 크롤링합니다.

예를 들어이 이미지를 가져옵니다.

머스탱

카메라에 이미지에 할당 된 총칭 (예 : DCMIMAGE10.jpg)을 사용할 수 있습니다. 그러나 2012-Ford-Mustang-LX-Red.jpg 파일의 이름을 지정하는 것이 좋습니다.

고객이 웹 사이트에서 제품을 검색하는 방법에 대해 생각해보십시오. 검색 할 때 어떤 이름 지정 패턴을 사용합니까? 위의 예에서 자동차 구매자는 다음과 같은 용어를 검색 할 수 있습니다.

2012 레드 포드 머스탱 LX
포드 머스탱 LX 레드 2012
레드 포드 머스탱 LX 2012
웹 사이트 분석을 통해 고객이 따르는 키워드 패턴을 확인하십시오. 그들이 사용하는 가장 일반적인 명명 패턴을 결정하고 그 공식을 이미지 파일 명명 프로세스에 적용하십시오.

해당 데이터 중심을 얻지 않으려면 이미지의 이름을 지정할 때 관련성이 높고 유용한 키워드를 사용해야합니다 (예 : 설명적임).

사이트의 이미지 파일 이름을 전략적으로 지정하는 중요성을 이해하려면 Mozilla 의이 Q & A 를 확인하십시오 . 그것은 확실히 당신의 페이지에있는 검색 엔진 최적화를 향상시킬 수 있지만 검색 엔진 결과 페이지 (SERP)에서 페이지와 이미지의 순위를 높이는데도 도움이됩니다.

2. alt 속성을 신중하게 최적화하십시오.
Alt 속성은 브라우저가 이미지를 올바르게 렌더링 할 수 없을 때 이미지의 대체 텍스트입니다. 웹 접근성에도 사용됩니다. 이미지가 렌더링 될 때도 마우스를 올려 놓으면 alt 속성 텍스트가 표시됩니다 (브라우저 설정에 따라 다름).

alt 속성은 또한 웹 사이트에 SEO 값을 추가합니다. 웹 사이트의 이미지에 관련 키워드를 포함하는 적절한 alt 속성을 추가하면 검색 엔진의 순위를 높일 수 있습니다. 실제로 alt 속성을 사용하면 전자 상거래 제품이 Google 이미지 및 웹 검색에 표시되는 최상의 방법 일 수 있습니다.

alt 속성의 소스 코드를 살펴 보겠습니다.

대체 특성

이미지 최적화와 관련하여 최고의 우선 순위는 사이트의 각 제품 이미지에 대한 각 alt 속성을 작성하는 것입니다.

다음은 alt 속성에 대한 간단한 규칙입니다.

이미지 파일 이름처럼 일반 언어로 이미지를 설명하십시오.
모델 번호 또는 일련 번호가있는 제품을 판매하는 경우 alt 속성에서 사용하십시오.
alt 속성을 키워드로 가득 채우지 마십시오 (예 : alt = “ford mustang 근육 자동차는 지금 가장 저렴한 가격으로 판매됩니다”).
장식용 이미지에는 alt 속성을 사용하지 마십시오. 검색 엔진은 과도한 최적화에 대해 불이익을 줄 수 있습니다.
마지막으로 항상 수시로 온 전성 검사를 수행하십시오. 웹 페이지의 소스를보고 alt 속성이 제대로 채워 졌는지 확인하십시오. 당신은 기업가 정신의 속도로 움직일 때 당신이 놓친 것에 놀랄 것입니다.

3. 이미지 치수와 제품 각도를 현명하게 선택하십시오.
제품의 여러 각도를 표시하는 것이 일반적입니다. 포드 머스탱 예제로 돌아 가면, 자동차를 한 번만 보여주고 싶지 않을 것입니다. 특히 자동차를 팔려고하면 더욱 그렇습니다. 다음 장면의 쇼를 보여주는 것이 가장 좋습니다.

실내 장식.
후방, 특히 그 에어 스포일러.
테두리.
엔진. 결국 그것은 머스탱 이다.
이러한 추가 사진을 활용하는 가장 좋은 방법은 alt 속성을 채우는 것입니다. 그리고 당신이 그렇게 할 수있는 방법은 각 제품 촬영을위한 고유 한 alt 속성을 작성하는 것입니다.

2012 alt = “2012 포드 머스탱 LX 레드 가죽 인테리어 트림”alt 속성을 사용하여 2012 포드 머스탱 -LX- 레드 가죽 인테리어 -Trim.jpg ->
alt = “2012 포드 머스탱 LX 레드 리어 뷰 에어 스포일러”의 alt 속성을 사용하여 2012 포드 머스탱 -LX- 레드 – 리어 뷰 에어 -Spoiler.jpg ->
여기에서 핵심은 alt alt 속성에 설명을 추가하여 잠재적 인 검색자가 웹 사이트에 올릴 수있게하는 것입니다. 추가 작업을 수행하면 Google에서 검색자를 보답합니다.

더 큰 이미지를 제공 할 때주의해야 할 단어
이제 방문자에게 더 큰 뷰를 제공하여 훌륭한 사용자 경험을 제공 할 수는 있지만 조심해야합니다.

무엇을 하든지 웹 페이지에 가장 큰 이미지를 배치하지 말고 단순히 소스 코드를 통해 크기를 축소하십시오. 이렇게하면 이미지와 관련된 파일 크기가 커지므로 페이지로드 시간이 길어집니다.

대신 작은 이미지로 만들고 팝업 또는 별도의 웹 페이지에서 더 큰 이미지를 볼 수있는 옵션을 제공하십시오.

4. 이미지의 파일 크기 줄이기
이걸 고려하세요:

거의 50 %의 소비자 가 전자 상거래 사이트가로드되기까지 3 초를 기다리지 않습니다.
… 전 세계적으로 평균 페이지로드 시간이 실제로 증가하고 있습니다.
아마존은 페이지가 1 초 만에 천천히 움직이면 1 년에 16 억 달러의 손실을 보게 될 것이라고 밝혔다 .
Google은 페이지로드 시간 을 알고리즘 의 순위 요소 로 사용합니다.
따라서 이미지를 천천히 화면 아래로 내려 놓고로드하는 데 15 초 이상 걸리는 이미지가 있다면? 글쎄, 잠재 고객에게 작별 인사를 할 수있어!

그래서, 당신은 무엇을 할 수 있습니까?
고객이 사이트에 도착하면 파일의 크기에 따라 모든 내용을로드하는 데 약간의 시간이 걸릴 수 있습니다. 파일 크기가 클수록 웹 페이지가로드되는 데 더 오래 걸립니다. (참고 : Shopify 판매자 인 경우 이미지가 자동으로 압축되므로 문제가되지 않습니다.)

당신이 할 수있는 경우 이미지 파일의 크기 감소 웹 페이지 및 증가 페이지 로딩 속도에를, 귀하의 사이트를 방문 적은 사람들은 멀리 클릭합니다.

이미지 파일 크기를 줄일 수있는 한 가지 방법은 Adobe Photoshop에서 “웹용으로 저장”명령을 사용하는 것입니다. 이 명령을 사용할 때 이미지 품질을 주시하면서 가능한 가장 낮은 파일 크기로 이미지를 조정하려고합니다.

웹용으로 저장

품질 : 오른쪽 상단 모서리 (즉, 70)에서이를 찾습니다.
파일 형식 : 오른쪽 상단 (예 : JPEG)에서 찾으십시오.
최적화 : 오른쪽 상단의이 확인란을 찾습니다 (즉, 최적화 됨).
색상 : 오른쪽 상단의이 확인란을 찾습니다 (예 : sRBG로 변환).
다운 사이징 및 샤프닝 : 하단 오른쪽 코너에서이를 찾습니다 (예 : W : 및 H :).
예상 파일 크기 : 왼쪽 하단 (136.7K)에서 찾으십시오.
“다른 이름으로 내보내기”를 사용하도록 선택할 수도 있습니다.

다른 이름으로 내보내기

Photoshop없이 이미지를 최적화하는 방법
Adobe Photoshop이 없으면 이미지 편집에 사용할 수있는 수많은 온라인 도구가 있습니다. Adobe에는 스마트 폰 및 태블릿 용 무료 이미지 편집 응용 프로그램 인 Photoshop Express가 있습니다. 이 도구는 어도비 포토샵의 데스크톱 버전의 모든 기능을 가지고 있지는 않지만 이미지 편집의 모든 기본 사항을 다루고 팔과 다리의 비용은 들지 않습니다.

다른 인상적인 온라인 이미지 편집 도구 는 다음과 같습니다.

PicMonkey 는 전문가들에 의해 “놀랍도록 훌륭한 사진 편집 도구”로 묘사되었습니다.
PIXLR 은 사용자 친화적이며 스마트 폰용 100 % 무료 앱이 제공되므로 이동 중에도 편집 할 수 있습니다.
Canva 는 또 다른 상당히 진보 된 온라인 이미지 편집기입니다.
마지막으로, 항상 김프가 있습니다. 김프는 Windows, Mac 또는 Linux에서 실행할 수있는 오픈 소스 무료 이미지 편집 소프트웨어 응용 프로그램입니다. 포토샵이 할 수있는 모든 것을 할 수 있지만 좀 더 까다로운 경향이 있습니다. 그러나 무료 이미지 편집 응용 프로그램을 사용하면 이길 수 없습니다.

이미지 파일의 크기는 얼마나되어야합니까?
전자 상거래 이미지의 경우, 이미지 파일 크기를 70KB 미만으로 유지하는 것이 좋습니다. 시간이 지남에 따라 어려울 수 있습니다. 특히 더 큰 이미지의 경우.

5. 적절한 파일 형식 선택
웹에 이미지를 게시하는 데 사용되는 세 가지 공통 파일 유형은 JPEG, GIF 및 PNG입니다.

세 파일 유형과이 파일이 동일한 이미지에 미치는 영향을 살펴 보겠습니다.

JPEG 파일 형식

JPEG (또는 .jpg) 이미지는 다소 오래된 파일 유형입니다. JPEG는 인터넷의 사실상 표준 이미지가되었습니다. JPEG 이미지를 상당히 압축 할 수 있으므로 파일 크기가 작은 이미지를 얻을 수 있습니다. 위의 이미지에서 JPEG 형식은 낮은 파일 크기에서 적절한 품질을 유지합니다.

GIF 파일 형식

GIF (.gif) 이미지는 JPEG 이미지보다 품질이 낮으며 아이콘 및 장식 이미지와 같은 더 단순한 이미지에 사용됩니다. GIF도 애니메이션을 지원합니다.

이미지 최적화와 관련하여 GIF는 웹 페이지 (단순한 몇 가지 색상 포함)의 평범하고 단순한 이미지에 적합합니다. 그러나 복잡한 이미지와 사진의 경우 GIF가 항상 매력적이지는 않습니다. 특히 큰 이미지의 경우에 그러합니다.

사진이 GIF가 잘 작동 할만큼 작기 때문에 위의 MacBook 이미지에서 GIF를 사용하여 도망 갈 수 있습니다.

PNG-8 파일 형식

PNG-24 파일 형식

PNG 이미지는 GIF의 대안으로 인기를 얻고 있습니다. PNG는 GIF보다 더 많은 색상을 지원하며 JPEG와 같이 다시 저장하면 시간이 지남에 따라 성능이 저하되지 않습니다. PNG 파일 형식이 더 자주 사용되기 시작하더라도 파일 크기는 여전히 JPEG 이미지보다 훨씬 클 수 있습니다.

PNG-24 이미지의 크기가 PNG-8보다 3 배 이상 큰 파일인지 확인합니다. 이것이 PNG에 매우주의해야하는 이유입니다.

다음은 이미지 파일 크기가 세 가지 파일 형식 모두에 대해 24kb로 일정하게 유지되는 극단적 인 예입니다.

파일 유형 비교

보시다시피 JPEG가 여기서 확실한 승자입니다. 동일한 낮은 파일 크기를 유지하려면 GIF 및 PNG의 품질이 저하되어야합니다.

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

전자 상거래의 대부분의 경우 JPEG가 최선의 방법입니다. 가장 작은 파일 크기에 대해 최상의 품질을 제공합니다.
대형 제품 이미지에는 GIF를 사용하지 마십시오. 파일 크기가 매우 커질 것이므로이를 줄일 수있는 좋은 방법이 없습니다. 축소 이미지 및 장식 이미지에만 GIF를 사용하십시오.
PNG는 JPEG와 GIF 모두에 대한 좋은 대안이 될 수 있습니다. 제품 사진을 PNG 형식으로 만 가져올 수있는 경우 PNG-24를 통해 PNG-8을 사용해보십시오. 파일 크기가 매우 작기 때문에 PNG는 단순한 장식 이미지로 탁월합니다.
대부분의 이미지 편집 소프트웨어는 위에서 설명한 파일 형식으로 이미지를 저장할 수 있습니다.

6. 미리보기 이미지 최적화하기
많은 전자 상거래 사이트에서는 특히 카테고리 페이지에서 미리보기 이미지를 사용합니다. 그들은 너무 많은 부동산을 차지하지 않고 제품을 빠르게 보여줍니다.

썸네일

썸네일은 훌륭하지만 조심해야합니다. 그들은 조용한 살인자가 될 수 있습니다. 피해자? 페이지로드 속도. 썸네일은 일반적으로 쇼핑 프로세스 중 중요한 시점에 표시됩니다. 카테고리 페이지가 빠르게로드되지 못하게되면 잠재 고객을 잃을 수 있습니다. (참고 : Shopify 가맹점은 섬네일 최적화에 대해 걱정할 필요가 없습니다.

그래서, 당신은 무엇을 할 수 있습니까?

축소판 파일 크기를 가능한 작게 만드십시오. 품질을 저하시켜 파일 크기를 줄이는 것이 중요 할 수 있습니다. 미리보기 이미지의 누적 효과가 페이지로드 시간에 큰 영향을 미칩니다.
alt 속성 텍스트를 변경하면 동일한 이미지의 더 큰 버전에 사용할 중복 텍스트가 아닌 것처럼 보입니다. 실제로 ALT 텍스트를 크게 다르게 만드십시오. 마지막으로 원하는 것은 큰 이미지 대신 썸네일을 인덱싱하는 것입니다. 경우에 따라 대체 텍스트를 완전히 삭제할 수 있습니다.
7. 이미지 사이트 맵 사용
사이트에서 Javascript 갤러리, 이미지 팝업 또는 기타 ‘고풍스럽고’전반적인 쇼핑 환경을 개선하는 방법을 사용하는 경우 이미지 사이트 맵을 사용하면 Google에서 이미지를 인식하는 데 도움이됩니다.

웹 크롤러는 웹 페이지 소스 코드에서 특별히 호출되지 않은 이미지는 크롤링 할 수 없습니다. 따라서 크롤러가 미확인 이미지를 알 수 있도록 이미지 사이트 맵에 위치를 표시해야합니다.

robots.txt 파일에 다음 줄을 삽입하여 사이트 맵의 경로를 표시 할 수 있습니다.

Sitemap : http://example.com/sitemap_location.xml

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

Google은 이미지 게시에 대한 많은 가이드 라인을 제공하므로 SERP에서 웹 사이트 순위를 높이는 데 도움이 될 수 있습니다. 또한 Google 사이트 맵을 사용하여 Google에 웹 사이트의 이미지에 대한 추가 정보를 제공 할 수 있습니다. 그러면 Google이 귀하의 이미지보다 더 많은 이미지를 찾을 수 있습니다.

사이트 맵을 사용한다고해서 이미지가 Google에 의해 색인 생성된다는 보장은 없지만 확실히 이미지 검색 엔진 최적화에 대한 긍정적 인 단계입니다. Google 웹 마스터 도구 에는 사이트 맵의 형식을 올바르게 지정하기위한 제안 사항이 많이 있습니다.

모든 이미지에 대해 특정 태그를 추가하는 것이 중요합니다. 이미지를 독점적으로 나열하는 별도의 사이트 맵을 만들 수도 있습니다. 중요한 것은 특정 태그를 사용하면서 필요한 모든 정보를 추가하거나 기존 사이트 맵에 추가하는 것입니다. 이미지 정보가있는 사이트 맵을 만들 때 Google이 제안하는 다음 지침 을 따르십시오 .

8. 장식적인 이미지를 조심하십시오.
웹 사이트에는 종종 배경 이미지, 단추 및 테두리와 같은 장식 이미지가 있습니다. 비 제품과 관련된 모든 것은 장식적인 이미지로 간주 될 수 있습니다.

장식용 이미지는 웹 페이지에 많은 심미안을 더할 수 있지만 파일 크기가 커지고로드 시간이 느려질 수 있습니다. 따라서 방문자를 고객으로 전환시키는 웹 사이트의 기능을 손상시키지 않도록 장식용 이미지를 면밀히 검토하는 것이 좋습니다.

사이트의 모든 장식 이미지의 파일 크기를 확인하고 파일 크기를 최소화하는 템플릿을 사용하려고합니다.

장식용 이미지의 파일 크기를 줄이는 방법은 다음과 같습니다.

테두리 또는 간단한 패턴을 만드는 이미지의 경우 PNG-8 또는 GIF로 만듭니다. 크기가 수백 바이트에 불과한 멋진 이미지를 만들 수 있습니다.
가능한 경우 이미지를 사용하는 대신 CSS를 사용하여 색상 영역을 만듭니다. 가능한 장식용 이미지를 대체하기 위해 CSS 스타일을 최대한 사용하십시오.
그 큰 벽지 스타일의 배경 이미지를 자세히 살펴보십시오. 그것들은 거대한 파일 일 수 있습니다. 화질을 망가지지 않고 가능한 한 많이 축소하십시오.
배경 이미지의 크기를 줄이기 위해 사용할 수있는 트릭 중 하나는 배경 이미지의 중간 부분을 잘라내 평평한 색상 또는 투명하게 만드는 것입니다. 이렇게하면 파일 크기가 크게 줄어들 수 있습니다.

9. CDN (Content Delivery Network)을 사용할 때주의하십시오.
우리가 호스팅 된 솔루션이기 때문에 Shopify 가맹점은 실제로 이것에 대해 걱정할 필요가 없지만 다른 사람들은주의를 기울여야합니다. CDN (Content Delivery Network)은 이미지 및 기타 미디어 파일을 호스팅하는 곳입니다. 페이지로드 속도를 높이고 대역폭 문제를 해결할 수 있습니다.

단점은 백 링크에 관한 것입니다. 아시다시피, 뒤로 링크는 SEO 에 중요하며 뒤로 링크가 많을수록 검색 엔진에서 사이트가 잘 작동합니다.

CDN에 이미지를 배치하면 도메인에서 이미지를 제거하고 CDN의 도메인에 배치 할 가능성이 큽니다. 따라서 누군가 이미지에 연결하면 실제로 CDN 도메인에 연결됩니다.

따라서 모범 사례는 다음과 같습니다.

“유행”이라면 양과 같이 따라야한다는 것을 의미하지는 않습니다. 그것이 귀하의 비즈니스를위한 최선의 조치인지 먼저 결정하십시오.
귀하의 웹 사이트가 매달 수많은 비즈니스를하고 있다면 대역폭 문제를 해결할 수 있기 때문에 CDN이 가장 좋은 방법 일 것입니다.
귀하의 사이트가 하루에 수천 명의 방문자 만 얻는다면 현재 호스팅 상황이로드를 처리 할 수있는 가능성이 있습니다.
CDN과 관련된 이미지 SEO 문제에는 여러 가지 방법이 있지만 먼저 전략을 세우는 데 전문적인 도움 을 받으십시오.

10. 이미지 테스트
이미지 최적화의 전체적인 포인트는 수익을 높이는 것입니다. Google은 파일 크기를 줄이고 검색 엔진에서 이미지의 색인을 생성하는 방법에 대해 이야기했지만 이미지를 테스트하여 더 많은 고객으로 전환되는 것을 확인하는 방법은 무엇입니까?

페이지 당 제품 이미지 수 테스트 : 호스트되지 않은 일부 전자 상거래 사이트의 경우로드 시간이 문제이므로 페이지의 이미지 수를 줄이면 클릭률 및 판매 수가 증가합니다. 페이지 당 많은 이미지를 제공하면 사용자 경험이 향상되고 더 많은 매출로 이어질 수도 있습니다. 이를 알아내는 유일한 방법은 테스트하는 것 입니다.
고객이 선호하는 각도를 테스트 하십시오. 고객이보고 싶어하는 견해를 제공함으로써 고객 충성도를 높일 수 있습니다. 이를 파악하는 가장 좋은 방법은 제품 사진을 볼 때 고객이 가장 좋아하는 것이 무엇인지 고객에게 설문하는 것입니다. 고객 측량과 대화는 일반적으로 들어갈 수있는 좋은 습관입니다. 그래도 테스트하여 확인하십시오.
카테고리 페이지에 있어야하는 제품 목록 수 : 10, 20, 100 제품을 테스트하십시오 . 카테고리 페이지에 나열된 제품 수를 테스트하여 고객에게 가장 적합한 것이 무엇인지 확인하십시오.