Shopify 이미지 크기 가이드: 멋진 매장을 위한 팁

잠재 고객이 귀하의 Shopify 웹 사이트, 그들은 이미지를 사용하여 구매할지 여부를 결정합니다. 따라서 상인으로서 여러분의 임무는 이미지가 사이트 로딩 속도를 늦추지 않도록(사람들을 밀어내지 않도록) 하고 이미지의 형식과 크기를 적절하게 조정하는 것입니다.

이렇게 하면 이미지가 늘어나거나 잘려 보이지 않습니다. 우리 궁극기에서 Shopify 이미지 크기 가이드에서 특정 이미지 크기의 중요성을 보여줍니다. Shopify 로고, 배너 이미지 및 제품 이미지와 같은 항목에 이상적인 크기를 제공합니다.

모든 것을 배우려면 계속 읽으십시오. Shopify 이미지 크기!

관심을 가져야 하는 이유 Shopify 이미지 크기?

이미지를 관리하고 업로드하는 것은 지루한 일입니다. 그러나 그들은 느린 사이트 속도, SEO 문제 및 전자 상거래 사이트의 낮은 전환과 관련하여 종종 주요 범죄자입니다.

그리고 모든 웹 사이트 빌더와 전자 상거래 플랫폼에 대한 까다로운 부분은 최적화되고 보기 좋게 보이도록 매우 특정한 이미지 크기를 고수해야 한다는 것입니다.

그 이유를 요약하면 다음과 같습니다. Shopify 이미지 크기 문제:

각 이미지 유형 Shopify 로고가 배너 이미지와 크기가 어떻게 다른지와 같은 고유한 크기가 필요합니다.
사용자는 올바른 형식으로 이미지를 명확하게 볼 수 있을 때 유료 고객으로 전환될 가능성이 더 높습니다.
적절하게 크기가 조정되고 최적화된 이미지는 SEO 잠재력을 높일 수 있습니다.
사진 크기가 맞지 않으면 이미지가 늘어나거나 잘려서 보기 흉한 웹사이트가 될 수 있습니다.
크기가 잘못된 이미지로 인해 사이트 속도가 느려지거나 고객이 완전히 기다리기를 원하지 않을 수 있습니다.

이러한 점과 함께 선명하고 크기가 큰 이미지는 일정 수준의 전문성을 보여주며 고객에게 귀하가 신뢰할 수 있는 비즈니스이며 귀하의 제품이 최고 품질이라는 감정적 반응을 전달합니다. 나쁜 사진은 제품이나 제품이 표시되는 방식에 관심이 없는 것처럼 보입니다. 귀하의 고객은 "그 밖에 어디에서 코너를 깎고 있습니까?"라고 물을 수 있습니다.

그런 말로, 최고에 대한 빠른 참조 가이드를 살펴보십시오. Shopify 제품 페이지, 배너 이미지 및 로고와 같은 영역의 이미지 크기.

베스트 Shopify 이미지 크기(이미지가 사용되는 위치 기준)

이 모든 규칙이 엄격한 것은 아니지만, 가능한 한 "이상적인 크기"를 고수하는 것이 가장 좋습니다. 테마마다 가끔씩 자체 이미지 표준이 있으므로 이를 주시하세요. 그렇지 않으면 크기에 여유가 있을 때 설명해 드리겠습니다.

사용할 이미지 크기가 있습니까? Shopify?

아니요. 하지만 이러한 접근 방식을 사용할 계획이라면 다음을 권장합니다.

모든 이미지가 제품의 복잡한 세부 정보를 표시할 수 있을 만큼 충분히 큰지 확인하세요.
그러나 사이트 성능을 방해하지 않도록 이미지를 충분히 작게 유지하십시오.
일반적인 경험 법칙은 정사각형 이미지의 경우 2048 x 2048 픽셀을 고수하는 것입니다.
정사각형 이미지의 경우 800×800픽셀보다 작은 크기는 피하세요.
정사각형 이미지의 경우 4472×4472보다 큰 크기는 피하세요.

