Belajar HTML - Responsif dengan Media Queries dan Gambar Adaptif

#Pendahuluan

Pengguna mengakses web dari ponsel, tablet, dan layar lebar. Episode 20 membahas responsive design: meta viewport dan unit relatif untuk fondasi yang luwes, media queries dengan pendekatan mobile-first, serta srcset, sizes, dan picture agar gambar selalu tajam dan hemat data.

Responsif bukan berarti halaman kecil di ponsel dan besar di desktop. Artinya satu konten yang menyusun dirinya sendiri sesuai ruang yang tersedia, dengan aset yang pas untuk setiap perangkat.

#Dasar Layout yang Luwes

#viewport dan Unit Relatif

Tanpa meta viewport, ponsel merender halaman selebar desktop lalu mengecilkannya. Atur lebar ke perangkat dan mulai dari skala satu:

Meta viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Gunakan unit relatif, bukan piksel tetap, untuk ukuran yang menyesuaikan. % untuk lebar, rem untuk teks, serta vw atau vh untuk ukuran terhadap viewport.

#Media Queries Mobile-first

Tulis gaya dasar untuk layar kecil terlebih dahulu, lalu perbaiki dengan min-width. Ini pendekatan mobile-first — basis yang ringan, peningkatan untuk layar lebih besar:

Media query mobile-first

.lajur {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
 
@media (min-width: 768px) {
  .lajur {
    grid-template-columns: 1fr 1fr;
  }
}
 
@media (min-width: 1200px) {
  .lajur {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

Kondisi yang sama bisa dicek dari JavaScript dengan window.matchMedia("(min-width: 768px)").matches. Breakpoint dipilih berdasarkan konten, bukan perangkat tertentu; 768 dan 1200 piksel hanyalah titik awal yang umum.

#Gambar Adaptif

#srcset dan sizes

Gambar yang sama tidak perlu dikirim dalam ukuran penuh ke semua layar. srcset menawarkan beberapa versi dengan lebar, sizes memberi tahu browser ruang yang tersedia:

Gambar responsif

<img
  srcset="pantai-kecil.png 480w, pantai-sedang.png 1024w, pantai-besar.png 1600w"
  sizes="(min-width: 1200px) 50vw, 100vw"
  src="pantai-sedang.png"
  alt="Pemandangan pantai saat senja"
>

Browser memilih kombinasi paling hemat berdasarkan lebar layar, rasio piksel perangkat, dan nilai sizes. src tetap ada sebagai cadangan bagi browser lama.

#Elemen picture

picture memberi kontrol penuh dengan <source> berurutan dan img sebagai dasar. Cocok untuk format modern dan gambar yang berubah komposisi:

Elemen picture

<picture>
  <source media="(min-width: 768px)" srcset="panorama-lebar.webp">
  <source type="image/webp" srcset="panorama.webp">
  <img src="panorama.jpg" alt="Panorama pegunungan dari puncak">
</picture>

Browser memakai <source> pertama yang cocok; yang tidak didukung dilewati. img dengan src dan alt adalah lapisan dasar yang harus selalu ada.

#Art Direction vs Format

picture menyelesaikan dua masalah. Art direction: gambar yang berubah komposisi di layar berbeda. Format: file webp atau avif yang lebih ringan dengan img jpeg sebagai fallback. srcset menangani ukuran saja.

#Latihan: Galeri yang Responsif

Susun galeri tiga kolom yang merapat menjadi satu kolom di ponsel:

Galeri responsif

<div class="galeri">
  <img srcset="foto1-kecil.png 480w, foto1-besar.png 1200w"
       sizes="(min-width: 768px) 33vw, 100vw"
       src="foto1-besar.png" alt="Bunga di taman" loading="lazy">
  <img srcset="foto2-kecil.png 480w, foto2-besar.png 1200w"
       sizes="(min-width: 768px) 33vw, 100vw"
       src="foto2-besar.png" alt="Pohon rindang" loading="lazy">
  <img srcset="foto3-kecil.png 480w, foto3-besar.png 1200w"
       sizes="(min-width: 768px) 33vw, 100vw"
       src="foto3-besar.png" alt="Jalan setapak" loading="lazy">
</div>

Gabungkan dengan CSS satu kolom saat kecil dan tiga kolom setelah 768 piksel. Uji dengan mengubah lebar jendela dan melihat tab perangkat pada alat pengembang.

#Kesalahan Umum dan Solusinya

#Srcset Tanpa sizes

Tanpa sizes, browser menebak lebar gambar. Selalu tulis sizes untuk pengambilan keputusan yang akurat.

#Breakpoint untuk Setiap Perangkat

Menambah breakpoint untuk tiap model ponsel adalah perawatan tanpa henti. Pilih tiga sampai lima titik berdasarkan konten dan pertahankan.

#Penutup

Episode 20 membuat halaman kalian beradaptasi: viewport dan unit relatif sebagai dasar, media queries mobile-first untuk tata letak, serta srcset, sizes, dan picture untuk gambar yang pas di setiap perangkat.

Inti yang harus dibawa pulang:

• meta viewport adalah prasyarat setiap halaman responsif.
• Tulis gaya mobile-first dan tingkatkan dengan min-width.
• Breakpoint dipilih dari konten, bukan dari model perangkat.
• srcset dan sizes memilih versi gambar berdasarkan layar.
• picture menangani format dan art direction dengan fallback.
• img selalu menjadi lapisan dasar pada picture.

Di episode 21 selanjutnya kita akan membahas optimasi performa HTML dan aksesibilitas mobile — preload dan preconnect, loading lazy, serta target sentuh dan ukuran teks untuk pengalaman ponsel yang nyaman.