Halaman yang sama dibuka dari ponsel berlayar kecil sampai monitor lebar, sementara satu file gambar harus melayani semuanya. File besar tampak bagus di desktop tetapi boros kuota di ponsel; file kecil hemat di ponsel tetapi buram di desktop. HTML menjawab masalah ini dengan atribut srcset dan sizes: kita menawarkan beberapa file, dan browser memilih yang paling sesuai kondisinya. Pada Chapter ini kita menyusun srcset dengan tiga ukuran file, menjelaskan lebar slot gambar lewat sizes, dan mengenal density descriptor.

Masalah: Satu File untuk Semua Layar #

Layar pengunjung berbeda ukuran dan juga berbeda kepadatan piksel (device pixel ratio): layar retina menampilkan lebih banyak piksel fisik pada ruang yang sama. Satu file menuntut kompromi di kedua sisi, dan kompromi itu selalu merugikan salah satunya. Keputusan pun harus diambil browser saat halaman dirender, bukan dari sisi server. Mengatur ukuran tampil memakai CSS saja tidak menyelesaikannya, karena file yang diunduh tetap sama besarnya.

srcset: Daftar File dan Lebar Intrinsik #

Atribut srcset berisi daftar kandidat file yang dipisahkan koma. Setiap kandidat ditulis berpasangan: alamat file, lalu lebar intrinsik file dalam piksel yang diakhiri huruf w (width descriptor). Nilai w bukan ukuran tampil, melainkan jumlah piksel yang benar-benar dimiliki file.

html 
<img
  src="pantai-800.jpg"
  srcset="pantai-480.jpg 480w,
          pantai-800.jpg 800w,
          pantai-1440.jpg 1440w"
  sizes="(max-width: 600px) 480px, 800px"
  alt="Pantai berpasir putih dengan perahu nelayan"
  width="800" height="533">

Output yang Dihasilkan:

text 
Viewport 500px, layar biasa   -> browser mengunduh pantai-480.jpg
Viewport 900px, layar biasa   -> browser mengunduh pantai-800.jpg
Viewport 900px, layar retina  -> browser mengunduh pantai-1440.jpg
File yang diunduh hanya satu  -> sisanya tidak diminta

Atribut src tetap ditulis untuk browser tanpa dukungan srcset.

sizes: Menjelaskan Lebar Slot #

srcset saja belum cukup: browser perlu tahu seberapa lebar gambar akan ditampilkan pada halaman. Atribut sizes mengisinya berupa daftar kondisi media dan lebar slot yang dipisahkan koma; kondisinya ditulis dengan sintaks yang mirip CSS media query. Browser mengambil kondisi pertama yang cocok, lalu memakai angka lebar slot itu — dikalikan kepadatan piksel layar — untuk memilih kandidat terkecil pada srcset yang memenuhi kebutuhan.

Tanpa sizes, browser menganggap slot gambar selebar viewport penuh (100vw) sehingga cenderung memilih file yang lebih besar dari yang diperlukan. Karena itu, tulis sizes setiap kali memakai width descriptor, dan angkanya harus mencerminkan layout yang dihasilkan CSS.

Density Descriptor x #

Selain w, srcset mengenal density descriptor x yang menandai kelipatan kepadatan piksel. Bentuk ini dipakai untuk gambar yang ukuran tampilnya tetap, misalnya logo dan ikon: satu file untuk layar biasa (1x) dan satu file lebih tajam untuk layar retina (2x).

html 
<img src="logo-toko-1x.png"
     srcset="logo-toko-1x.png 1x, logo-toko-2x.png 2x"
     alt="Logo Toko Budi" width="96" height="96">

Dengan x, kita tidak menulis sizes; ukuran tampil ditetapkan pada width dan height.

Pembagian Tugas HTML dan CSS #

srcset dan sizes tidak mengatur tata letak: media query CSS yang mengatur lebar elemen, kolom, dan posisi. Peran HTML di sini lebih mendasar — menentukan file mana yang diunduh browser. Keduanya berjalan berpasangan: CSS membentuk slot tampilan, sedangkan sizes menjelaskan slot itu kepada browser agar pilihan file-nya tepat.

Satu catatan perilaku: browser boleh mengambil keputusan yang berbeda dari pilihan kita, misalnya memakai file yang tersimpan di cache atau menyesuaikan diri dengan mode hemat data pengguna. Mekanisme ini sengaja bersifat petunjuk, sehingga kita cukup menyusun kandidat dengan benar dan menyerahkan pemilihannya kepada browser.

Contoh Lengkap dalam Satu File #

File berikut menampilkan satu gambar promo dengan tiga kandidat file. Ketiga file jpg-nya hipotetis; pembaca perlu menyediakannya dengan lebar 480, 800, dan 1440 piksel untuk mengamati perpindahan pilihan browser:

html contoh-responsive.html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Latihan Responsive Images</title>
</head>
<body>
  <h1>Promo liburan Budi</h1>
  <img
    src="pantai-800.jpg"
    srcset="pantai-480.jpg 480w,
            pantai-800.jpg 800w,
            pantai-1440.jpg 1440w"
    sizes="(max-width: 600px) 480px, 800px"
    alt="Pantai berpasir putih dengan perahu nelayan"
    width="800" height="533">
  <p>Paket perjalanan tiga hari menyusul di halaman ini.</p>
</body>
</html>

Output yang Dihasilkan:

text 
Jendela browser menampilkan:
  - Judul "Promo liburan Budi"
  - Gambar pantai dengan ruang 800x533 yang tersiap sejak awal
  - File yang diunduh bergantung viewport: pantai-480.jpg pada layar
    sempit, pantai-800.jpg pada layar lebar biasa, dan pantai-1440.jpg
    pada layar lebar berkepadatan tinggi

Mari kita telaah atribut-atribut pada img di atas:

  1. src="pantai-800.jpg": nilai awal untuk browser tanpa dukungan srcset.
  2. srcset tiga kandidat: setiap alamat diikuti lebar intrinsik file yang sebenarnya; angka pada nama file menandai ukurannya agar mudah dibaca.
  3. sizes="(max-width: 600px) 480px, 800px": slot selebar 480 piksel pada viewport sampai 600 piksel, selebar 800 piksel pada kondisi lainnya.
  4. alt dan pasangan width/height: teks pengganti dari chapter sebelumnya, plus reservasi ruang agar layout tidak bergeser.
  5. Nama file berakhiran ukuran: bukan aturan HTML, melainkan kebiasaan kerja yang membuat kandidat mudah diperiksa ulang.

Ketika kebutuhan naik tingkat — komposisi berbeda antar layar atau format file berbeda — elemen picture dan source menjadi jawabannya, dan itulah topik Chapter berikutnya.

Referensi resmi untuk pendalaman:

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

contoh-responsive.html

Unduh berkas
html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Latihan Responsive Images</title>
</head>
<body>
  <h1>Promo liburan Budi</h1>
  <img
    src="pantai-800.jpg"
    srcset="pantai-480.jpg 480w,
            pantai-800.jpg 800w,
            pantai-1440.jpg 1440w"
    sizes="(max-width: 600px) 480px, 800px"
    alt="Pantai berpasir putih dengan perahu nelayan"
    width="800" height="533">
  <p>Paket perjalanan tiga hari menyusul di halaman ini.</p>
</body>
</html>