Responsive Images

Gambar adalah elemen yang paling sering merusak layout responsif: foto hasil kamera ponsel mudah mencapai 3000px ke atas, dan begitu ditempel ke kolom 360px, tonjolan itulah yang memaksa halaman menggulir menyamping. Kabar baiknya, sebagian besar kasus selesai dengan dua deklarasi CSS. Pada chapter ini kita membedah pasangan max-width: 100% dan height: auto baris demi baris, menengok perilaku background-image yang aturannya berbeda, lalu mengenali pembagian tugas dengan fitur HTML seperti srcset — cukup sampai level pengenalan, karena pembahasan gambar yang penuh menunggu di section Images dan Media.

Resep Emas: max-width dan height auto #

Aturan berikut layak disebut resep emas karena hanya dua deklarasi, tetapi melindungi hampir semua gambar di halaman:

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

Mari kita bedah kedua deklarasinya:

1. max-width: 100% — menetapkan batas atas lebar: gambar tidak akan pernah melebihi lebar kontainernya. Sifat inilah bedanya dengan width: nilai max-width hanya berlaku bila ukuran natural gambar melampauinya. Kolom 900px dengan gambar natural 600px tetap menampilkan 600px; tidak ada gambar kecil yang dipaksa membesar lalu tampak buram.
2. height: auto — tinggi dihitung ulang mengikuti lebar terkini. Tanpa deklarasi ini, atribut width="800" height="450" di HTML membuat tinggi tetap terkunci 450px saat lebar dipangkas oleh max-width — hasilnya gambar gepeng. Nilai auto memulihkan rasio aspek.

Dalam proyek nyata, resep ini dipasang sekali di awal untuk semua media — bentuknya bagian dari reset:

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

display: block ditambahkan untuk menghapus celah kecil di bawah gambar — sisa ruang huruf turunan pada mode inline — sehingga jarak vertikal semua media bisa diatur dengan prediktabilitas penuh.

Pada ponsel sungguhan, tonjolan semacam inilah yang mendorong dokumen melebar dan memunculkan scrollbar horizontal — karenanya resep emas dipasang sekali di awal proyek.

background-image Berada di Lapisan Berbeda #

background-image tidak terkena resep di atas karena bukan elemen — ia hanya cat yang ditempel di belakang konten, sehingga tidak ada kotak gambar yang bisa dibatasi max-width. Ukurannya diatur lewat background-size:

.banner-promo {
  min-height: 220px;
  background-image: url("latar-kopi.jpg");
  background-size: cover;      /* isi penuh area; kelebihan gambar terpotong */
  background-position: center; /* bagian tengah yang dipertahankan */
}

cover mengisi penuh dan memotong sisanya, contain memuat seluruh gambar dan menyisakan ruang kosong — keduanya kita bedah tuntas pada section Images dan Media.

Demo berikut memakai background-size: cover pada gambar peraga yang sama di dua lebar kolom berbeda:

Sisi HTML: srcset dan picture #

CSS mengatur seberapa besar gambar ditampilkan; pihak HTML yang menyediakan pilihan berkasnya. Dua istilah yang akan sering kamu temui:

• Resolution switching — gambar yang sama disediakan dalam beberapa resolusi, lalu browser memilih yang paling pas untuk lebar layar dan kepadatan piksel. Alatnya atribut srcset dan sizes.
• Art direction — komposisi berbeda per ukuran layar, misalnya foto panorama dipangkas menjadi potongan persegi di ponsel. Alatnya elemen <picture>.

<img
  src="kopi-gayo-800.jpg"
  srcset="kopi-gayo-400.jpg 400w, kopi-gayo-800.jpg 800w, kopi-gayo-1200.jpg 1200w"
  sizes="(min-width: 768px) 50vw, 100vw"
  alt="Biji kopi Gayo hasil sangrai">

Fence di atas murni fitur HTML, bukan CSS. Anggap saja pembagi tugas: atribut sizes memberi tahu browser seberapa lebar gambar akan ditampilkan (separuh viewport di atas 768px, selebar viewport di bawahnya), lalu browser memilih satu berkas dari daftar srcset yang paling efisien. Detail sintaksnya menunggu di section Images dan Media; untuk saat ini cukup kenali kedua nama dan tugasnya.

Kesalahan Umum #

Tiga keliru paling sering ditemui saat menangani gambar responsif:

Ringkasan #

Pasangan max-width: 100% dan height: auto menutup sebagian besar masalah gambar responsif di sisi CSS; background-size: cover mengambil alih kasus latar; dan srcset bersama <picture> menunggu di ranah HTML untuk efisiensi berkas dan art direction. Dengan media yang tunduk pada kolomnya, komponen berikutnya yang membutuhkan perlakuan serupa adalah navigasi — bagian halaman yang paling sering direstrukturisasi antar ukuran layar.