모바일 Shopify 쇼핑객에게 제품 사진을 최적화하는 방법

쇼핑객의 79% 하지만 모바일을 사용하고 있습니다. 그것처럼 행동하십시오.

Shopify 자체 데이터에 따르면 트래픽의 79 %, 69 % 이상 주문은 모바일 장치에서 이루어집니다. 그 숫자는 더욱 상승 패션, 미용, 액세서리 분야에서 더욱 높아집니다. 귀하의 제품의 경우 이미지는 27인치 모니터에서 잘 보이지만 iPhone 그럼 평범합니다. 당신은 소수파에 최적화되어 있습니다.

모바일 쇼핑객은 데스크톱 쇼핑객과는 다른 행동을 합니다. 그들은 2-3배 빠르게 스크롤합니다. 제품 페이지에 소요되는 시간이 40% 감소 (베이머드 연구소). 그들은 본 것에 따라 결정을 내 처음 3초 안에. 당신의 영웅 이미지는 초를 얻을 수 없습니다 기회.

모바일 트래픽과 모바일 전환 간의 격차는 전자상거래 최대 수익 유출. 데스크톱은 대략 다음 속도로 변환합니다. 3~4%. 모바일은 1.5~2% 에 머물러 있습니다. 그 격차는 모바일 때문이 아니다 쇼핑객의 동기부여가 떨어지고 있다. 왜냐하면 대부분의 상품 페이지는 사용자가 탐색하는 방법에 맞게 구축되지 않았습니다.

출처: Shopify, Baymard Institute, Google

라이프 스타일 사진 엄지손가락을 멈추십시오. 흰색 배경은 그렇지 않습니다.

바탕 화면에서 깨끗한 흰색 배경의 제품 샷은 다음과 같이 제대로 작동합니다. 주인공의 이미지. 제품은 평가하기에 충분한 크기입니다. 켜짐 모바일에서는 같은 이미지가 바다에 떠있는 작은 물체가 됩니다. 빈. 썸네일에서는 거의 아무것도 전해지지 않는 사이즈.

라이프 스타일 이미지는 모바일에서 영웅 이미지보다 2-3 두 배 뛰어난 성능을 발휘합니다 왜냐하면 프레임 전체가 유익한 정보로 채워지고 있기 때문입니다. 컨텍스트, 색상, 텍스처, 스케일. 흰색 물통 배경 높이 6 인치 또는 16 인치입니다. 물통 노트북 옆의 책상에 놓여 있으면 즉시 알 수 있습니다.

이것은 두 가지 형식 중 하나를 선택하는 것이 아닙니다. 필요 둘 다. 그러나 모바일의 리드 이미지는 대부분의 경우 라이프 스타일 샷. 이미지 2 또는 3 깨끗한 자르기를 저장합니다. 쇼핑객은 상품 자체를 자세히 보고 싶을 때 갑니다.

같은 상품에서도 영향이 다릅니다. 라이프 스타일 샷이 모바일을 충족 컨텍스트와 색상이있는 화면. 흰색 배경의 총 제품을 뷰포트의 일부로 축소합니다.

매초 증가할 때마다 매출의 7%가 손실됩니다.

Google의 모바일 설문 조사에 따르면 방문자의 53 %는 페이지를 로드하는 데 3초 이상 걸리면 포기됩니다. 매 이를 초과하면 1초 동안 전환이 약 7% 감소합니다. (아카마이). 대부분의 제품에서는 제품 이미지가 가장 중요한 요소가 됩니다. Shopify 페이지. 대부분의 경우 총 페이지 무게의 60-80% 를 차지합니다.

계산은 간단합니다. 6개의 최적화되지 않은 JPEG가 포함된 제품 페이지 각 500KB 이미지 = 이미지만 3MB. 일반 4G의 경우 연결 (10 ~ 15Mbps), 즉 이미지만 2초 이상 걸립니다. 추가 페이지의 나머지 부분을 읽으면 3초 임계값을 초과합니다. 쇼핑객이 상품을 보기 전에.

이미지 속도 바늘을 움직이는 세 가지입니다.

• 1.WebP를 사용합니다. JPEG보다 25~35% 작은 동일한 시각적 품질. Shopify가 자동으로 WebP 제공하는 경우 브라우저는 이를 지원하며 최신 모바일은 모두 이를 지원합니다. 브라우저. JPEG를 업로드하면 Shopify가 그들을 fly 하지만 WebP 을 직접 업로드하면 보다 상세한 제어가 가능합니다. 화질과 파일 크기.
• 2.폴드 아래의 모든 것을 지연 로드합니다. 만 영웅 이미지는 즉시로드되어야합니다. 하나의 갤러리 이미지는 지연 로드를 사용해야 합니다. Shopify의 기본 테마 이 작업은 이미 진행 중이지만 맞춤 테마가 있으면 확인하세요. 하나. 영웅 이미지만 150KB 미만이어야 합니다.
• 3.반응형 크기를 배달합니다. 2048x2048 이미지 핀치로 줌하는 데 이상적이지만 첫 디스플레이는 390 픽셀입니다. 광범위한 휴대 전화에서는 이러한 모든 픽셀이 필요하지 않습니다. 사용하다 Shopify의 임베디드 이미지 CDN과 srcset을 사용하여, 각 장치에 적합한 크기. 이렇게 하면 이미지 페이로드를 줄일 수 있습니다. 50~70% 증가합니다.

