Saiz Imej Shopify: Kepentingan Bawah 500 KB

Gunakan 2048 kali 2048 pixels sebagai master Shopify anda dan pastikan setiap fail yang dihantar adalah di bawah 500 KB. Shopify membenarkan imej sehingga 20 MB dan 4472 pixels persegi, tetapi angka tersebut menggambarkan apa yang boleh diterima oleh platform berbanding apa yang diperlukan oleh kedai yang pantas.

Angka 20 MB ialah jumlah yang paling banyak dipetik oleh panduan, dan ia adalah angka yang salah untuk dijadikan asas reka bentuk. Apa yang dibenarkan oleh Shopify dan apa yang diberi ganjaran oleh Shopify adalah perkara yang berbeza. Halaman produk yang mengandungi 8 imej pada 3 MB setiap satu ialah halaman bersaiz 24 MB, dan pembeli mudah alih akan keluar sebelum ia selesai dimuatkan.

Saiz imej Shopify mengikut penempatan

Imej produk haruslah berbentuk segi empat sama pada 2048 pixels, manakala sepanduk, jubin koleksi dan logo masing-masing memerlukan dimensi tersendiri. Menggunakan satu saiz di semua tempat menghasilkan sepanduk yang regang dan imej koleksi yang terpotong.

Tema memotong imej secara berbeza, dan sepanduk yang kelihatan betul pada pratonton desktop sering kali terpotong di bahagian tengah pada telefon. Pastikan bahagian penting sepanduk berada dalam lingkungan 60 peratus di tengah-tengah supaya tiada tema yang boleh memotongnya.

Mengapa 500 KB adalah angka yang penting

Berat halaman menentukan seberapa cepat kedai dimuatkan, dan imej menyumbang sebahagian besar daripada berat tersebut pada halaman produk biasa. Halaman di bawah 2 MB secara keseluruhan dapat dimuatkan dengan selesa menggunakan data mudah alih, manakala halaman 24 MB tidak.

Pembeli yang menggunakan telefon membentuk sebahagian besar trafik untuk kebanyakan kedai, dan sambungan mudah alih adalah jauh lebih tidak menentu berbanding jalur lebar pejabat. Setiap saat masa pemuatan menjejaskan penukaran, yang menjadikan berat imej sebagai persoalan hasil pendapatan dan bukannya masalah teknikal semata-mata. Mengurangkan 8 imej produk daripada 3 MB kepada 300 KB membuang 21 MB daripada halaman dan tidak mengubah apa-apa yang boleh dilihat oleh pembeli.

Adakah Shopify memampatkan imej untuk anda

Shopify menyediakan varian yang telah diubah saiz melalui rangkaian penghantaran kandungan (CDN) miliknya dan menukar kepada WebP secara automatik untuk pelayar yang menyokongnya. Platform ini melakukan tugas yang agak baik, dan ia berfungsi daripada apa sahaja yang anda muat naik.

Perkara terakhir itu adalah hadnya. Shopify menghasilkan varian yang lebih kecil daripada fail asal anda, jadi muat naik 5 MB yang kurang dimampatkan menghasilkan varian yang lebih besar berbanding muat naik 400 KB yang disediakan dengan baik. Memampatkan sebelum muat naik juga mengurangkan penggunaan storan anda sendiri dan menjadikan import pukal jauh lebih pantas, memandangkan import 500 produk hanya memindahkan 200 MB berbanding 2.5 GB.

Cara menyediakan imej untuk Shopify

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

1. Eksport master segi empat sama pada 2048 kali 2048 pixels daripada editor foto anda.
2. Ubah saiz mana-mana sepanduk atau imej gaya hidup kepada lebar paparan sebenar, digandakan untuk skrin ketumpatan tinggi.
3. Tukar foto kepada WebP, atau kekalkan JPG jika aliran kerja anda bergantung padanya, memandangkan Shopify akan menukarnya dalam kedua-dua keadaan.
4. Mampatkan kepada saiz sasaran, menggunakan 300 KB untuk foto produk dan 400 KB untuk sepanduk.
5. Namakan fail mengikut kod produk dan sudut pandangan supaya import CSV pukal memetakan imej ke produk yang betul.
6. Muat naik dan semak halaman produk pada telefon dan bukannya hanya pada pratonton desktop.

WebP pada Shopify

Shopify telah menyokong WebP secara asli selama bertahun-tahun dan menukar fail JPG dan PNG yang dimuat naik secara automatik untuk pelayar yang menyokongnya. Memuat naik WebP secara terus adalah diterima dan memberikan anda kawalan ke atas pemampatan berbanding menyerahkannya kepada platform.

WebP mencapai kualiti visual yang sama seperti JPG pada saiz fail 25 hingga 35 peratus lebih kecil, yang sangat berbaloi untuk halaman yang mengandungi 8 foto. Satu keadaan yang perlu dielakkan adalah memuat naik WebP jika fail tersebut kemudiannya akan dimuat turun oleh pembekal atau dihantar ke kedai cetak, memandangkan destinasi tersebut masih memerlukan JPG.

Memperbaiki halaman produk yang lambat

Mulakan dengan imej terbesar pada halaman, kerana fail tunggal terbesar biasanya menyumbang kepada sebahagian besar kelewatan. Pada kedai Shopify, ia biasanya merupakan sepanduk halaman utama atau foto produk pertama.

