Gambar Responsif: Mengenal Atribut srcset dan Elemen <picture>

Di era layar Retina dan jaringan 4G/5G, menyajikan gambar tunggal untuk semua perangkat adalah kesalahan besar. Jika Anda mengirim gambar berukuran 4K ke ponsel dengan layar kecil, Anda hanya membuang kuota pengguna dan memperlambat loading website. Sebaliknya, gambar kecil akan terlihat pecah di layar resolusi tinggi.

Solusinya adalah Gambar Responsif. HTML menyediakan dua cara utama agar browser dapat memilih gambar yang paling sesuai secara otomatis: atribut srcset dan elemen <picture>.

1. Atribut srcset (Optimasi Resolusi)

Atribut srcset memungkinkan Anda menyediakan daftar pilihan gambar dengan ukuran berbeda kepada browser. Browser akan secara cerdas mengunduh hanya satu gambar yang paling cocok dengan ukuran layar pengguna.

• Fungsi: Menyediakan versi berbeda dari gambar yang sama (resolusi berbeda).

• Contoh Kasus: Gambar header berita yang perlu tajam di desktop tapi ringan di mobile.

Contoh Kode:

<img srcset="gambar-400w.jpg 400w, gambar-800w.jpg 800w, gambar-1200w.jpg 1200w" sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px" src="gambar-800w.jpg" alt="Ilustrasi berita teknologi">

• Catatan sizes: Memberitahu browser berapa perkiraan lebar gambar yang akan ditampilkan di layar pada kondisi tertentu sebelum gambar diunduh.

2. Elemen <picture> (Kontrol Artistik & Format)

Elemen <picture> memberikan kontrol lebih besar daripada srcset. Anda bisa mengubah isi gambar berdasarkan kondisi layar (Art Direction) atau menyediakan format modern seperti WebP atau AVIF dengan fallback ke JPG.

• Fungsi: Mengubah rasio gambar (misal: kotak di mobile, landscape di desktop) atau mendukung format gambar generasi baru.

• Contoh Kasus: Menampilkan foto landscape di desktop, tapi foto portrait di mobile agar subjek tetap terlihat jelas.

Contoh Kode:

<picture> <source type="image/webp" srcset="foto-landscape.webp"> <source media="(max-width: 768px)" srcset="foto-portrait.jpg"> <img src="foto-landscape.jpg" alt="Foto subjek berita">
</picture>

3. Kapan Menggunakan srcset vs <picture>?

4. Tutorial: Implementasi Gambar di Proyek SatuMedia

Untuk website portal berita seperti SatuMedia, performa adalah segalanya. Berikut adalah standar profesional yang bisa Anda terapkan:

1. Siapkan Gambar: Buat 3 versi ukuran (Misal: 400px, 800px, 1200px).

2. Konversi ke WebP: Gunakan format WebP untuk kompresi maksimal tanpa kehilangan kualitas visual.

3. Tulis Kode Implementasi:

<figure> <picture> <source type="image/webp" srcset="kolak-pisang-400.webp 400w, kolak-pisang-800.webp 800w, kolak-pisang-1200.webp 1200w" sizes="(max-width: 800px) 100vw, 800px"> <img src="kolak-pisang-800.jpg" alt="Suasana pengerjaan proyek Kolak Pisang" loading="lazy"> </picture> <figcaption>Suasana pengerjaan proyek Kolak Pisang.</figcaption>
</figure>

• Catatan loading="lazy": Memastikan gambar hanya diunduh saat pengguna men-scroll mendekati gambar tersebut. Sangat penting untuk meningkatkan skor Core Web Vitals.

Kesimpulan

Menggunakan gambar responsif bukan lagi pilihan, melainkan keharusan. Dengan menguasai atribut srcset dan elemen <picture>, Anda memberikan yang terbaik bagi pengguna: website yang cepat diakses dan indah dipandang di perangkat mana pun.