Gambar produk untuk web disiapkan dengan berpatokan pada ukuran tampilnya di halaman, bukan pada resolusi kamera. Tentukan dulu seberapa lebar gambar akan tampil, siapkan foto pada dimensi yang cukup untuk ukuran itu, lalu kecilkan berkasnya lewat Kompres Foto sebelum diunggah. Urutan itu menjaga halaman toko tetap ringan tanpa menghilangkan detail yang dipakai pembeli untuk menilai barang.

Bedanya dengan foto untuk marketplace: di situs sendiri, tidak ada ketentuan platform yang mengikat soal dimensi dan format. Yang mengikat justru ukuran wadah di tata letak halaman dan berat total halaman. Foto yang sama bisa tampil besar di halaman detail dan tampil kecil di daftar katalog, dan dua tempat itu sebaiknya tidak memakai berkas yang sama.

Ada satu hal yang tidak bisa dikerjakan tool berkas: memperbaiki isi foto. Latar yang berantakan, bayangan yang keras, atau warna yang melenceng tetap seperti aslinya setelah dikompres. Karena itu, pekerjaan ini dimulai dari pemotretan dan penyuntingan, lalu ditutup dengan penyesuaian berkas.

Menentukan ukuran tampil sebelum menyiapkan berkas

Langkah pertama adalah mengukur. Buka halaman tempat gambar akan dipasang, lalu perhatikan lebar ruang yang tersedia untuk gambar itu. Pada tema yang sudah jadi, ukurannya ditentukan tata letak, misalnya selebar kolom konten atau setengahnya. Untuk halaman produk, ukuran tampil terbesar biasanya adalah tampilan perbesar, jadi sediakan piksel yang cukup untuk ukuran itu.

Kalau angka lebarnya sudah diketahui, dimensi berkasnya mengikuti. Foto yang akan tampil pada lebar 800 piksel tidak perlu menyimpan 1600 piksel, karena separuh pikselnya tidak terlihat dan hanya menambah berat. Sebaliknya, foto yang tampil pada lebar 1200 piksel jangan disiapkan pada 600 piksel, karena akan terlihat lembut.

Untuk layar berkerapatan tinggi, sediakan versi dengan lebar dua kali ukuran tampil kalau gambar itu menjadi fokus halaman. Ini pilihan, bukan keharusan. Gambar pendukung cukup satu kali. Cara mengatur beberapa versi di kode halaman dibahas di cara membuat gambar responsive.

Memilih format sesuai isi gambar

JPG adalah pilihan paling aman untuk foto produk. Ukurannya kecil, diterima hampir semua sistem, dan detail yang dibuang kompresinya tidak terlihat pada foto. WebP memberi berkas yang lebih kecil pada mutu yang sama, tetapi belum semua aplikasi di luar peramban bisa membukanya. Kalau gambar produk juga akan dikirim ke pihak lain, JPG lebih aman.

PNG dipakai kalau produk perlu latar tembus pandang, misalnya agar bisa ditumpuk di atas latar bagian halaman yang berwarna. PNG menyimpan transparansi dan menjaga ketajaman garis. Untuk foto biasa, ukuran PNG jauh lebih besar daripada JPG.

Satu hal yang perlu diingat: JPG tidak menyimpan transparansi. Kalau foto produk Anda PNG transparan dan diubah ke JPG, area tembus pandangnya menjadi putih. Perubahan itu tidak bisa dimatikan. Enam pasangan konversi antara ketiga format tersedia di Konversi Format Gambar, dan perbandingan sifat ketiganya ada di Perbedaan JPG PNG dan WebP.

Menyiapkan foto sebelum masuk ke tool

Mulai dari latar. Satu halaman katalog terlihat rapi kalau semua foto memakai latar dan arah cahaya yang sama. Latar polos, entah putih atau satu warna, membuat produk menonjol dan membuat berkas lebih mudah dipadatkan. Latar yang ramai justru menambah detail yang harus disimpan berkas, sehingga ukurannya lebih sulit turun.

Kedua, jaga jarak dan sudut pemotretan tetap sama untuk semua produk. Perbedaan jarak membuat dua barang berukuran sama terlihat berbeda besar. Perbedaan sudut membuat katalog terasa tidak konsisten.

Ketiga, potret beberapa sudut: tampak depan, samping, atas, dan satu foto detail untuk tekstur atau label. Pembeli memakai foto detail untuk memastikan kondisi barang.

Keempat, simpan berkas asli. Penurunan mutu saat kompresi tidak bisa dikembalikan, dan berkas asli adalah satu-satunya jalan untuk mengulang.

Langkah memperkecil gambar produk untuk web

  1. Kumpulkan foto yang sudah dipilih, dan simpan salinan aslinya di folder terpisah.
  2. Tentukan satu lebar target untuk semua foto dalam satu kelompok, supaya hasilnya seragam.
  3. Masuk ke Kompres Foto dan buka tool yang cocok dengan berkas Anda: Kompres JPG, Kompres PNG, atau Kompres WebP.
  4. Unggah beberapa foto sekaligus. Hasilnya dikemas dalam arsip ZIP kalau berkasnya lebih dari satu.
  5. Pilih ukuran akhir lewat chip di pratinjau. Ukuran persen tersedia dari 10 sampai 200 persen. Angka yang sudah diuji: persen 50 pada gambar 1600x1200 menghasilkan 800x600.
  6. Periksa bagian yang menentukan penilaian pembeli: tepi produk, tekstur bahan, dan tulisan pada label. Kalau salah satunya mulai kabur, naikkan ukuran akhirnya.
  7. Unduh hasilnya, ekstrak arsipnya, lalu periksa beberapa berkas secara acak sebelum diunggah.

