Shopify는 각 이미지 유형에 대한 특정 요구 사항이 있으며, 잘못된 크기를 사용하면 흐릿한 제품 사진, 깨진 레이아웃, 또는 전환율에 영향을 미치는 느린 페이지 로드가 발생합니다. 이 가이드는 제품 이미지, 배너, 컬렉션 이미지, 로고 등 모든 Shopify 이미지 유형에 대한 올바른 치수를 다룹니다.
Shopify 이미지 크기 — 빠른 참조
- 제품 이미지: 2048×2048 px (정사각형, 1:1)
- 컬렉션 / 카테고리 이미지: 1800×1000 px (16:9)
- 히어로 / 슬라이드쇼 배너: 1800×600 px~2000×800 px
- 로고: 최대 450×250 px
- 블로그 포스트 대표 이미지: 1200×675 px (16:9)
- 파비콘: 32×32 px (또는 16×16 px)
- 최대 파일 크기: 이미지당 20 MB
- 지원 형식: JPG, PNG, GIF, WebP
Shopify 제품 이미지 크기
Shopify는 제품 이미지에 2048×2048 px 정사각형을 권장합니다. 그 이유는:
- 정사각형 (1:1) 비율: 모든 Shopify 테마는 일관된 정사각형 그리드에 제품 이미지를 표시합니다. 정사각형이 아닌 이미지는 테마에 따라 레터박스 처리되거나 잘립니다 — 예기치 않은 자름을 방지하려면 정사각형 이미지를 사용하세요.
- 2048 px: Shopify의 내장 줌 기능을 지원하기에 충분히 큽니다. 고객이 제품 이미지를 확대하면, Shopify는 업로드된 해상도까지 스케일업합니다. 2048 px로 업로드하면 줌이 선명하게 보입니다.
- 일관성: 컬렉션의 모든 제품 이미지는 동일한 비율이어야 합니다. 혼합 비율은 제품 그리드를 불균형하게 보이게 합니다.
제품 이미지가 직사각형인 경우(예: 배너 제품 또는 의류 플랫 레이), 두 가지 옵션이 있습니다: 정사각형으로 자르거나, 스토어의 모든 이미지에서 일관된 비율을 사용하세요(Shopify는 스토어의 모든 이미지가 일치하는 한 모든 비율을 허용합니다).
히어로 배너 / 슬라이드쇼 이미지 크기
Shopify 히어로 배너(홈페이지의 전체 너비 이미지)는 고객 화면에 따라 다른 너비로 표시됩니다. 다양한 기기에서 잘 작동하는 안전한 크기:
- 너비: 1800~2000 px (대부분의 데스크톱 모니터 커버)
- 높이: 600~800 px (표준 배너) 또는 1080 px (전체 높이 히어로)
- 화면 비율: 표준 배너의 경우 약 3:1~2.5:1
- 파일 형식: 사진에는 JPG (500 KB~1 MB), 텍스트가 많은 그래픽에는 PNG
빠른 접힌 위 로딩을 위해 히어로 배너를 1 MB 이하로 유지하세요. 느린 히어로 이미지는 LCP (최대 콘텐츠풀 페인트)와 전환율에 직접적인 영향을 미칩니다.
컬렉션 이미지 크기
컬렉션 이미지는 컬렉션 목록 페이지(예: "여성 신발", "여름 컬렉션")에 나타납니다. 권장 크기:
- 가로 컬렉션 이미지에는 1800×1000 px (16:9)
- 정사각형 컬렉션 썸네일에는 800×800 px (1:1)
Shopify 로고 크기
Shopify 테마는 로고 표시를 최대 너비 450 px로 제한합니다. 업로드 치수:
- 최대 크기: 450×250 px
- 형식: 투명 배경의 PNG (어떤 헤더 색상에서도 올바르게 표시)
- 레티나 디스플레이용: 2배(900×500 px)로 업로드 — Shopify가 절반 크기로 표시
Shopify 이미지 파일 크기 제한
Shopify는 파일당 최대 20 MB의 이미지를 수용하지만, 큰 이미지는 스토어 속도를 저하시킵니다. 실용적인 목표치:
- 제품 이미지: 500 KB 이하 (Shopify는 자동으로 최적화하여 CDN을 통해 제공하지만, 더 작은 원본은 처리를 줄임)
- 배너 이미지: 1 MB 이하
- 로고: 100 KB 이하
Shopify는 자동으로 이미지를 압축하고 글로벌 CDN을 통해 제공합니다. 그러나 원본 업로드가 이미 최적화되어 있을 때 가장 잘 작동합니다 — 원본이 너무 크면 Shopify의 압축은 손실이 있으며 JPEG 아티팩트를 추가합니다.
Shopify의 WebP 지원
Shopify는 업로드된 이미지를 자동으로 WebP로 변환하고 지원하는 브라우저(모든 최신 브라우저)에 WebP를 제공합니다. 이는 다음을 의미합니다:
- JPG 또는 PNG를 업로드할 수 있습니다 — Shopify가 WebP 변환을 처리
- WebP를 직접 업로드하는 것도 지원됩니다
- Shopify는 각 화면에 맞는 크기를 제공하기 위해 반응형 이미지(srcset)를 사용
Shopify 제품 이미지 준비 방법
- 고해상도로 제품 사진을 촬영하거나 소싱하세요 (짧은 면에서 최소 2000 px).
- 이미지가 정사각형이 아닌 경우, 크롭 도구를 사용하여 1:1 비율로 자르세요. 주변에 약간의 여백을 두고 제품을 가운데 배치하세요.
- 리사이즈 도구를 사용하여 이미지를 정확히 2048×2048 px로 설정하세요.
- 압축기를 사용하여 JPG 파일을 80~85% 품질에서 500 KB 이하로 줄이세요.
- 제품 사진에는 JPG, 투명도가 있는 이미지(예: 흰색에서 배경 제거)에는 PNG로 저장하세요.
일반적인 Shopify 이미지 문제
- 제품 그리드가 불균형하게 보임: 이미지가 혼합 비율을 가지고 있습니다. 수정하려면 모든 제품 이미지를 1:1(정사각형)로 표준화하세요.
- 줌 시 제품 이미지가 흐릿하게 보임: 이미지가 너무 작게 업로드되었습니다 (1000 px 이하). 최소 2048 px를 사용하세요.
- 페이지 로딩이 느림: 배너 또는 제품 이미지가 너무 큽니다 (2 MB 초과). 업로드 전에 압축하고 리사이즈하세요.
- 레티나 화면에서 로고가 흐릿하게 보임: 로고가 2배 대신 표시 크기로 업로드되었습니다. 450×250 px 표시 로고에는 900×500 px로 업로드하세요.
- 컬러 헤더에서 로고 배경이 보임: 로고가 JPG로 업로드되었습니다 (흰색 배경). 투명 배경의 PNG로 다시 내보내세요.