Shopify memberi Anda ruang upload yang lebih leluasa daripada marketplace manapun — 5000×5000 piksel, 20MB per file, berbagai format. Kebebasan itu juga jebakannya. Seller upload apa saja yang keluar dari kamera, tema memotongnya dengan cara yang tidak mereka duga, pengunjung mobile menunggu empat detik untuk gambar hero, dan bounce rate diam-diam naik. Panduan ini menjawab sepuluh pertanyaan yang benar-benar ditanyakan seller Shopify tentang gambar produk — spesifikasi, tema, performa, SEO, dan varian — lengkap dengan angka yang Anda butuhkan untuk mengambil keputusan.
Berapa Ukuran Gambar Produk Shopify yang Tepat?
Upload pada 2048×2048 piksel, persegi. Itu angka yang direkomendasikan dokumentasi resmi Shopify, dan itu juga ukuran yang jadi acuan semua tema besar.
| Peran gambar | Ukuran rekomendasi | Rasio aspek | Alasan ukuran ini |
|---|---|---|---|
| Gambar produk (master) | 2048×2048 px | 1:1 | Zoom + rendering retina |
| Gambar produk (minimum) | 800×800 px | 1:1 | Di bawah ini, zoom berhenti bekerja |
| Gambar koleksi | 1024×1024 px | 1:1 | Grid tampilan tema |
| Hero / banner | 1920×1080 px | 16:9 | Desktop full-width |
| Slideshow | 1600×500 sampai 1920×600 px | 3:1 sampai 4:1 | Tergantung tema |
| Logo | 450×200 px | ~2:1 | Tampilan header |
| Favicon | 32×32 px | 1:1 | Tab browser |
Batas keras upload: 5000×5000 px, 20MB. Lebih dari itu ditolak. Tapi "bisa upload" dan "sebaiknya upload" itu beda — lihat bagian ukuran file di bawah.
Ukuran File Berapa yang Membuat Halaman Tetap Cepat?
Panduan resmi Shopify menetapkan target kerja di 200–500KB per gambar produk, dan toko yang didominasi mobile sebaiknya mengincar lebih dekat ke 200–300KB.
Kenapa ini penting: setiap 100KB bobot gambar menambah sekitar 150-300ms waktu muat pada koneksi mobile 4G. Halaman produk dengan 10 gambar seberat 2MB per gambar sama dengan 20MB payload — itu berarti waktu muat 30+ detik di jaringan mobile yang lebih lambat, yang menurut telemetri Shopify sangat berkorelasi dengan cart abandonment.
| Bobot gambar | Waktu muat (4G) | Yang terjadi |
|---|---|---|
| <200KB | <1d | Cepat, tanpa jeda terasa |
| 200–500KB | 1–2d | Wajar untuk gambar hero/produk |
| 500KB–1MB | 2–4d | Jeda terasa, risiko bounce naik |
| >1MB | >4d | Bounce signifikan di mobile |
Shopify otomatis mengompresi dan menyajikan varian WebP, tapi hanya jika sumber Anda sudah dioptimasi. Upload PNG 15MB dan Shopify akan mengompresinya, tapi auto-compression itu konservatif — hasil jauh lebih baik jika Anda kompresi sendiri ke JPEG quality 80-85 sebelum upload.
Sebaiknya Pakai JPEG, PNG, WebP, atau SVG?
Pilihan format tergantung jenis gambar.
| Format | Pakai untuk | Hindari untuk | Catatan |
|---|---|---|---|
| JPEG | Foto produk, lifestyle shot | Gambar yang butuh transparansi | Quality 80-85 adalah titik manis |
| PNG | Logo, ikon, infografis dengan transparansi | Foto (ukuran file membengkak) | Pakai hanya jika butuh alpha channel |
| WebP | Semua (jika bisa export) | Browser lama (jarang jadi masalah di 2026) | 25-35% lebih kecil dari JPEG pada kualitas sama |
| SVG | Ikon, logo, grafis sederhana | Foto produk | Skalabel tanpa batas, file sangat kecil |
| GIF | Demo animasi (secukupnya) | Yang lain | Pakai MP4/WebM untuk animasi |
Shopify menyajikan WebP otomatis ke browser yang mendukung, terlepas dari apa yang Anda upload — jadi jangan stres soal format upload. Fokus saja apakah sumber berkualitas tinggi dan di bawah target ukuran file. JPEG quality 85 adalah default aman untuk foto produk.
Haruskah Saya Pakai Gambar Persegi di Shopify?
Tidak — tapi sebaiknya iya. Mayoritas tema Shopify default ke grid tampilan persegi, dan upload non-persegi akan dipotong. Kalau tema Anda mengharapkan 1:1 dan Anda upload 4:3, entah bagian atas atau bawah produk terpotong, atau gambar mengambang di kotak berpadding putih yang tampak tidak konsisten dibanding yang lain.
Kapan persegi bekerja: Grid produk default, halaman koleksi, hasil pencarian, carousel produk terkait. Ini 90% use case.
Kapan Anda mungkin memilih portrait (3:4 atau 4:5): Toko fashion yang fokus pada shot on-model full body, di mana komposisi vertikal itu penting. Ini memerlukan tema yang memang didesain untuk rasio aspek portrait (Dawn dengan pengaturan tema, Impact, Impulse) — jangan paksakan portrait ke tema yang default persegi.
Kapan landscape (16:9) cocok: Banner hero, shot lifestyle pembuka suasana yang dipakai sebagai gambar sekunder. Jangan jadikan gambar produk utama di tema grid persegi.
Alur aman: ambil foto lebih luas dari yang dibutuhkan, crop ke 2048×2048 persegi untuk gambar produk master Anda, lalu buat varian 2048×2048 tambahan untuk sudut alternatif. Pakai komposisi landscape hanya di banner dan slideshow.
Bagaimana Tema Shopify Mempengaruhi Tampilan Gambar?
Setiap tema memotong dan mengatur ukuran gambar berbeda-beda — ini sumber tunggal paling umum keluhan "foto saya jelek di situs". Sebelum finalisasi spesifikasi gambar, uji di tema Anda yang sebenarnya.
| Tema | Crop halaman produk | Grid koleksi | Catatan |
|---|---|---|---|
| Dawn (default Shopify) | Bisa diatur (persegi, portrait, landscape, natural) | Mengikuti setting halaman produk | Paling fleksibel |
| Debut | Persegi wajib | Persegi | Tampilan 1:1 ketat |
| Impact | Ramah portrait | Bisa diatur | Optimal untuk fashion |
| Motion | Full-bleed, dikontrol tema | Gaya card | Banyak animasi |
| Minimal | Di tengah dengan padding | Persegi | Menambah ruang putih jika bukan persegi |
Tes praktis: Setelah upload, lihat halaman produk dan halaman koleksi Anda di desktop dan mobile. Kalau crop produk terlihat salah, perbaiki gambar sumber — jangan mengandalkan penyesuaian CSS tema, yang akan rusak saat update.
Bagaimana Perbandingan dengan Amazon dan eBay?
Kalau Anda jual di multi-platform dari pustaka produk yang sama, spesifikasinya berbeda dalam aspek penting.
| Spesifikasi | Shopify | Amazon | eBay |
|---|---|---|---|
| Ukuran rekomendasi | 2048×2048 px | 2000×2000 px | 1600×1600 px |
| Ukuran minimum | 800×800 px | 1000×1000 px (zoom) | 500×500 px |
| Ukuran maksimum | 5000×5000 px, 20MB | 10000 px sisi terpanjang | 7MB |
| Rasio aspek | Fleksibel per tema | 1:1 wajib | 1:1 rekomendasi |
| Background | Pilihan Anda | Putih murni (gambar utama) | Bersih, tidak wajib putih |
| Logo/watermark | Diizinkan | Dilarang di gambar utama | Tidak diizinkan di gambar utama |
| Text overlay | Diizinkan | Dilarang di gambar utama, diizinkan di sekunder | Terbatas di gambar utama |
| Format file | JPEG, PNG, WebP, GIF, SVG | JPEG, PNG, TIFF, GIF | JPEG, PNG, GIF, BMP, TIFF |
Implikasi praktis: Satu gambar yang compliant Amazon (2000×2000 putih murni, tanpa teks) bisa dipakai di mana saja, tapi terlalu bersih untuk Shopify di mana gambar lifestyle dan infografis lebih baik konversinya. Bangun pustaka gambar Anda dengan master 2048×2048 background bersih, lalu varian di-layer di atasnya.
Alt Text Apa yang Sebaiknya Saya Tulis untuk SEO?
Alt text melayani tiga audiens: screen reader, Google image search, dan fallback gambar rusak. Tulis untuk dua yang pertama — yang ketiga akan terurus sendiri.
Rumus alt text yang bagus: [Nama produk] [deskriptor kunci] [konteks bila relevan]
| Jenis gambar | Alt text lemah | Alt text kuat |
|---|---|---|
| Produk utama | "mug putih" | "Mug kopi keramik putih 12oz dengan finishing matte" |
| Varian warna | "versi merah" | "Mug kopi keramik merah 12oz finishing matte" |
| Shot lifestyle | "mug di meja" | "Mug keramik putih di meja sarapan kayu dengan kopi pagi" |
| Shot detail | "close up" | "Close-up mug keramik putih matte memperlihatkan tekstur gagang" |
| Infografis | "diagram" | "Infografis dimensi mug kopi memperlihatkan tinggi 3.5 inci dan diameter 4 inci" |
Aturan:
- Di bawah 125 karakter (screen reader memotong di panjang ini)
- Masukkan keyword utama dengan natural, jangan keyword stuffing
- Deskripsikan apa yang benar-benar terlihat, jangan hanya copy judul produk
- Alt text berbeda untuk tiap gambar di produk yang sama (jangan copy identik)
- Hindari frasa seperti "gambar dari" atau "foto dari" — teknologi asistif menambahkannya otomatis
Bagaimana Menangani Gambar Varian (Warna, Ukuran, Gaya)?
Shopify membolehkan Anda menetapkan gambar ke varian produk tertentu. Di sinilah kebanyakan toko kurang perform.
Setup minimum viable: Satu gambar per varian warna yang memperlihatkan warna itu persis. Inilah yang diharapkan pembeli — klik "merah" harus menampilkan produk merah, bukan yang putih.
Setup lebih baik untuk fashion dan home:
- Gambar varian utama: Produk pada sudut sama, pencahayaan sama, komposisi sama di semua warna (untuk perbandingan visual yang mudah)
- Gambar lifestyle sekunder: Produk sedang dipakai, dicocokkan warnanya dengan varian
- Gambar detail: Close-up memperlihatkan warna/tekstur secara akurat
Varian ukuran tidak butuh gambar terpisah kecuali produk terlihat beda secara visual pada ukuran berbeda (misal tas kecil vs tas besar dengan proporsi berbeda). Untuk pakaian, satu set gambar on-model plus size chart sudah cukup.
Akurasi warna itu kritis: Pembeli berharap gambar varian cocok dengan realita di layar mereka. Kalau pencahayaan studio Anda menggeser warna, koreksi di post sebelum upload. Retur yang didorong warna sangat dipicu oleh ketidakcocokan gambar-ke-realita di varian warna.
Apakah Kecepatan Halaman dan Ukuran Gambar Benar-benar Mempengaruhi Konversi?
Ya, dapat diukur. Data Core Web Vitals Google dan studi benchmark e-commerce secara konsisten menunjukkan:
- LCP (Largest Contentful Paint) di bawah 2.5 detik: baseline untuk ranking yang baik
- LCP antara 2.5-4 detik: penurunan bermakna pada metrik engagement
- LCP di atas 4 detik: kenaikan bounce rate substansial di mobile
Gambar produk hero Anda biasanya adalah elemen LCP di halaman produk. Memangkas 500KB darinya biasanya menurunkan LCP 200-500ms di mobile 4G, dan efeknya berlipat sepanjang sesi.
| Peningkatan kecepatan halaman | Efek konversi tipikal |
|---|---|
| 1d → 2d | Baseline, tidak ada efek |
| 3d → 2d | +3-7% konversi |
| 5d → 2d | +10-15% konversi di mobile |
| 8d → 3d | +25-30% konversi di mobile |
Inilah alasan target ukuran file 200-500KB lebih penting dari yang terasa. Sepuluh gambar 500KB sama dengan halaman 5MB. Sepuluh gambar 2MB sama dengan halaman 20MB — selisihnya terasa nyata bagi tiap pengunjung mobile.
Checklist Pra-Upload
Jalankan ini sebelum menambah gambar ke produk manapun:
- Ukuran master 2048×2048 piksel (atau 2000×2000 kalau multi-channel)
- Rasio aspek persegi cocok dengan grid default tema
- Diexport sebagai JPEG quality 80-85 (atau WebP quality 80)
- Ukuran file antara 200-500KB per gambar
- Nama file deskriptif:
nama-produk-warna-sudut.jpg(bukanIMG_4821.jpg) - Alt text ditulis untuk tiap gambar, di bawah 125 karakter
- Warna cocok dengan realita (cek di display terkalibrasi)
- Gambar varian ditetapkan dengan benar di admin Shopify
- Preview dicek di desktop dan mobile setelah upload
- Crop diuji di tema spesifik Anda
FAQ
Apakah Shopify otomatis mengompresi gambar saya?
Ya. Shopify menyajikan versi yang dioptimasi CDN, sering sebagai WebP ke browser yang mendukung, berukuran sesuai viewport. Tapi kompresi itu lossy di atas apa yang Anda upload — sumber yang sudah dioptimasi selalu menghasilkan hasil lebih baik daripada mengandalkan auto-compression.
Bisakah saya pakai gambar produk yang sama di Shopify dan Amazon?
Gambar produk utama Anda — ya, satu gambar 2000×2000 background putih murni bisa untuk keduanya. Gambar sekunder biasanya perlu berbeda: Amazon melarang logo dan sebagian besar text overlay di gambar utama dan aturannya lebih ketat untuk gambar sekunder, sedangkan Shopify memberi kebebasan kreatif penuh. Simpan folder terpisah ditandai per channel.
Berapa ukuran banner hero ideal untuk homepage saya?
1920×1080 piksel adalah default aman. Beberapa tema mendukung 2400×1200 untuk display ultra-wide. Selalu sertakan crop yang dioptimasi mobile (1080×1080 atau 1080×1350) — pengguna mobile harus melihat crop ketat yang fokus produk, bukan potongan kecil tengah banner desktop Anda.
Berapa banyak gambar yang sebaiknya saya punya per produk?
Tujuh sampai delapan gambar adalah titik manis untuk sebagian besar kategori: satu utama background putih, 2-3 sudut tambahan, 1-2 lifestyle/in-use, 1 referensi skala/ukuran, 1 infografis. Kurang dari empat mengesankan listing tidak lengkap; lebih dari sepuluh biasanya menambah noise tanpa mendongkrak konversi.
Kenapa gambar produk saya terlihat buram di mobile?
Tiga penyebab umum: (1) gambar sumber di bawah 2048px dan jadi stretch, (2) tema menyajikan varian yang sangat terkompresi karena file sumber Anda terlalu besar, (3) display Retina mobile merender beda dari desktop — gambar yang tajam di desktop bisa terlihat lembek di layar mobile kepadatan 3x. Solusi: upload sumber tajam 2048×2048 dan biarkan Shopify menangani downscaling.