Ukuran teks di foto produk sebenarnya ditentukan oleh satu angka yang hampir tidak pernah dicek siapa pun: seberapa besar kotak foto yang benar-benar dilihat pembeli. Bukan file 1600 px hasil ekspor Anda — tapi kotak sebesar kuku jari di halaman hasil pencarian. Retailer disarankan menampilkan kotak foto produk di layar smartphone sekitar 16 x 16 mm. Itulah kanvas asli tempat label dimensi Anda dicetak.
Ada enam keyakinan yang bikin penjual terus mendesain untuk kanvas yang salah. Masing-masing sudah ada bantahan resminya, karena brand FMCG sudah menyelesaikan masalah ini bertahun-tahun lalu dan menuliskan aturannya.
Sedikit catatan soal asal aturan ini: kerja Mobile Ready Hero Image digerakkan oleh brand dan retailer FMCG, jadi contohnya botol sampo dan makanan anjing. Tapi fisikanya tidak pilih-pilih kategori. Pembeli yang menyipitkan mata di kotak 16 mm sama tidak bisanya membaca kedalaman dudukan sofa Anda seperti dia tidak bisa membaca jumlah cucian di kemasan deterjen.
Mitos 1: pembeli akan zoom kalau memang butuh tahu ukurannya
Memang akan — setelah dia klik. Dan klik itu terjadi di halaman grid, tempat zoom belum ada.
Urutan inilah seluruh argumennya. Setiap pembelaan bergaya "kan bisa di-zoom" mengandaikan pembeli yang sudah tertarik, yang sudah memilih listing Anda dari sebelas listing lain di layar. Kalau foto Anda kalah di perbandingan itu karena pembeli tidak bisa menebak seberapa besar barangnya, fitur zoom tidak pernah kepakai. Keterbacaan adalah masalah di ujung atas funnel yang menyamar jadi masalah halaman detail.
Mitos 2: 1600 px berarti teksnya pasti terbaca
Piksel itu penyimpanan, bukan ukuran. Yang menentukan keterbacaan adalah ukuran tampil di layar fisik, dan angkanya jauh lebih kecil daripada dugaan penjual.
Panduan Mobile Ready Hero Image meminta retailer menampilkan kotak foto kira-kira sebesar ini:
| Perangkat | Ukuran tampil kotak yang disarankan | Kira-kira sebesar |
|---|---|---|
| Smartphone | 16 x 16 mm | Kuku jari |
| Tablet | 23 x 23 mm | Perangko |
| Desktop atau laptop | 50 x 50 mm | Sisi pendek kartu kredit |
Panduannya juga terang-terangan menjelaskan kenapa tidak asal bilang "perbesar saja": kotak yang lebih besar bikin pembeli susah scroll halaman listing dengan cepat, sedangkan kotak yang lebih kecil bikin mustahil menyampaikan apa pun secara visual, sehingga pembeli terpaksa balik membaca judul produk — lebih lambat dan lebih merepotkan daripada memindai foto.
Jadi batasannya sudah mati. Anda mendesain untuk 16 mm, suka atau tidak, dan file 1600 px yang ditampilkan di 16 mm sudah dikecilkan sekitar dua orde besaran sebelum ada yang membacanya. Ukuran teks di foto produk harus dihitung terhadap kotak tampil itu, bukan terhadap kanvas di editor Anda. Bingkainya juga harus benar — lihat rasio aspek foto produk untuk tahu apa yang terjadi kalau platform memotong sisi tempat dimensi Anda berada.
Mitos 3: kontras yang kuat bikin teks kecil jadi aman
Kontras dan ukuran adalah dua cara gagal yang berdiri sendiri-sendiri, dan membereskan yang satu tidak menyelamatkan yang lain.
Targetnya sudah terbit dan spesifik. Skor Accessible Perceptual Contrast Algorithm sebaiknya di atas 60, dengan 45 sebagai batas minimum mutlak, dan panduan hero image GS1 mengacu ke rasio kontras minimum W3C 4.5:1 sebagai lantai aksesibilitas. Kombinasi warnanya juga harus tetap jalan buat pembeli dengan buta warna, dan itu langsung mencoret beberapa pasangan warna yang di mata Anda kelihatan kontras tinggi.
Kontras itu syarat perlu. Bukan syarat cukup. Teks yang terlalu kecil di 16 mm tetap tidak terbaca di rasio kontras berapa pun, karena yang gagal itu resolusi sudut, bukan tingkat terang.
Mitos 4: huruf tipis dan elegan terlihat premium
Terlihat premium di zoom 100%. Di 16 mm, di dalam file JPEG, dia hilang.
Untuk ukuran dokumen standar, arahan soal jenis huruf ini luar biasa blak-blakan:
| Pilihan | Kata panduannya |
|---|---|
| Ketebalan huruf | Semi-bold atau bold biasanya paling terbaca — hindari ultra light dan extra bold |
| Gaya huruf | Sans serif seperti Open Sans atau Arial; hindari font dekoratif, bergaya, atau serif, karena tampil buruk di foto kecil, apalagi retailer umumnya pakai format .jpg |
| Latar di belakang teks | Biarkan bersih — hindari gradasi warna, hindari teks di atas latar bermotif |
| Efek | Hindari efek outline dan drop shadow |
Perhatikan extra bold juga masuk daftar hindari. Huruf yang terlalu tebal menutup rongganya sendiri saat dikecilkan, dan angka 8 yang rongganya tertutup terbaca jadi 0. Untuk label dimensi, itu bukan masalah kosmetik — itu angka yang salah.
Mitos 5: makin banyak keterangan makin banyak informasi
Kanvasnya kecil dan setiap elemen berebut tempat di situ. Apa pun di foto yang tidak membawa pesan yang dibutuhkan pembeli sedang merampas ruang dari yang membawanya.
Standar hero image galak sekali soal ini. Dia menetapkan empat pesan kritis, si "4Ws" — Who (brand-nya), What (jenis produknya), Which (variannya), dan HoW much (isi bersihnya) — dan menganggap sisanya kandidat untuk dihapus. Aturan pengecekan otomatisnya bahkan lebih ketat: satu-satunya elemen yang boleh berada di luar kemasan adalah satu kotak hitam berisi keterangan ukuran di pojok kanan bawah. Tidak ada teks melayang, tidak ada aset lain di luar kemasan, tidak ada yang boleh melewati batas kemasan, latar putih. Disebutkan juga bahwa beberapa tampak dari produk yang sama sebaiknya tidak ditampilkan sekaligus, karena mengganggu secara visual dan bisa bikin pembeli salah kira soal berapa unit yang dia terima.
Terjemahkan itu ke diagram spesifikasi dan prioritasnya terasa tidak enak tapi jelas: satu dimensi yang bisa dibaca pembeli mengalahkan enam yang tidak. Memutuskan label mana yang layak dapat tempat justru bagian yang lebih sulit — callout di foto produk membahas cara memilihnya.
Mitos 6: posisi ukuran di foto tidak penting
Penting, dan alasannya bukan soal estetika.
Panduan menempatkan informasi ukuran di luar kemasan di pojok kanan bawah, dengan dua alasan. Pertama, konsistensi: kalau semua foto di kategori itu menaruh ukuran di tempat yang sama, pembeli tahu ke mana harus melihat tanpa mencari-cari. Kedua, geometri — pojok kanan bawah satu-satunya posisi yang cocok untuk bentuk produk portrait maupun landscape. Posisi lain hanya jalan untuk satu orientasi dan bertabrakan dengan produk di orientasi satunya.
Kalau Anda pernah menggeser label dimensi sampai tiga kali karena bentrok dengan SKU yang tinggi, aturan itulah yang sedang Anda temukan sendiri dengan cara yang capek.
Tes 16 mm: 60 detik selesai
Anda tidak butuh anggaran riset untuk tahu foto Anda lolos atau tidak. Ada dua cara mengeceknya.
Versi fisik. Cetak fotonya di ukuran 16 x 16 mm dan pegang sejauh 40 cm — jarak normal orang melihat HP. Apa pun yang tidak terbaca, anggap saja tidak ada di situ.
Versi digital. Panduan GS1 menyebut simulasinya secara langsung: terapkan Gaussian blur dengan radius 34 pixels ke gambar 3000 x 3000 piksel. Tingkat blur itu dikalibrasi untuk mewakili tampilan di perangkat mobile yang dipegang sejauh 40 cm. Nilai hasil blurnya di monitor Anda. Kalau satu dimensi tidak terbaca setelah di-blur, dimensi itu juga tidak terbaca oleh sebagian besar pembeli sungguhan.
Ada tool berlisensi yang dibuat khusus untuk ini — Clari-Fi, dari grup yang sama di University of Cambridge, seharga £263 plus pajak untuk lisensi satu pengguna — dan brand besar memakainya sebagai gerbang, bukan sebagai bahan review. Direktur e-commerce global Unilever menyatakan pada October 2022 bahwa setiap foto e-commerce yang baru atau yang diperbarui wajib lolos cek Clari-Fi sebelum dikirim ke retailer, dan perusahaannya sudah melewatkan lebih dari 30,000 foto produk ke tool itu dalam tiga tahun. Untuk penjual kecil, blur manual sudah jadi pengganti yang adil. Yang penting cek itu benar-benar dijalankan sebelum foto tayang, bukan setelah retur berdatangan.
Konsekuensinya sudah dihitung angkanya, dan itu jarang terjadi di bidang ini. Foto yang gagal di cek kejelasan level AA berarti lebih dari 46% pembeli tidak bisa menangkap informasi penting di dalamnya. Di contoh kerja panduan itu sendiri, foto kemasan konvensional gagal di "varian yang mana" dan "isinya berapa", dengan porsi orang yang kemungkinan kesulitan menangkap pesan tersebut jatuh di rentang 52% to 100%.
Itulah pakunya: kalau label dimensi Anda gagal di tes blur, Anda tidak menerbitkan dimensi. Anda menerbitkan hiasan.
Sebagai gambaran berapa nilai satu dimensi yang tidak terbaca, satu retur karena salah ukuran memakan ongkos kirim ke pembeli, ongkos kirim balik, pengecekan barang, pengemasan ulang, dan sering kali margin seluruh unit itu — kalkulator biaya retur memberi angkanya per unit.
Ukuran teks di foto produk: apa yang selamat di kotak 16 mm
| Elemen | Perlakuan yang selamat di 16 mm | Yang membunuhnya |
|---|---|---|
| Angka dimensi | Teks terbesar di foto; sans serif semi-bold; satu sistem satuan per foto | Angka yang ukurannya disamakan dengan teks keterangan |
| Satuan (cm, in, mm) | Setebal angkanya, jangan pernah jadi superskrip | Satuan kapital kecil atau superskrip yang blurnya menyatu dengan angka |
| Garis dan panah dimensi | Garis cukup tebal untuk selamat saat dikecilkan; solid, kontras tinggi | Garis setipis 1 px yang lenyap |
| Garis penunjuk ke callout | Pendek, lurus, tidak saling menyilang | Penunjuk panjang dan tipis melintasi foto yang ramai |
| Kotak keterangan ukuran | Blok solid, pojok kanan bawah, konsisten di seluruh lini produk | Teks melayang tanpa latar |
| Latar di bawah teks | Area foto yang datar dan bersih | Gradasi, motif, tekstur produk |
| Teks promosi sekunder | Dihapus, atau dipindah ke foto kedua | Apa pun yang bersaing dengan angka yang menjual kecocokan ukuran |
Dua aturan sudah menutup sebagian besar kasus. Dimensi adalah teks terbesar di foto, atau foto itu memang bukan tentang dimensi. Dan setiap elemen yang bukan salah satu pesan kritis Anda sedang meminjam ruang dari yang iya.
FAQ
Berapa besar seharusnya teks di foto produk?
Cukup besar untuk selamat di kotak 16 mm — ukuran teks di foto produk itu hasil tes, bukan angka piksel yang tetap. Karena ukuran tampilnya bergantung pada dimensi piksel foto dan kerapatan layar, jawaban tunggal semacam "pakai 48 px" bakal salah di separuh perangkat. Pasang teksnya, blur hasil ekspornya di tingkat kalibrasi tadi, lalu besarkan sampai angka-angka pentingnya tetap terbaca.
Apakah pembeli akan zoom untuk membaca dimensinya?
Sebagian iya, setelah dia klik. Masalahnya, keputusan klik itu diambil di halaman hasil pencarian, sebelum zoom tersedia, jadi teks yang baru jelas kalau di-zoom tidak menyumbang apa pun ke keputusan pembeli memilih listing Anda.
Kontras seperti apa yang saya butuhkan untuk teks di foto produk?
Incar skor APCA di atas 60, anggap 45 sebagai lantainya, dan pertahankan rasio kontras klasik 4.5:1 sebagai dasar aksesibilitas. Cek juga pasangan warnanya terhadap buta warna — angka merah di latar hijau bisa lolos rasio dan tetap tidak terlihat oleh sebagian pembeli yang jumlahnya tidak sedikit.
Boleh tidak menaruh ukuran di pojok foto?
Boleh, dan pojok kanan bawah justru posisi yang disarankan. Itu satu-satunya pojok yang jalan untuk produk portrait maupun landscape, dan menaruhnya di titik yang sama di setiap foto bikin pembeli menemukannya tanpa mencari.
Diagram spesifikasi saya gagal tes blur — cara tercepat membetulkannya apa?
Jangan foto ulang. Fotonya biasanya sudah benar; lapisan anotasinya yang bermasalah. Jalur cepatnya adalah menyimpan dimensi sebagai lapisan hidup yang masih bisa diedit dan terikat ke tepi produk yang sudah diukur, bukan yang sudah dipipihkan ke dalam JPEG, supaya Anda bisa membesarkan hurufnya, menebalkan garisnya, membuang label dekoratifnya, dan mengekspor ulang sesuai spesifikasi foto tiap platform dalam sekali jalan. Kemampuan itu — mengukur terhadap geometri asli dan mengekspor ulang kapan pun — yang membedakan software anotasi dari editor foto biasa, dan dari generator gambar yang mengeluarkan angka meyakinkan yang tidak pernah dia ukur. Kalau Anda sedang menimbang beberapa pendekatan, rangkuman tool untuk menambahkan dimensi ke foto produk membandingkannya persis di titik itu.
Sumber & Referensi
- GS1 — Panduan Mobile Ready Hero Images: si 4Ws, cek Gaussian blur terkalibrasi (radius 34 pixels di gambar 3000 x 3000, jarak lihat 40 cm) dan acuan kontras 4.5:1
- GS1 — Mobile Ready Hero Images (halaman standar yang berlaku)
- University of Cambridge Inclusive Design Toolkit — Ukuran teks dan angka yang disarankan di dalam Mobile Ready Hero Images: target APCA, arahan ketebalan dan gaya huruf, serta angka 46%
- Inclusive Design Toolkit — Menampilkan gambar di ponsel pada ukuran terbaik: 16 x 16 mm smartphone, 23 x 23 mm tablet, 50 x 50 mm desktop
- Inclusive Design Toolkit — Tes kejelasan visual: bagaimana blur mensimulasikan tampilan thumbnail, dan level cek AA
- Inclusive Design Toolkit — Bukti manfaat hero image: contoh kerja foto kemasan dan rentang kesulitan 52-100%
- Inclusive Design Toolkit — Menyajikan informasi ukuran: penempatan pojok kanan bawah untuk kotak ukuran di luar kemasan
- W3C — Memahami Kriteria Sukses WCAG 1.4.5 Images of Text