Kalau formatnya perlu diubah, kerjakan konversinya sebelum kompresi. Urutan itu menghindari penurunan mutu dua kali pada berkas yang sama.

Nama berkas, teks alternatif, dan ukuran di kode

Nama berkas yang deskriptif membantu saat katalog Anda berisi banyak foto, dan sebagian sistem memakai nama berkas sebagai petunjuk isi. Nama seperti sepatu-lari-hitam-42.jpg lebih berguna daripada IMG_2381.jpg.

Teks alternatif menjelaskan isi gambar untuk pembaca yang tidak bisa melihatnya, dan untuk mesin yang membaca halaman. Isinya deskripsi singkat, bukan pengulangan judul halaman.

Cantumkan juga lebar dan tinggi gambar di kode halaman. Tanpa keduanya, tata letak bergeser saat gambar selesai dimuat, dan posisi bacaan pembaca berpindah. Cara menentukannya ada di cara menentukan dimensi gambar di HTML.

Kesalahan yang sering terjadi

Mengunggah foto langsung dari kamera. Foto ponsel jauh lebih besar daripada kebutuhan halaman, dan piksel berlebihnya hanya menambah waktu muat.

Memakai PNG untuk semua foto. Ukuran berkasnya jauh lebih besar tanpa keuntungan yang sepadan, kecuali memang butuh transparansi.

Mengompres berkali-kali. Setiap penurunan mutu menumpuk. Kalau hasil pertama kurang pas, ulangi dari berkas asli.

Menyiapkan satu berkas besar untuk semua tempat. Gambar daftar katalog yang ditampilkan kecil sebaiknya memakai versi terpisah yang lebih ringan daripada gambar halaman detail.

Melupakan perbedaan warna antar layar. Warna produk di monitor Anda belum tentu sama dengan di ponsel pembeli. Bandingkan hasilnya di lebih dari satu layar sebelum menyimpulkan.

Kapan perlu aplikasi penyunting gambar

Penghapusan latar, perbaikan bayangan, dan koreksi warna dikerjakan di aplikasi penyunting gambar, bukan di tool berkas. Layanan ini menangani ukuran, format, dan metadata. Kalau latar produk harus tembus pandang, kerjakan di penyunting gambar, simpan sebagai PNG, lalu kecilkan di sini. Pembahasan latar produk ada di cara menghapus latar putih gambar produk.

Kalau foto produk memuat data pribadi yang tidak boleh meninggalkan perangkat, kerjakan dengan aplikasi di komputer sendiri. Cara layanan ini memperlakukan berkas dijelaskan di kebijakan privasi.

Pertanyaan yang sering muncul

Apakah gambar produk untuk web harus berlatar putih? Tidak selalu. Yang penting latarnya konsisten di seluruh katalog. Sebagian toko memilih latar putih, sebagian memilih latar bernuansa yang sesuai gaya merek. Kalau gambar akan dipasang di bagian halaman yang berwarna, latar transparan lebih fleksibel, dan berkasnya disimpan sebagai PNG atau WebP.

Berapa lebar gambar produk yang ideal untuk halaman toko? Tidak ada satu angka yang berlaku untuk semua tema. Ukur lebar wadah di halaman Anda, lalu sediakan piksel minimal sebesar itu. Kalau tema Anda punya tampilan perbesar, sediakan piksel yang cukup untuk ukuran perbesar itu.

Apakah semua foto produk harus punya dimensi yang sama? Untuk katalog yang rapi, sebaiknya ya. Dimensi dan rasio yang seragam membuat baris produk terlihat lurus. Kalau foto diambil dengan jarak yang sama, penyeragamannya cukup dengan memakai ukuran persen yang sama untuk semua berkas.

Apakah gambar produk boleh memakai WebP? Boleh kalau situs Anda melayani peramban modern dan gambar hanya tampil di halaman web. Kalau gambar itu juga akan diunduh, dikirim lewat surel, atau dibuka aplikasi lama, sediakan JPG sebagai cadangan.

Apakah metadata lokasi foto produk ikut terhapus? Ya. Saat berkas ditulis ulang di tool kompresi ini, EXIF dan GPS terhapus, sehingga koordinat tempat foto diambil tidak ikut tersebar.

Mulai dari satu foto produk

Pilih satu foto, tentukan lebar tampilnya, lalu kecilkan lewat kompres gambar. Setelah hasilnya pas, pakai pengaturan yang sama untuk seluruh katalog. Untuk pekerjaan formatnya, buka Konversi Format Gambar. Kumpulan panduan penyajian gambar di situs ada di Gambar untuk Web, dan panduan besarnya di Panduan Gambar dan Foto.