Panduan Ukuran Gambar Shopify Terbaik

Gunakan 2048 x 2048 piksel sebagai master Shopify Anda dan jaga agar setiap file yang dikirimkan berada di bawah 500 KB. Shopify mengizinkan gambar hingga 20 MB dan 4472 piksel persegi, tetapi angka-angka tersebut menggambarkan apa yang ditoleransi oleh platform, bukan apa yang dibutuhkan oleh toko online yang cepat.

Angka 20 MB adalah angka yang paling sering dikutip oleh sebagian besar panduan, dan itu adalah angka yang salah untuk dijadikan acuan desain. Apa yang diizinkan Shopify dan apa yang dihargai Shopify adalah dua hal yang berbeda. Halaman produk yang memuat 8 gambar dengan masing-masing berukuran 3 MB adalah halaman berukuran 24 MB, dan pembeli lewat ponsel akan pergi sebelum halaman tersebut selesai dimuat.

Ukuran gambar Shopify berdasarkan penempatan

Gambar produk harus berbentuk persegi pada 2048 piksel, sementara banner, ubin koleksi, dan logo masing-masing membutuhkan dimensinya sendiri. Menggunakan satu ukuran di semua tempat akan menghasilkan banner yang melar dan gambar koleksi yang terpotong.

Tema memotong gambar secara berbeda, dan banner yang terlihat benar pada pratinjau desktop sering kali terpotong di bagian tengah saat dibuka di ponsel. Jaga agar bagian penting dari banner berada di 60 persen area tengah sehingga tidak ada tema yang dapat memotongnya.

Mengapa 500 KB adalah angka yang penting

Bobot halaman menentukan seberapa cepat toko online dimuat, dan gambar menyumbang sebagian besar dari bobot tersebut pada halaman produk biasa. Halaman dengan total di bawah 2 MB dapat dimuat dengan nyaman menggunakan data seluler, sedangkan halaman berukuran 24 MB tidak.

Pembeli yang menggunakan ponsel merupakan mayoritas lalu lintas untuk sebagian besar toko, dan koneksi seluler jauh lebih bervariasi daripada broadband kantor. Setiap detik waktu pemuatan berdampak pada konversi, yang membuat bobot gambar menjadi masalah pendapatan dan bukan sekadar masalah teknis. Mengurangi 8 gambar produk dari 3 MB menjadi 300 KB akan memangkas 21 MB dari halaman dan tidak mengubah apa pun yang dapat dilihat oleh pembeli.

Apakah Shopify mengompresi gambar untuk Anda

Shopify menyajikan varian yang telah diubah ukurannya melalui content delivery network (CDN) miliknya dan mengonversinya ke WebP secara otomatis untuk browser yang mendukung. Platform ini melakukan tugasnya dengan cukup baik, dan bekerja dari apa pun yang Anda unggah.

Poin terakhir itulah yang menjadi batasannya. Shopify menghasilkan varian yang lebih kecil dari file asli Anda, sehingga unggahan 5 MB yang dikompresi dengan buruk akan menghasilkan varian yang lebih besar daripada unggahan 400 KB yang dipersiapkan dengan baik. Mengompresi sebelum mengunggah juga mengurangi penggunaan penyimpanan Anda sendiri dan membuat impor massal jauh lebih cepat, karena impor 500 produk hanya memindahkan 200 MB, bukan 2.5 GB.

Cara mempersiapkan gambar untuk Shopify

Untuk menghasilkan halaman produk yang cepat, ikuti 6 langkah ini.

1. Ekspor master persegi pada ukuran 2048 x 2048 piksel dari editor foto Anda.
2. Ubah ukuran banner atau gambar gaya hidup ke lebar tampilan sebenarnya, digandakan untuk layar dengan kepadatan tinggi.
3. Konversikan foto ke WebP, atau pertahankan JPG jika alur kerja Anda bergantung padanya, karena Shopify akan mengonversinya dalam kedua cara tersebut.
4. Kompres ke ukuran target, menggunakan 300 KB untuk foto produk dan 400 KB untuk banner.
5. Beri nama file berdasarkan kode produk dan sudut pandang sehingga impor CSV massal memetakan gambar ke produk yang tepat.
6. Unggah dan periksa halaman produk di ponsel, bukan hanya pada pratinjau desktop.

WebP di Shopify

Shopify telah mendukung WebP secara bawaan selama bertahun-tahun dan mengonversi file JPG dan PNG yang diunggah secara otomatis untuk browser yang mendukungnya. Mengunggah WebP secara langsung juga diterima dan memberi Anda kendali atas kompresi daripada menyerahkannya kepada platform.

WebP mencapai kualitas visual yang sama dengan JPG dengan ukuran file 25 hingga 35 persen lebih kecil, yang sangat berharga pada halaman yang memuat 8 foto. Satu hal yang harus dihindari adalah mengunggah WebP jika file tersebut nantinya akan diunduh oleh pemasok atau dikirim ke percetakan, karena tujuan tersebut masih membutuhkan format JPG.

Memperbaiki halaman produk yang lambat

Mulailah dengan gambar terbesar di halaman tersebut, karena satu file terbesar biasanya menyumbang sebagian besar keterlambatan. Pada toko online Shopify, itu biasanya berupa banner beranda atau foto produk pertama.

