Gambar adalah elemen yang paling sering membuat layout responsif tampak berantakan: sebuah foto berlebar intrinsik 1200px tidak akan mengecil dengan sendirinya ketika wadahnya hanya 360px. Kabar baiknya, mayoritas kasus selesai dengan dua deklarasi CSS. Setelah fondasi itu, kebutuhan lanjutan — mengirim file berbeda sesuai ukuran layar dan memilih format modern — diselesaikan oleh atribut HTML srcset, sizes, dan elemen <picture>. Chapter ini menata ketiga lapis tersebut dari yang paling sering dipakai.

Pola Wajib: max-width: 100% dan height: auto #

css 
img {
  max-width: 100%;
  height: auto;
  display: block;
}

Mari kita telaah tiga deklarasi di atas:

  1. max-width: 100%: membatasi lebar gambar tidak melebihi lebar wadahnya. Gambar 1200px di wadah 360px menjadi 360px; gambar kecil di wadah lebar tidak dibesarkan karena sifat max-width hanya menahan, bukan memaksa.
  2. height: auto: mencegah tinggi ikut terjepit ketika lebar ditekan. Tanpa deklarasi ini, gambar bisa tampil gepeng karena tinggi intrinsiknya dipertahankan sementara lebar menyusut.
  3. display: block: opsional tetapi membantu — menghilangkan celah garis dasar (baseline gap) di bawah gambar dan membuat gambar berperilaku seperti blok biasa di dalam layout.

Kombinasi ini dipakai hampir di setiap reset CSS modern, dan demo chapter ini membuktikannya: gambar SVG 800x400 di bingkai 400px menghasilkan 400x200 — rasio 2:1 tetap utuh.

aspect-ratio: Mencadangkan Ruang Sejak Awal #

Ketika gambar baru dimuat, tingginya belum diketahui browser sehingga konten di bawahnya terdorong — efek yang dikenal sebagai layout shift. Atribut width dan height pada <img> memberi browser perhitungan rasio sejak awal; bila rasio perlu dipaksa dari CSS, gunakan aspect-ratio :

css 
.gambar-rasio {
  width: 100%;
  aspect-ratio: 2 / 1;
  height: auto;
  object-fit: cover;
}

Dengan aspect-ratio: 2 / 1 di bingkai 300px, tinggi langsung dihitung 150px sebelum piksel gambar tersedia. object-fit: cover menjaga agar isi gambar terpotong rapi — bukan gepeng — bila rasio file aslinya berbeda dari rasio CSS.

Cadangan ruang serupa juga bisa disiapkan lewat atribut HTML: <img width="800" height="400"> memberi browser pasangan dimensi intrinsik tanpa CSS tambahan, dan kedua cara tersebut boleh dipakai bersama. Untuk gambar yang berada di bawah area tampilan pertama, tambahkan loading="lazy" agar pengunduhannya tertunda sampai gambar mendekati layar — penghematan yang terasa di ponsel.

srcset dan sizes: Mengirim Ukuran yang Tepat #

CSS di atas menyelesaikan tampilan, tetapi ponsel tetap mengunduh file yang sama besar dengan desktop. Untuk mengirim file yang sesuai, gunakan atribut srcset (daftar kandidat file) dan sizes (informasi lebar tampilan):

html index.html 
<img
  src="kota-800.jpg"
  srcset="kota-400.jpg 400w, kota-800.jpg 800w, kota-1600.jpg 1600w"
  sizes="(min-width: 1024px) 800px, 100vw"
  alt="Taman kota pada sore hari">

Mari kita telaah atribut tersebut:

  1. srcset dengan deskriptor w: setiap kandidat menyebut lebar intrinsik file-nya — 400w, 800w, 1600w — sehingga browser tahu kualitas masing-masing tanpa perlu mengunduhnya lebih dulu.
  2. sizes: memberi tahu berapa lebar gambar akan ditampilkan; di sini 800px mulai 1024px, dan selebar viewport penuh (100vw) di bawahnya.
  3. Keputusan browser: berdasarkan sizes dan kepadatan piksel layar, browser memilih satu kandidat — ponsel bisa menerima file 400w sementara desktop menerima 1600w. Atribut src tetap ditulis sebagai fallback untuk browser lama.

picture: Format Modern dengan Fallback #

Bila tujuannya format file — bukan ukuran — gunakan elemen picture :

html index.html 
<picture>
  <source type="image/avif" srcset="kota.avif">
  <source type="image/webp" srcset="kota.webp">
  <img src="kota.jpg" alt="Taman kota pada sore hari">
</picture>

Browser memilih <source> pertama yang formatnya didukung dan melompat ke baris berikutnya bila tidak — AVIF bila ada, WebP sebagai cadangan, dan JPEG sebagai jaminan terakhir.

Hasil di Browser:

text 
Bingkai 400px: gambar fluid tampil 400x200 (rasio 800:400 terjaga).
Bingkai 300px: gambar dengan aspect-ratio 2/1 tampil 300x150.
Gambar tanpa max-width: 100% tetap selebar 500px dan meluber dari
bingkai 400px — perilaku inilah yang cegah pola wajib di atas.

Dengan gambar tertangani, bagian konten yang tersisa untuk disesuaikan adalah teks — topik Chapter berikutnya tentang tipografi responsif.