Gambar responsif

Satu berkas gambar yang sama sering dikirim ke semua perangkat, padahal kebutuhan ukurannya berbeda-beda. Topik ini membahas atribut srcset dengan deskriptor lebar, atribut sizes yang menjelaskan ukuran slot gambar, elemen picture untuk arah seni (art direction) dan format modern, serta atribut width dan height yang menjaga tata letak tetap stabil. Pembahasan berfokus pada peran markup dan CSS dalam pengiriman gambar, sedangkan pengolahan berkas gambarnya dianggap telah tersedia sebelum dipakai.

Masalah satu berkas gambar untuk semua layar#

Gambar yang dioptimalkan untuk layar lebar umumnya berukuran ribuan piksel dan berbobot ratusan kilobita. Apabila berkas yang sama dikirim ke ponsel yang layarnya 390 piksel, sebagian besar datanya terbuang karena piksel berlebih tidak menambah kualitas tampilan. Kuota jaringan terpakai untuk sesuatu yang tidak terlihat, dan waktu muat halaman memanjang tanpa ada manfaat visualnya.

Arah sebaliknya juga bermasalah. Gambar yang disiapkan untuk layar sempit akan tampak buram ketika ditampilkan besar di monitor berkerapatan tinggi, karena jumlah pikselnya tidak cukup untuk menutup area yang diminta. Tidak ada satu ukuran yang cocok untuk semua keadaan, sehingga browser perlu diberi beberapa kandidat berkas beserta petunjuk cara memilihnya.

HTML menjawab kebutuhan itu melalui dua mekanisme yang saling melengkapi. Atribut srcset pada elemen img menyediakan beberapa kandidat berkas untuk satu gambar yang sama, sedangkan elemen picture memungkinkan browser memilih antara sumber yang benar-benar berbeda. Keduanya bekerja pada saat halaman dimuat, sehingga pemilihan berkasnya terjadi tanpa skrip tambahan apa pun. Keduanya dikaji pada bagian berikut.

Atribut srcset dengan deskriptor lebar#

Atribut srcset menerima daftar kandidat berkas, dan setiap kandidat diikuti deskriptor yang menjelaskan ukurannya. Deskriptor lebar ditulis dengan akhiran w, misalnya grafik-480.jpg 480w, yang berarti berkas tersebut selebar 480 piksel secara alami. Nilai ini harus sesuai dengan lebar nyata berkasnya, karena browser memakainya untuk menghitung kandidat mana yang cukup untuk slot yang diminta.

<img
  src="grafik-800.jpg"
  srcset="grafik-480.jpg 480w,
          grafik-800.jpg 800w,
          grafik-1200.jpg 1200w"
  alt="Grafik rata-rata nilai ujian">

Atribut src tetap ditulis dan berperan sebagai cadangan (fallback) untuk browser lama yang tidak mengenal srcset. Urutan kandidat pada srcset tidak menentukan pilihan, karena keputusan diambil browser melalui perhitungan dan bukan melalui urutan penulisan. Kandidat umumnya disiapkan dalam beberapa lebar tetap, misalnya 480, 800, dan 1200 piksel, sehingga daftarnya tetap ringkas dan mudah dipelihara.

Deskriptor lain yang lebih jarang dipakai adalah deskriptor kerapatan, ditulis dengan akhiran x seperti grafik-2x.jpg 2x. Bentuk ini hanya menyerahkan pilihan kepada kerapatan piksel dan tidak memperhitungkan lebar slot, sehingga tidak berguna ketika gambar ditampilkan pada lebar yang berubah-ubah. Untuk tata letak responsif, deskriptor lebar disandingkan dengan atribut sizes menjadi pasangan yang lazim, dan pasangan itulah yang dibahas pada bagian berikutnya.

Atribut sizes dan pemilihan kandidat#

Daftar kandidat saja belum cukup, karena browser perlu mengetahui seberapa besar slot tempat gambar itu ditampilkan. Atribut sizes menyatakan hal tersebut dengan sintaks kondisi media, misalnya slot selebar 600 piksel pada layar 768 piksel ke atas dan selebar sisa jendela di bawahnya. Apabila atribut ini tidak ditulis, nilai default 100vw yang berlaku, dan nilai itu jarang sesuai karena gambar jarang dilebarkan sampai penuh jendela.

<img
  src="grafik-800.jpg"
  srcset="grafik-480.jpg 480w,
          grafik-800.jpg 800w,
          grafik-1200.jpg 1200w"
  sizes="(min-width: 768px) 600px,
         calc(100vw - 32px)"
  alt="Grafik rata-rata nilai ujian"
  width="1200" height="600">

Browser mengalikan lebar slot dari sizes dengan kerapatan piksel (device pixel ratio) layar, yaitu jumlah piksel fisik per piksel CSS yang lazim bernilai 2 pada ponsel modern. Hasilnya menjadi kebutuhan minimum, lalu browser memilih kandidat terkecil yang mencukupi kebutuhan tersebut. Diagram berikut memperlihatkan alur perhitungan itu pada ponsel dengan slot selebar 390 piksel.