• Ubah saiz sebelum memampatkan. Sepanduk 4000 pixel dalam slot 1920 pixel membazirkan 75 peratus datanya.
• Kurangkan bilangan imej di atas lipatan. Galeri 12 imej yang dimuatkan sekali gus melambatkan semua perkara lain.
• Pastikan pemuatan malas diaktifkan untuk imej di bawah lipatan, yang dikendalikan secara lalai oleh kebanyakan tema moden.
• Gantikan fail GIF animasi dengan video, memandangkan GIF pendek sering kali mempunyai berat lebih daripada keseluruhan halaman yang lain.
• Audit aplikasi. Widget ulasan, tetingkap timbul dan lencana kepercayaan sering kali memuatkan imej dan skrip mereka sendiri.

Teks alt dan nama fail imej

Tulis teks alt yang menerangkan produk untuk pembeli yang menggunakan pembaca skrin, dan namakan fail mengikut nama produk dan bukannya nama daripada kamera. Fail bernama IMG_4821.jpg tidak memberikan sebarang maklumat kepada enjin carian dan pembeli.

Gunakan corak seperti navy-linen-shirt-front.jpg, yang kekal mudah dibaca dalam import pukal, disusun secara teratur dalam folder dan menerangkan imej dalam hasil carian. Teks alt harus menyatakan apa yang ditunjukkan oleh foto, termasuk warna, bahan dan sudut pandangan, tanpa mengulang tajuk produk secara bulat-bulat. Kedua-dua medan ini hanya mengambil masa beberapa saat bagi setiap produk dan meningkatkan penampilan kedai dalam carian imej.

Menguji perubahan sebelum melaksanakannya

Proses 5 produk terlebih dahulu, terbitkan produk tersebut, dan semak halaman pada telefon sebenar sebelum menjalankan keseluruhan katalog. Kesilapan tetapan yang digunakan pada 500 produk memerlukan lebih banyak masa untuk diperbetulkan berbanding mencegahnya dari awal.

Semak 3 perkara pada produk ujian. Pastikan imej kelihatan tajam pada zum penuh, memandangkan pembeli banyak menggunakan zum pada pakaian dan barang kemas. Pastikan grid koleksi menunjukkan potongan yang konsisten. Pastikan halaman dimuatkan dengan cepat menggunakan data mudah alih berbanding jalur lebar pejabat. Hanya selepas itu gunakan tetapan yang sama pada semua perkara lain.

Aplikasi imej berbanding melakukannya sebelum muat naik

Aplikasi pemampatan mengenakan caj bulanan untuk menyelesaikan masalah yang boleh anda selesaikan sekali sahaja sebelum memuat naik. Aplikasi ini berguna apabila kedai menerima imej baharu secara berterusan daripada ramai orang dan tiada sesiapa yang mengawal apa yang dimuat naik.

Kedai dengan katalog yang stabil dan seorang individu yang menguruskan imej tidak memerlukan yuran berulang. Memampatkan pustaka sekali dan memampatkan foto baharu semasa ia tiba mencapai hasil yang sama. Pertimbangkan semula apabila katalog berkembang melebihi apa yang boleh anda proses secara manual, atau apabila beberapa kakitangan memuat naik imej tanpa mengikut spesifikasi.

Kesilapan biasa imej Shopify

Memuat naik terus dari kamera adalah kesilapan yang paling merugikan, kerana foto 24 megapixel membawa 10 kali ganda data yang boleh dipaparkan oleh kedai. Platform menerima fail tersebut, dan halaman menanggung akibatnya.

Dua kesilapan lain kerap berlaku. Mencampurkan bentuk imej dalam satu koleksi menghasilkan grid yang tidak kemas, memandangkan tema memotong imej menjadi segi empat sama dan foto potret akan kehilangan bahagian atas dan bawahnya. Menggunakan PNG untuk foto produk melambungkan saiz fail sebanyak 3 hingga 5 kali ganda tanpa sebarang faedah yang ketara, kerana PNG menyimpan setiap pixel secara tepat dan foto tidak mempunyai kawasan rata untuk dimanfaatkan.

Mengekalkan katalog yang konsisten

Proses keseluruhan katalog dalam satu kelompok supaya setiap foto produk berkongsi dimensi, pemampatan dan pembingkaian yang sama. Pembeli yang membandingkan produk akan menyedari ketidakkonsistenan walaupun mereka tidak dapat menyatakannya.

Konsistensi juga membantu grid koleksi, di mana imej dengan bentuk dan kecerahan yang sepadan kelihatan sebagai halaman yang direka bentuk dengan baik dan bukannya halaman yang dipasang secara sembarangan. Tetapkan dimensi dan sasaran saiz sekali sahaja, kemudian gunakannya pada setiap fail berbanding melaraskan setiap produk secara individu.

Memproses katalog dalam satu langkah

Masukkan sehingga 500 imej sekaligus, atau seret arkib ZIP terus daripada jurugambar anda, dan setiap fail akan dikembalikan dalam saiz yang telah diubah dan dimampatkan mengikut spesifikasi yang sama. Katalog yang dahulunya mengambil masa sepanjang petang menggunakan perisian desktop kini selesai dalam beberapa minit sahaja.

Semua proses berjalan di dalam pelayar anda pada pemproses anda sendiri, jadi produk yang belum dikeluarkan, gambar kempen bermusim dan fotografi pembekal tidak pernah sampai ke pelayan. Bagi kedai yang menyediakan pelancaran di bawah embargo, memastikan fail kekal di peringkat tempatan adalah perbezaan antara pengumuman yang terkawal dengan kebocoran maklumat, dan ia tidak memerlukan sebarang kos tambahan.