• Ubah ukuran sebelum mengompresi. Banner berukuran 4000 piksel dalam slot 1920 piksel membuang 75 persen datanya sia-sia.
• Kurangi jumlah gambar di atas lipatan (above the fold). Galeri berisi 12 gambar yang dimuat sekaligus akan memperlambat segalanya.
• Pastikan pemuatan tertunda (lazy loading) aktif untuk gambar di bawah lipatan, yang biasanya sudah ditangani secara bawaan oleh sebagian besar tema modern.
• Ganti file GIF animasi dengan video, karena GIF pendek sering kali berbobot lebih besar daripada seluruh sisa halaman lainnya.
• Audit aplikasi Anda. Widget ulasan, popup, dan lencana kepercayaan sering kali memuat gambar dan skrip mereka sendiri.

Teks alt dan nama file gambar

Tulis teks alt yang mendeskripsikan produk untuk pembeli yang menggunakan pembaca layar, dan beri nama file berdasarkan produk, bukan berdasarkan kamera. File bernama IMG_4821.jpg tidak memberikan informasi apa pun kepada mesin pencari dan pembeli.

Gunakan pola seperti navy-linen-shirt-front.jpg, yang tetap mudah dibaca dalam impor massal, terurut secara konsisten dalam folder, dan mendeskripsikan gambar dalam hasil pencarian. Teks alt harus menjelaskan apa yang ditunjukkan oleh foto tersebut, termasuk warna, bahan, dan sudut pandang, tanpa mengulangi judul produk kata demi kata. Kedua bidang ini hanya membutuhkan waktu beberapa detik per produk dan meningkatkan performa toko Anda di pencarian gambar.

Menguji perubahan sebelum menerapkannya secara luas

Proses 5 produk terlebih dahulu, terbitkan, dan periksa halaman tersebut pada ponsel asli sebelum menjalankan seluruh katalog. Kesalahan pengaturan yang diterapkan pada 500 produk membutuhkan waktu jauh lebih lama untuk diperbaiki daripada mencegahnya.

Periksa 3 hal pada produk uji coba. Pastikan gambar terlihat tajam pada perbesaran penuh, karena pembeli sangat sering menggunakan fitur zoom pada pakaian dan perhiasan. Pastikan kisi koleksi menunjukkan pemotongan yang konsisten. Pastikan halaman dimuat dengan cepat menggunakan data seluler, bukan menggunakan broadband kantor. Baru setelah itu terapkan pengaturan yang sama ke semua file lainnya.

Aplikasi gambar versus melakukannya sebelum mengunggah

Aplikasi kompresi mengenakan biaya bulanan untuk menyelesaikan masalah yang sebenarnya dapat Anda selesaikan sekali saja sebelum mengunggah. Aplikasi ini berguna ketika toko terus-menerus menerima gambar baru dari banyak orang dan tidak ada yang mengontrol apa yang diunggah.

Toko dengan katalog yang stabil dan satu orang yang mengelola gambar tidak memerlukan biaya berulang. Mengompresi pustaka gambar sekali dan mengompresi foto baru saat tiba akan memberikan hasil yang sama. Pertimbangkan kembali ketika katalog tumbuh melampaui apa yang dapat Anda proses secara manual, atau ketika beberapa staf mengunggah gambar tanpa mengikuti spesifikasi.

Kesalahan umum gambar Shopify

Mengunggah langsung dari kamera adalah kesalahan paling merugikan, karena foto beresolusi 24 megapiksel membawa data 10 kali lebih banyak daripada yang dapat ditampilkan oleh toko online. Platform akan menerima file tersebut, dan halaman Anda yang harus membayar dampaknya.

Dua kesalahan lainnya juga sering muncul. Mencampur bentuk gambar dalam satu koleksi menghasilkan kisi yang tidak rapi, karena tema akan memotong gambar menjadi persegi sehingga foto potret akan kehilangan bagian atas dan bawahnya. Menggunakan PNG untuk foto produk akan membengkakkan ukuran file hingga 3 hingga 5 kali lipat tanpa manfaat visual yang terlihat, karena PNG menyimpan setiap piksel secara tepat sedangkan foto tidak memiliki area datar untuk dimanfaatkan.

Menjaga konsistensi katalog

Proses seluruh katalog dalam satu kelompok sehingga setiap foto produk memiliki dimensi, kompresi, dan pembingkaian yang sama. Pembeli yang membandingkan produk akan menyadari ketidakkonsistenan meskipun mereka tidak dapat menyebutkannya secara spesifik.

Konsistensi juga membantu kisi koleksi, di mana gambar dengan bentuk dan kecerahan yang serasi akan terlihat sebagai halaman yang dirancang dengan baik, bukan sekadar halaman yang asal digabungkan. Atur dimensi dan target ukuran sekali saja, lalu terapkan ke setiap file daripada menyesuaikan setiap produk satu per satu.

Memproses katalog dalam satu langkah

Masukkan hingga 500 gambar sekaligus, atau seret arsip ZIP langsung dari fotografer Anda, dan setiap file akan dikembalikan dalam ukuran yang telah diubah dan dikompresi sesuai spesifikasi yang sama. Katalog yang biasanya membutuhkan waktu satu sore penuh menggunakan perangkat lunak desktop kini selesai dalam beberapa menit.

Semuanya berjalan di dalam browser Anda menggunakan prosesor Anda sendiri, sehingga produk yang belum dirilis, foto kampanye musiman, dan fotografi pemasok tidak pernah dikirim ke server. Bagi toko yang sedang mempersiapkan peluncuran di bawah embargo, menjaga file tetap lokal adalah perbedaan antara pengumuman yang terkendali dan kebocoran, dan ini tidak memerlukan biaya tambahan.