cssresponsifgambarMenengah5 mnt baca

Gambar Responsif

max-width 100%, srcset dan sizes, serta picture untuk art direction.

Masalah: gambar meluber

Gambar punya lebar asli (misal 1200px). Di HP 360px, gambar 1200px akan meluber keluar layar dan merusak layout. Satu baris CSS menyelesaikan 90% masalah gambar responsif:

css

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

max-width: 100% berarti "jangan pernah lebih lebar dari wadahmu". height: auto menjaga rasio aspek agar gambar tidak gepeng. Ini aturan yang layak ada di setiap reset CSS.

Contoh bertahap: dari rusak ke rapi

Tanpa aturan (rusak di mobile):

css

/* gambar 1200px di layar 360px = meluber */
.artikel img {
  width: 1200px;
}

Dengan aturan dasar (cukup untuk kebanyakan kasus):

css

.artikel img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  display: block; /* hilangkan gap bawah inline */
}

display: block menghilangkan celah misterius di bawah gambar (gambar adalah inline secara default, sejajar baseline teks).

srcset: hemat kuota HP

Masalah berikutnya: gambar 1200px diunduh utuh walau ditampilkan 360px. Boros kuota. srcset memberi browser beberapa pilihan ukuran:

html

<img src="foto-800.jpg"
     srcset="foto-400.jpg 400w, foto-800.jpg 800w, foto-1200.jpg 1200w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Foto produk">

Browser memilih file terkecil yang cukup tajam untuk layar itu. sizes memberi tahu seberapa lebar gambar ditampilkan: di layar kecil 100vw (penuh), selain itu 50vw.

picture: art direction

Kadang bukan soal ukuran, tapi komposisi: foto landscape di desktop vs crop portrait di HP. Elemen <picture> memungkinkan itu:

html

<picture>
  <source media="(max-width: 600px)" srcset="foto-portrait.jpg">
  <source media="(min-width: 601px)" srcset="foto-landscape.jpg">
  <img src="foto-landscape.jpg" alt="Foto produk">
</picture>

Browser memakai source pertama yang cocok, fallback ke <img>.

Catatan teknis: selalu isi alt yang deskriptif untuk aksesibilitas dan SEO. Gambar dekoratif murni boleh alt="" agar diabaikan screen reader.

Tips profesional

Aturan emas: setiap <img> dapat max-width: 100%; height: auto; secara default (taruh di reset CSS).
Format WebP/AVIF memangkas ukuran 30-50% dibanding JPEG dengan kualitas sama.
Tambahkan atribut width dan height pada <img> agar browser memesan ruang dulu (mencegah layout shift).

Pola siap salin: gambar artikel anti-meluber

css

/* Di reset CSS global */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Gambar hero artikel */
.artikel img {
  border-radius: 12px;
  margin: 24px 0;
}

Tiga baris di reset + sedikit gaya sudah menyelesaikan 95% masalah gambar responsif.

Lazy loading bawaan browser

html

<img src="foto.jpg" alt="..." loading="lazy" width="800" height="600">

Satu atribut loading="lazy": gambar di bawah lipatan baru diunduh saat hampir terlihat. Halaman terasa jauh lebih cepat tanpa JavaScript.

Rangkuman

Fondasi: max-width: 100%; height: auto. Hemat kuota: srcset + sizes. Komposisi beda per perangkat: <picture>. Jangan lupakan alt.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Rasakan Melubernya

Satu baris max-width menyelamatkan layout dari gambar besar. Pahami dengan merasakannya langsung.

Di playground:

Hapus max-width: 100% sementara, sempitkan preview, amati gambar meluber dan merusak layout. Kembalikan.
Tambahkan height: auto tidak relevan di sini (tinggi fixed), tapi coba: apa jadinya kalau height tidak auto pada img asli? Jelaskan di komentar.
Tulis contoh <img> dengan srcset 2 ukuran di komentar HTML sebagai latihan.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Halo CSS</h1>
<p>Edit styles.css dan lihat hasilnya.</p>
</body>
</html>

Open Sandbox