정사각형이 아닌 이미지의 경우, 아래 가이드를 사용하는 것이 좋습니다. 또한 일부 테마는 이미지를 다르게 자르므로 추측하고 확인해야 온라인 매장에 가장 적합한 이미지 크기를 확인할 수 있습니다.

최상의 안내를 받으려면 이상적인 Shopify 아래의 이미지 크기는 모두 이미지 유형에 따라 분류됩니다.

1. Shopify 제품 이미지 크기(이상적인 크기: 2048 × 2048픽셀)

제품 이미지는 판매에 사용되는 주요 미디어 형식입니다. Shopify의 테마는 제품 이미지를 자르고 최적화하는 데 매우 효과적이지만 자동화된 도구에 절대 의존해서는 안 됩니다.

이 어플리케이션에는 XNUMXµm 및 XNUMXµm 파장에서 최대 XNUMXW의 평균 출력을 제공하는 제품 이미지의 권장 치수 Shopify 2048 x 2048 픽셀입니다..

이것은 이미지로 인해 페이지 속도가 느려지지 않도록 하는 동시에 고객이 원본 사진의 풍부함을 자세히 볼 수 있도록 하는 훌륭한 장소입니다.

원치 않는 자르기를 방지하기 위해 제품 사진에 정사각형 이미지를 제안합니다. Shopify 테마.

아래 스크린샷은 2048 × 2048 픽셀로 업로드된 이미지를 보여주며 잘리지 않았습니다.

더 길고 넓은 이미지는 여전히 제품 사진에 효과적일 수 있지만 테마가 이미지에 미치는 영향에 대한 제어력이 떨어집니다. 가로 사진은 세로 형식에 비해 크기가 작아질 수 있습니다.

2. Shopify 컬렉션 이미지 크기(이상적인 크기: 2048 × 2048픽셀)

컬렉션을 추가하는 데 반드시 이미지가 필요한 것은 아니지만 이렇게 하면 작은 제품 하위 집합에 대해서만 만들어진 랜딩 페이지와 거의 같은 해당 컬렉션에 대한 별도의 페이지를 만들 수 있습니다.

아래에 컬렉션 이미지가 업로드됩니다. 컬렉션 만들기 ~의 섹션 Shopify.

그런 다음 해당 컬렉션에 제품을 추가하고 홈페이지의 콘텐츠 블록에 표시하거나 자체 페이지로 표시할 수 있습니다.

당신이 떠날 경우 영상 컬렉션 페이지의 필드가 비어 있으면 해당 컬렉션의 추천 제품 이미지 중 하나가 기본값으로 사용됩니다.

추천 Shopify 컬렉션의 이미지 크기는 2048 × 2048픽셀입니다.

정사각형의 크기는 모든 컬렉션에서 표준화된 형식을 확립하는 데 도움이 되며, 특히 나란히 전시할 때 더욱 그렇습니다.

컬렉션을 보여주는 콘텐츠 블록을 활용하면 정사각형 이미지를 작업하기가 더 쉽다는 것을 알 수 있습니다.

항상 그렇듯이 결과는 사용된 테마에 따라 다를 수 있습니다. 실제로 일부 테마는 컬렉션 이미지에 추가 기능을 제공하여 별도의 컬렉션 페이지에서 배너처럼 이미지를 공유할 수 있습니다. 이 경우 컬렉션 이미지의 최적 크기는 지금까지 이야기한 것과 완전히 다를 수 있습니다. 전반적으로 최선의 행동 계획은 테마로 테스트를 진행하는 것입니다. 컬렉션에 고유한 크기의 여러 이미지를 업로드합니다. 작동하는 것을 기록한 다음 항상 해당 치수를 사용하십시오. 이미지가 너무 크거나 작지 않은지 확인하면 됩니다.

3. Shopify 로고 이미지 크기(이상적인 크기: 450W × 250H 픽셀)

