Situs UMKM lambat? Periksa ukuran foto produk dulu

Hampir setiap audit situs toko kecil yang saya kerjakan berakhir di temuan yang sama: foto produk diunggah langsung dari ponsel, ukurannya 3–5 MB per foto, lalu ditampilkan di kotak selebar 300 piksel. Pengunjung dengan kuota terbatas menunggu, lalu menutup halaman.

Berapa ukuran yang wajar?

Untuk foto kartu produk, lebar 600–800 piksel sudah cukup tajam di layar ponsel resolusi tinggi. Dengan format webp atau avif, ukurannya biasanya 40–90 KB. Untuk foto besar di halaman detail, 1200–1600 piksel dengan ukuran di bawah 250 KB.

Biarkan browser memilih

Atribut srcset dan sizes memberi tahu browser beberapa versi gambar, sehingga ponsel tidak mengunduh versi desktop. Jangan lupa width dan height supaya tata letak tidak meloncat saat gambar dimuat.

<img
  src="/produk/keripik-600.webp"
  srcset="/produk/keripik-400.webp 400w,
          /produk/keripik-600.webp 600w,
          /produk/keripik-900.webp 900w"
  sizes="(min-width: 768px) 300px, 50vw"
  width="600" height="600"
  loading="lazy"
  alt="Keripik singkong balado dalam kemasan 250 gram">

Untuk admin yang mengunggah sendiri

• Pasang pengecilan gambar otomatis di CMS, jangan mengandalkan admin ingat.
• Batasi ukuran unggahan (mis. 8 MB) dan tampilkan pesan yang jelas.
• Isi teks alternatif: nama produk dan varian, bukan "foto1".

Pada satu proyek katalog (contoh), langkah ini saja menurunkan berat halaman dari sekitar 9 MB menjadi 1,1 MB tanpa mengubah desain sama sekali.