Gambar produk yang cantik belum tentu sesuai terus dimasukkan ke website. Fail asal daripada telefon mungkin terlalu besar, ruang kosong berbeza antara produk, atau tulisan pada label menjadi kabur selepas dimampatkan. Hasilnya, katalog nampak tidak sekata dan halaman memerlukan lebih banyak data untuk dimuatkan.
Mulakan dengan tiga perkara: tentukan kegunaan gambar, pilih dimensi yang mencukupi, kemudian kecilkan saiz fail sambil memeriksa hasilnya. Panduan ini membantu anda menyediakan gambar untuk katalog, halaman produk dan banner tanpa perlu mengubah seluruh website.
1. Tentukan tempat gambar akan dipaparkan
Gambar kecil dalam senarai produk tidak memerlukan fail yang sama besar seperti gambar utama yang boleh dizum. Semak susun atur tema terlebih dahulu. Jika ruang katalog berbentuk petak, gunakan nisbah yang sama bagi semua gambar utama supaya produk tidak kelihatan melompat apabila pelanggan menatal.
- Katalog: gunakan komposisi yang seragam dan pastikan produk mudah dikenal pasti pada skrin telefon.
- Halaman produk: sediakan gambar utama, sudut sisi dan butiran penting seperti bahan, label atau sambungan.
- Banner: pilih gambar yang masih sesuai apabila dipotong pada skrin kecil. Elakkan meletakkan maklumat penting terlalu dekat dengan tepi.
Anda tidak semestinya perlu membuang latar semua gambar. Gambar penggunaan sebenar membantu pelanggan memahami skala dan konteks, manakala latar polos memudahkan mereka membandingkan produk. Gunakan kedua-duanya jika ia membantu keputusan membeli.
2. Pilih dimensi dahulu, bukan sekadar sasaran KB
Sebagai titik mula kerja, gambar produk petak sekitar 1200 × 1200 px boleh dicuba untuk katalog dan paparan utama yang sederhana. Jika fungsi zum memerlukan butiran lebih halus, uji saiz yang lebih besar. Ini cadangan praktikal untuk diuji pada tema anda, bukannya ukuran wajib untuk semua website.
Memuat naik gambar 5000 px untuk ruang paparan kecil biasanya tidak diperlukan. Sebaliknya, membesarkan gambar asal yang kecil tidak akan memulihkan butiran yang sudah tiada. Simpan fail asal, kemudian hasilkan salinan khusus untuk website.
Bezakan dimensi dengan saiz fail: 1200 × 1200 px menerangkan lebar dan tinggi, manakala 180 KB menerangkan jumlah data. Dua gambar berdimensi sama boleh mempunyai saiz fail yang jauh berbeza kerana tekstur, format dan tahap pemampatan.
3. Bila patut guna WebP, JPG atau PNG?
WebP menyokong pemampatan lossy, lossless dan latar lutsinar. Ia pilihan yang baik untuk diuji bagi gambar website. Namun, fail WebP tidak semestinya paling kecil bagi setiap gambar; bandingkan eksport sebenar, bukan nama format sahaja. Rujukan: penerangan format WebP oleh Google.
- WebP: cuba untuk foto produk dan imej yang memerlukan latar lutsinar.
- JPG: sesuai sebagai pilihan lain untuk foto dengan latar penuh; ia tidak menyimpan latar lutsinar.
- PNG: berguna apabila anda memerlukan ketepatan butiran atau salinan kerja berlatar lutsinar. Semak saiznya sebelum dimuat naik.
Menukar sambungan .png kepada .webp pada nama fail sahaja tidak menukar format. Gunakan fungsi eksport atau penukar gambar yang menghasilkan fail baharu.
4. Buang latar tanpa mengubah rupa sebenar produk
Gunakan Background Remover alfatihstudio jika latar mengganggu produk. Mod Ringan percuma; akses Detail tinggi berharga RM20 sekali bayar, tertakluk pada sokongan peranti seperti yang diterangkan pada halaman tool.
Selepas membuang latar, periksa bahagian tepi pada latar cerah dan gelap. Beri perhatian pada kaca, plastik lutsinar, rambut berus, tali halus dan bayang. Jika sebahagian produk terpadam, gunakan gambar asal atau sunting semula; jangan biarkan bentuk produk mengelirukan pelanggan.
Corak petak kelabu dalam editor biasanya menandakan kawasan lutsinar. Jika corak itu sudah menjadi sebahagian daripada gambar asal, menukar kepada WebP tidak akan membuangnya secara automatik. Pastikan fail eksport benar-benar mempunyai saluran lutsinar.
5. Kecilkan fail dan semak kualiti selepas eksport
Buka Image Compressor & Resizer, masukkan gambar, tetapkan dimensi yang diperlukan dan cuba eksport WebP. Mulakan dengan tahap kualiti sederhana tinggi jika pilihan itu tersedia, kemudian bandingkan hasil dengan gambar asal.
Bagi banyak gambar katalog biasa, anda boleh cuba sasaran di bawah 200 KB. Angka ini ialah sasaran kerja, bukan syarat SEO atau jaminan setiap gambar boleh mencapainya dengan kualiti yang memadai. Foto yang kompleks atau fungsi zum mungkin memerlukan fail lebih besar.
- Semak label, tekstur kain dan garis halus pada paparan sebenar serta zum 100%.
- Jika kabur, naikkan kualiti atau gunakan dimensi yang lebih sesuai.
- Jika masih berat, potong ruang kosong yang tidak diperlukan sebelum menurunkan kualiti lagi.
- Bandingkan beberapa gambar dahulu sebelum memproses seluruh katalog.
Gambar hanyalah satu faktor kelajuan. Jika halaman masih perlahan selepas dioptimumkan, gunakan panduan menyemak punca website lambat untuk melihat faktor lain.
6. Susun nama fail dan alt text supaya mudah difahami
Gunakan nama seperti botol-sabun-seramik-putih-300ml.webp berbanding IMG_4821.webp. Tulis alt text yang menerangkan gambar secara ringkas, contohnya “Botol sabun seramik putih 300 ml dilihat dari hadapan”. Jangan masukkan senarai keyword atau dakwaan yang tidak kelihatan pada gambar.
Google menyarankan nama fail yang bermakna dan alt text yang berkaitan dengan imej serta kandungan sekeliling. Ini membantu pemahaman dan aksesibiliti, tetapi bukan jaminan kedudukan carian. Lihat panduan Google tentang SEO imej.
Checklist sebelum gambar dimuat naik
- Produk, warna dan variasi dalam gambar sepadan dengan item yang dijual.
- Nisbah gambar utama konsisten dan produk tidak terpotong.
- Label serta butiran penting masih jelas selepas pemampatan.
- Saiz fail telah diperiksa dan fail asal disimpan berasingan.
- Nama fail dan alt text menerangkan gambar dengan tepat.
- Paparan telefon, galeri, zum dan latar lutsinar telah diuji pada website sebenar.
Gambar yang sudah tersusun juga memudahkan penyediaan katalog. Baca checklist sebelum membina kedai online untuk melengkapkan maklumat variasi, bayaran dan penghantaran.
Perlukan bantuan menyusun katalog website?
Jika gambar sudah tersedia tetapi susunan katalog, variasi atau aliran pembelian masih belum jelas, semak pakej e-commerce alfatihstudio untuk memahami skop website yang sesuai. Sediakan beberapa contoh gambar dan senarai produk supaya keperluan dapat dibincangkan dengan lebih tepat.
Soalan lazim
Tiada satu ukuran wajib untuk semua website. Sebagai titik mula, cuba 1200 × 1200 px untuk gambar petak dan semak pada tema sebenar. Fungsi zum atau paparan lebih besar mungkin memerlukan dimensi tambahan.
Tidak. Bawah 200 KB boleh dijadikan sasaran bagi banyak gambar katalog biasa, tetapi kualiti, tekstur dan fungsi zum perlu diambil kira. Uji hasil sebenar dan elakkan pemampatan sehingga butiran penting hilang.
Boleh. WebP menyokong latar lutsinar. Pastikan alat eksport mengekalkan transparency dan semak fail pada latar cerah serta gelap. JPG tidak menyimpan latar lutsinar.
Tidak. Penukaran format dan pembuangan latar ialah dua proses berbeza. Buang latar menggunakan alat yang sesuai dahulu, kemudian eksport ke format yang mengekalkan transparency.
Mod Ringan percuma. Akses Detail tinggi berharga RM20 sekali bayar. Semak keperluan peranti pada halaman tool sebelum memilih mod tersebut.