로고는 전자 상거래 상점의 천막으로 눈에 띕니다. 일반적으로 헤더 영역 내에서 볼 수 있다는 점을 고려하면 누군가가 귀하의 홈페이지와 전체 웹사이트에 방문했을 때 바로 표시됩니다.

Shopify 로고 크기에 문제가 있는 사용자는 로고가 충분히 크지 않거나 어떤 식으로든 탐색 메뉴가 변형된다는 것을 알 수 있습니다. 또는 로고가 아래 또는 위에 많은 공백을 남겨둔다는 것을 알 수 있습니다.

대부분의 문제를 해결하려면 높이 250픽셀, 너비 450픽셀의 로고 크기를 사용하는 것이 좋습니다.

사실, Shopify 너비와 높이가 이 치수보다 높지 않을 것을 권장합니다. 하지만 테마가 허용하는 한 더 작게 만들 수 있습니다.

때때로 사이드바가 문제를 일으키거나 탐색 메뉴에 로고를 이상한 방향으로 밀어넣는 요소가 너무 많을 수 있습니다. 그럼에도 불구하고 최상의 모양을 얻으려면 로고 크기와 사이트 설정을 조정하는 것이 가장 좋습니다.

대안으로, 일부 테마는 정사각형 로고와 함께 사용하면 멋지게 보이지만, 로고 크기를 250 x 250 픽셀 이하로 유지하여 너무 많은 공간을 차지하지 않도록 합니다.

가장 다양한 기능을 사용하려면 다음으로 이동하십시오. 설정 > 브랜드 in Shopify 추가 태만 하고 Square 영상. 이렇게 하면 상황에 따라 둘 중 하나를 업로드할 수 있습니다.

4. Shopify 배너 이미지 크기(이상적인 크기: 2000W × 600H 픽셀)

일반적으로 히어로 이미지 또는 이미지 배너라고 하는 이 이미지는 홈페이지 상단에 배치하여 신제품을 선보이고 버튼이 있는 텍스트를 포함할 수 있는 더 큰 이미지입니다. 배너 이미지는 크기를 조정한 후 다른 장치에서 볼 때 거칠음을 방지하기 위해 고해상도여야 합니다.

Shopify 또한이있는 헤더 비슷한 기능을 하는 콘텐츠 섹션 배너 이미지 콘텐츠 섹션.

어떤 것을 선택하든 배너 및 히어로 이미지에 대해 너비 1200픽셀 x 높이 600픽셀의 크기를 고수하는 것이 좋습니다.

그렇긴 하지만 너비는 1200~2000픽셀, 높이는 400~600픽셀이면 충분합니다. 항상 그렇듯이 테마에 따라 다릅니다.

마지막으로 모든 이미지 배너와 영웅 이미지에 대한 설정을 조정하는 것도 현명합니다. 대부분의 테마에 대한 배너 높이를 수정하고 Shopify 콘텐츠 뒤의 이미지를 더 잘 볼 수 있도록 오른쪽 하단 또는 상단과 같이 배너 콘텐츠를 놓을 위치입니다.

5. Shopify 슬라이드쇼 이미지 크기(이상적인 크기: 2000W × 600H 픽셀)

배너와 마찬가지로 슬라이드쇼에서도 고해상도 이미지를 사용해야 합니다. 이러한 콘텐츠 섹션을 사용하면 페이지의 한 영역에 여러 사진을 표시할 수 있습니다. 그런 다음 연속해서 다음 이미지로 슬라이드합니다.

배너와 매우 유사하기 때문에 히어로 또는 배너 이미지와 동일한 너비와 높이를 실제로 유지할 수 있습니다. 권장 사항은 너비 2000픽셀, 높이 600픽셀입니다. 그러나 높이는 400~600픽셀이고 너비는 1200~2000픽셀입니다.

슬라이드쇼에 가장 적합한 서식을 설정하려면 모든 슬라이드쇼 설정을 관리해야 합니다. 콘텐츠 상자를 다른 위치로 옮겨야 할 수도 있고, 높이를 조금 늘리면 슬라이드쇼가 더 좋아 보일 수도 있습니다.