Pada diagram tersebut, kebutuhan 780 piksel menggugurkan kandidat 480w dan mengangkat 800w, sedangkan kandidat 1200w dilewati karena lebih besar dari yang diperlukan. Perhitungan berulang setiap kali ukuran layar atau posisi slot berubah, misalnya ketika breakpoint mengubah lebar slot gambar yang sama. Inilah alasan srcset dan sizes cukup ditulis sekali di markup, sedangkan keputusan ukurannya diserahkan sepenuhnya ke browser.

Elemen picture untuk arah seni dan format modern#

Elemen picture membungkus beberapa elemen source dan satu elemen img. Setiap source membawa kondisi pemilihan, dan browser memakai sumber pertama yang kondisinya terpenuhi, sedangkan img menjadi sumber terakhir sekaligus cadangannya. Elemen ini dipakai untuk dua kebutuhan berbeda, yaitu arah seni dan pemilihan format.

<picture>
  <source
    media="(max-width: 480px)"
    srcset="kelas-potret.jpg">
  <img
    src="kelas-lebar.jpg"
    alt="Suasana kelas saat pelajaran"
    width="1200" height="675">
</picture>

Pada contoh arah seni di atas, layar hingga 480 piksel menerima potongan potret, sedangkan layar lainnya menerima potongan lebar. Kedua berkas boleh berbeda rasio dan komposisinya karena browser hanya memuat salah satunya. Perbedaan semacam ini tidak dapat dinyatakan melalui srcset, yang khusus menukar berkas untuk gambar yang sama persis.

<picture>
  <source type="image/avif" srcset="grafik.avif">
  <source type="image/webp" srcset="grafik.webp">
  <img src="grafik.jpg" alt="Grafik rata-rata nilai ujian" width="1200" height="600">
</picture>

Contoh kedua menyandingkan format modern. Browser yang mendukung AVIF memuat grafik.avif, browser yang hanya mendukung WebP memuat grafik.webp, dan sisanya kembali ke JPEG. Atribut type membuat browser melewati format yang tidak dikenalnya tanpa perlu memuat berkasnya, sehingga mekanisme cadangan bekerja dengan hemat.

Dalam kedua contoh tersebut, elemen img tidak pernah ditinggalkan dan tetap memuat src beserta alt-nya. Elemen img inilah yang dirender bila tidak ada source yang kondisinya terpenuhi, sekaligus satu-satunya yang dikenal browser lama. Menghilangkan img dari dalam picture membuat gambar tidak pernah tampil sama sekali.

Atribut width dan height#

Browser hanya dapat menempatkan gambar setelah berkasnya selesai dimuat, karena sebelum itu ukurannya belum diketahui. Ketiadaan ukuran ini menggeser konten di bawahnya pada saat gambar tiba, sebuah gejala yang dikenal sebagai pergeseran tata letak (layout shift). Gejala itu mengganggu pembacaan yang sedang berlangsung dan menurunkan penilaian performa halaman.

Atribut width dan height pada img menyatakan dimensi alami gambar dalam piksel, sehingga browser dapat menghitung rasio aspeknya sebelum berkas tiba. Ruang gambar tercadang sejak awal dan konten di bawahnya tidak terdorong lagi ketika gambar muncul. Penataan CSS tetap bebas mengubah ukuran tampilannya, asalkan satu dimensi diatur dan dimensi lainnya mengikuti melalui height: auto.

Nilai kedua atribut tersebut harus mengikuti dimensi asli berkas gambar dan bukan ukuran tampilan yang diinginkan, karena rasio yang dihitung browser berasal dari situ. Apabila nilainya diisi sembarangan, browser mencadangkan ruang dengan rasio yang keliru dan tata letaknya bergeser saat berkas tiba. Memeriksa dimensi asli gambar sebelum menulis atributnya menjadi kebiasaan yang murah namun mencegah masalah tersebut.

Ringkasan#

• srcset dengan deskriptor lebar menyediakan beberapa kandidat berkas untuk satu gambar yang sama.
• sizes menjelaskan lebar slot, dan browser memilih kandidat terkecil yang mencukupi slot dikalikan kerapatan piksel.
• picture memilih antara sumber yang berbeda untuk arah seni dan format modern, dengan img sebagai cadangan.
• Atribut width dan height mencadangkan rasio gambar sebelum berkas tiba sehingga tata letak tidak bergeser.

Referensi#

• Responsive images — MDN Web Docs — Panduan lengkap srcset, sizes, dan picture beserta cara browser memilih kandidatnya.
• : The Image Embed element — MDN Web Docs — Dokumentasi elemen img beserta atribut srcset, sizes, width, dan height.
• : The Picture element — MDN Web Docs — Dokumentasi elemen picture untuk arah seni dan pemilihan format.
• Responsive images — web.dev — Bab kursus desain responsif yang merangkum strategi pengiriman gambar.