모바일 이미지 사양 시트

Shopify는 최대 5000x5000 픽셀 및 20MB 의 이미지를 지원합니다. 그러나 모바일에서는 클수록 좋지는 않습니다. 여기에 숫자가 있습니다. 사실 문제입니다.

출처: Shopify 도움말 센터, Google Web Vitals 문서, web.dev

변환 할 6 개의 이미지 모바일 갤러리

데스크톱에서 쇼핑객은 여러 개의 미리보기 이미지를 표시하고 모든 미리보기 이미지로 이동할 수 있습니다. 이미지. 모바일에서는 선형으로 스와이프합니다. 이미지 1 는 다음 사용자에게 표시됩니다 모두. 이미지 6은 아마 30% 에서 볼 수 있습니다. 순서가 중요합니다 어디보다 모바일.

이 순서는 모바일 스크롤 동작을 기반으로 합니다. 이미지는 주목을 받고 신속하게 신뢰를 구축해야합니다.

1. 1라이프 스타일의 영웅. 전체 컨텍스트 샷 표시 사용중인 제품 또는 관련 환경. 이것은 스크롤을 멈추는 것.
2. 2깔끔한 컷 아웃. 흰색 또는 중간 색 배경 전체 제품을 보여줍니다. 그들의 관심을 끌었기 때문에, 그들이 무엇을 사는지 정확하게 보여주세요.
3. 3클로즈업 세부 사항. 텍스처, 스티치, 소재의 품질. 쇼핑객이 모바일에서 주목하는 것. 전용 클로즈업을 제공함으로써 노력을 절약할 수 있습니다.
4. 4스케일 참조. 옆의 상품 크기가 알려진 것 (손, 테이블, 사람). 이 "실제 크기는 얼마나 되나요?"라는 질문에 답합니다. 질문 그것은 반품의 원인이됩니다.
5. 5두 번째 라이프 스타일 각도. 다른 장면, 다른 컨텍스트. 커피숍에서 배낭을 짊어지고, 그 후, 하이킹 코스. 다용도성을 발휘합니다.
6. 6패키지 또는 변형. 그들에게 닿는 것 문 또는 사용 가능한 색상/크기 옵션. 줄이기 「실제로는 무엇을 받을 수 있는 거야?」 불안.

If you want a deeper breakdown of gallery sequencing, see the Shopify 제품 갤러리의 전체 시퀀스 가이드.

60초 만에 완전한 모바일 지원 갤러리 생성

대부분의 판매자는 모바일 사진에 가공이 필요하다는 것을 알고 있습니다. 문제 시간입니다. 사진 촬영 일정, 편집 대기, 크기 조정 모바일 용, 형식 변환. 그것에 50 또는 200를 곱합니다 그것은 결코 완료되지 않습니다.

Prodofoto 사진은 1장에서 4 하나의 라이프 스타일 제품의 사진을 생성 약 60 초로 깨끗한 이미지를 얻을 수 있습니다. 사진은 다음 장소로 돌아옵니다 1024x1024, 모바일에 대응. 프롬프트 없음, Photoshop 없음, 없음 사진 작가를 기다리고 있습니다.

1. 1.Shopify 관리 화면에서 Prodofoto 를 엽니다. 에서 제품을 선택하세요 카탈로그.
2. 2.사진 스타일을 선택합니다. 라이프 스타일, 제품 전용, 모델 전용.
3. 3.60초 이내에 4 장의 사진을 가져옵니다. 즐겨찾기를 선택하세요.
4. 4.Shopify 제품 목록에 직접 게시합니다.

하나의 제품 이미지에서 AI에 의해 생성 된 네 가지 라이프 스타일 변형. 각각은 모바일 화면을 컨텍스트, 색상, 스타일로 채웁니다. 흰색 배경 샷이 일치하지 않습니다.

1개의 상품입니다. 60초. 모바일 지원 라이프 스타일 사진 4 장. 그것은 모바일 트래픽 간의 격차를 메우는 가장 빠른 방법입니다. 그리고 모바일 전환율도.

FAQ

References

1. 베이마드 연구소 — Product page UX: image gallery best practices
2. Shopify — Ecommerce trends: mobile traffic and conversion data
3. Google / Google에서 생각하기 — Mobile page speed benchmarks and bounce rate data
4. Akamai — Online retail performance: impact of page speed on 전환
5. Google Web Vitals (web.dev) — Core Web Vitals metrics and LCP thresholds
6. · Shopify 도움말 센터 — Product image sizes, formats, and limits
7. GrabOn — Online shopping statistics: image quality and purchase behavior

관련 기사

• 라이프 스타일 제품 사진 및 흰색 배경 : 무엇이 변환되는지 Shopify가 더 낫습니까?
• Shopify 전환을 망치는 상품 사진의 7 가지 실수 수수료
• Shopify 리스팅에는 몇 장의 상품 사진이 필요합니까?