슬라이드쇼의 주요 규칙 중 하나는 같은 슬라이드쇼에 대해 항상 같은 크기의 이미지를 업로드하는 것입니다. 별도의 슬라이드쇼를 만들 때 크기를 조정할 수 있지만 연속성과 사용자 경험을 위해 하나의 슬라이드쇼에서 함께 결합된 이미지의 크기가 모두 동일한지 확인하십시오.

최적화 방법 Shopify 이미지

이미지를 최적화하면 전자 상거래 상점에서 사진이 로드되는 방식을 개선하는 데 도움이 됩니다. 또한 이미지가 쇼핑 경험을 압도하는 것이 아니라 보완하는 방법을 확인하여 웹 사이트에서 보다 사용자 친화적인 경험을 만드는 데 도움이 됩니다.

이미지를 최적화할 때 고려해야 할 몇 가지 측면이 있습니다. Shopify. 이러한 영역에는 최적의 이미지 형식, 압축, 이미지 소스, 스타일링 등이 포함됩니다. 계속 읽어서 이미지를 최적화하기 위한 모범 사례와 단계에 대해 모두 알아보세요. Shopify.

광고 ⓘ

1단계: 최적의 이미지 선택 Format

Shopify 이미지 크기는 중요하지만, 모든 사진 최적화의 첫 번째 단계는 최상의 이미지 형식을 선택하는 것입니다.

다양한 이미지 형식이 있습니다 Shopify 있습니다.

특별한 이유는 다음과 같습니다.

JPEG/JPG: 아마도 이미지에 가장 흔한 파일 형식일 것입니다. 당연히 그렇습니다. JPEG는 압축이 잘 되고 뛰어난 품질을 제공합니다. 특히 사진에 세부 사항이 있는 경우 제품 페이지에 권장합니다.
PNG: 이 파일 유형은 실제로 이미지 크기를 줄인 후에도 품질을 유지하는 데 JPEG보다 낫습니다. 그러나 PNG가 많이 압축되지 않는다는 것을 알 수 있습니다. 투명한 배경(JPEG에서는 지원되지 않음)이 필요할 때 가장 적합하므로 로고 및 일부 배너 이미지에 적합합니다.
GIF: GIF는 애니메이션을 위한 이미지 포맷입니다. 본질적으로 짧은 비디오를 움직이는 이미지로 바꾸는 것과 같으며, 비디오의 압도적인 크기 없이 제품을 간략하게 설명하는 데 유용합니다. 우리는 홈페이지, 제품 페이지, 블로그 게시물에 GIF를 좋아합니다. 하지만 JPEG, TIFF, PNG와 같은 다른 포맷에서 발견되는 풍부한 색상 품질이 부족하므로 GIF를 과도하게 사용하지 마세요.
WebP: 아마도 모든 이미지 포맷 중에서 가장 다재다능한 WebP는 JPEG와 PNG보다 더 강력한 압축과 품질을 제공하고 PNG의 투명도 이점과 함께 점점 더 보편화되고 있습니다. 말할 것도 없이 WebP로 애니메이션을 만들 수도 있습니다. 모든 유형의 이미지에 WebP를 사용하는 것을 고려하세요. Shopify. 앞으로 인터넷에서 WebP가 더 자주 사용될 것으로 예상됩니다.

그 이외의, Shopify HEIC, progressive JPEG, AVIF와 같은 형식을 지원합니다. HEIC는 Apple 기기에서 사용되는 이미지 형식 표준입니다. 매우 컴팩트하고, 하나의 이미지에 여러 사진을 담을 수 있으며, 뛰어난 품질을 제공합니다. 그러나 대부분의 비 Apple 기기와 호환되지 않아 추천하기 어렵습니다. AVIF 이미지 형식은 고품질과 극적인 압축률로 인해 강력한 장점이 있습니다. 간단히 말해서 AVIF를 사용하면 JPEG 및 WebP 이미지보다 성능이 더 뛰어납니다. 그러나 데스크톱 및 모바일 브라우저에서 이를 파일 형식 표준으로 채택하는 데는 시간이 걸립니다. 따라서 지금은 추천할 수 없습니다. 인터넷에 연결된 거의 모든 사람이 실제로 온라인에서 이미지를 볼 수 있을 때까지는 말입니다.

이미지를 어떤 용도로 사용할지에 따라 위에서 적합한 형식을 선택하세요. 그런 다음 다음 단계로 넘어가서 이미지 스타일이 웹사이트 전체에서 동일하게 유지되도록 하세요.

2단계: 모든 사진에서 동일한 스타일로 촬영

연속성은 전자 상거래에서 사진의 핵심입니다. 브랜드의 전반적인 모양을 설정하고 전체 웹 사이트에서 표준화된 느낌을 만듭니다.

예를 들어 브랜드에서는 모든 제품 이미지에 하나의 배경색을 사용하는 것이 일반적입니다.

이것은 이미지의 크기와 스타일에도 적용됩니다. 대부분의 제품 이미지가 가로 방향인 경우 몇 장의 사진을 가로 방향으로 섞지 마십시오. 라이프스타일 사진과 제품 사진을 믹스에 포함하는 것은 환영하지만 대부분의 촬영에 대해 하나의 스타일을 고수하는 것이 가장 좋습니다.

3단계: 제품 사진과 라이프스타일 사진의 조합 만들기

언급했듯이 대부분의 제품 사진에 한 가지 유형의 사진 스타일을 사용하고 싶을 것입니다. 그러나 단색 배경과 제품의 다른 보기가 있는 표준 제품 사진을 보완하기 위해 일부 라이프스타일 사진을 포함하는 것이 필수적입니다.

이커머스 기업은 고객이 직접 제품을 입어보거나 만져볼 수 없는 단점이 있습니다. 라이프스타일 사진이 등장하는 곳입니다. 사용자는 제품이 작동하는 모습을 볼 수 있습니다. 셔츠가 몸 위로 드리워지는 방식 또는 사람이 실제로 서 있는 스케이트보드 크기.

4단계: 적합한 파일 이름 및 제목 선택

모든 이미지 파일에는 이름이 있으며 Shopify 해당 파일 이름을 가져와서 웹사이트의 메타데이터에 게시합니다(모든 전자상거래 플랫폼이 이 작업을 수행함).

따라서 사진을 다른 이름으로 저장하면 새-사진(1).jpg 컴퓨터에서 사진을 업로드하고 매장에 업로드하면 검색 엔진은 사진의 내용에 대한 정보를 전혀 갖지 못합니다. 이는 SEO에 해를 끼칠 수 있습니다.

이미지를 최적화할 때 검색 엔진(및 시각 장애가 있는 사용자)이 이미지의 내용을 이해할 수 있도록 다음 단계를 수행하십시오.

이미지 안에 있는 내용을 연상시키는 파일 이름을 추가합니다.
혹시 일반 파일명을 업로드 했다면 이미지 변경 Title in Shopify. 이는 기본값을 대체합니다.
이미지에 표시된 내용을 더욱 강력하게 표현하려면 alt 태그를 사용하세요. 이것은 시각 장애인을 위해 사용자 경험이 개선되었음을 보여주기 때문에 검색 엔진이 보는 주요 요소입니다.

5단계: 업로드 전 또는 업로드 중에 이미지 압축

Shopify 서버에 업로드된 모든 이미지에 대해 자동 압축을 제공하지만 전적으로 의존해서는 안 됩니다.

가장 좋은 방법은 이미지를 업로드하기 전에 타사 도구를 사용하여 이미지를 압축하는 것입니다. Shopify, 또는 설치 Shopify plugin 업로드 시 사진을 자동으로 압축합니다.

앱 경로로 이동하는 것이 훨씬 쉽지만 대부분 구독이 필요하므로 예산을 유지해야 하는지 이해합니다.

이미지 압축에 적합한 일부 앱은 다음과 같습니다.

무료 평가판으로 이러한 앱을 테스트하여 이미지를 얼마나 잘 압축하고 프로세스가 얼마나 자동화되어 있는지 이해하십시오. 그런 다음 구독을 약정할 수 있습니다. 타사 도구의 경우 다음을 권장합니다. TinyPNG 하고 이미지 Resizer.

6단계: 무료 이미지 찾기 앱 고려

전자상거래 브랜드가 무료 대안을 찾거나 제조업체의 웹사이트에서 사진을 가져오는 대신 자체 사진을 찍는 것이 매우 권장되지만 무료 이미지와 함께 사용하기에 적합한 온라인 상점 영역이 있습니다.

예를 들어 블로그 게시물을 보완하기 위해 협곡을 내려다보고 있는 누군가의 풍경 사진이 필요할 수 있습니다. 반면에 사진을 영웅 이미지의 배경으로 사용하여 실제 제품 이미지와 설명을 배경 위에 놓을 수 있습니다.

이러한 상황에서는 다음과 같은 크리에이티브 커먼즈 라이센스 이미지 사이트를 사용하는 것이 좋습니다.

크리에이티브 커먼즈 라이선스가 이미지를 무료로 가져와 웹사이트에 올릴 수 있다는 의미는 아니라는 점을 지적하는 것이 중요합니다. 간혹 그런 경우가 있지만 각 이미지를 확인하여 사용 권한이 있는지 확인해야 합니다.

예를 들어 크리에이티브 커먼즈 라이선스는 다음과 같이 알려줍니다.

상업적 또는 비상업적 목적으로 이미지를 사용할 수 있는 경우
크리에이터의 크레딧을 지정해야 하거나 단순히 권장하는 경우 그렇게 하는 경우
어떤 식으로든 이미지를 수정할 수 있는 경우

또한 한푼도 지불하지 않고 크기 조정, 필터 및 자르기를 제어할 수 있는 무료 이미지 편집 앱이 많이 있습니다.

다음을 제안합니다.

7단계: A/B 테스트를 실행하여 최상의 이미지를 파악하고 Formats

사진에 적절한 파일 이름을 붙이고, 크기를 조절하고, 자르고, 완벽한 형식과 크기를 결정한 후에는 매장에서 사진이 어떻게 보이는지 확인할 차례입니다.

운 좋게도 손가락을 꼬지 말고 이미지가 변환에 가장 적합하기를 바랍니다. 제품 페이지, 랜딩 페이지 및 홈페이지에 동일한 이미지의 여러 변형을 업로드한 다음 어떤 이미지가 전환 측면에서 가장 잘 수행되는지 확인할 수 있습니다.

모두 테마 과학자 하고 장군 여러 부분에 대한 A/B 테스트 기능을 제공합니다. Shopify 디자인.

A/B 테스트의 장점은 실험이 끝나지 않는다는 것입니다. 웹 사이트의 모든 측면을 주시할 수 있습니다. 시간이 지남에 따라 추진력을 잃는 이미지를 교체하고 한 기간 동안 여러 테스트를 실행할 수 있습니다.

Shopify 이미지 크기 가이드: 결론

정사각형 이미지를 고수하는 것은 전자상거래 사진이 잘리지 않도록 하는 한 가지 방법입니다. 그러나 이 규칙이 항상 귀하의 사진에 적용되는 것은 아니라는 것을 알게 될 수 있습니다. Shopify 테마.

따라서 테마가 가장 잘 처리할 수 있는 것을 파악하기 위해 제품, 컬렉션 및 배너에 여러 이미지 크기를 업로드하는 것이 좋습니다. 그렇지 않으면 2046 x 2046 픽셀 표준을 선호합니다. 그러나 배너, 로고 및 슬라이드쇼의 경우 이 기사에서 위에 언급된 보다 구체적인 크기를 사용하고 싶을 것입니다.

설명이 필요한 경우 아래 의견에 알려주십시오. Shopify 이미지 크기!