0Pricing
HTML Academy · Pelajaran

Gambar Responsif dengan srcset dan sizes

Sajikan gambar dengan ukuran yang sesuai untuk berbagai kepadatan layar.

Gambar Responsif dengan srcset dan sizes adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.

Masalah Gambar Tunggal

Satu gambar besar yang disajikan untuk semua perangkat membuang lebar pita pada layar kecil:

  • Telepon dengan layar 390px tidak memerlukan gambar 2400px
  • Monitor 4K layak mendapatkan gambar beresolusi lebih tinggi daripada 96dpi
  • Gambar responsif menyajikan gambar yang tepat untuk layar yang tepat

Atribut srcset

srcset menyediakan daftar sumber gambar beserta lebarnya:

<img
  src="photo-800.jpg"
  srcset="
    photo-400.jpg  400w,
    photo-800.jpg  800w,
    photo-1600.jpg 1600w
  "
  alt="Mountain landscape"
>
<!-- 400w, 800w, 1600w = intrinsic widths of each file -->
<!-- Browser chooses the best match for the device -->
<!-- src is the fallback for browsers that don't support srcset -->

Deskriptor Kepadatan Piksel

Gunakan deskriptor 1x, 2x, 3x untuk gambar berukuran tetap dengan resolusi berbeda:

<img
  src="logo.png"
  srcset="logo.png 1x, logo@2x.png 2x, logo@3x.png 3x"
  alt="Coddy logo"
  width="120"
  height="40"
>
<!-- 2x screens (Retina) get logo@2x.png -->
<!-- 3x screens (iPhone Pro) get logo@3x.png -->
<!-- 1x screens get logo.png -->

Atribut sizes

sizes memberi tahu peramban seberapa lebar gambar akan ditampilkan pada berbagai ukuran area pandang:

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         800px"
  alt="Landscape photo"
>
<!-- At ≤600px viewport: image takes 100% of viewport width -->
<!-- At ≤1200px viewport: image takes 50% -->
<!-- Otherwise: image is 800px wide -->

Cara Peramban Memilih Gambar

Peramban menghitung: nilai ukuran × rasio piksel perangkat untuk memilih dari srcset:

  • Area pandang 600px, DPR 2×, ukuran=100vw → memerlukan gambar 1200px → memilih 1600w
  • Area pandang 1200px, DPR 1×, ukuran=50vw → memerlukan gambar 600px → memilih 800w
  • Setelah dimuat, peramban menyimpannya dalam cache dan mungkin tidak memuatnya lagi

Nilai sizes Bawaan

Tanpa sizes, peramban menganggap gambar menggunakan lebar penuh area pandang (100vw):

<!-- Without sizes: browser assumes 100vw -->
<!-- This causes it to download a very large image on wide screens -->
<!-- Always specify sizes if your image is not full-width -->

<img
  srcset="hero-800.jpg 800w, hero-1600.jpg 1600w"
  sizes="100vw"  <!-- explicit full-width -->
  src="hero-1600.jpg"
  alt="Hero image"
>

Deskriptor Lebar srcset vs Deskriptor x

Dua mode srcset:

  • Deskriptor lebar (w) — dengan sizes: pemilihan yang fleksibel dan memahami tata letak
  • Deskriptor kepadatan piksel (x) — gambar berukuran tetap dengan beberapa resolusi

Gunakan deskriptor w untuk sebagian besar gambar responsif. Gunakan x untuk ikon, logo, dan elemen berukuran tetap.

Membuat Berkas srcset

Alat untuk membuat variasi gambar responsif:

  • Sharp (Node.js) — pengubahan ukuran gambar secara terprogram
  • Squoosh — berbasis peramban, dengan perbandingan visual
  • Cloudinary / Imgix — pengubahan ukuran berdasarkan alamat web sesuai permintaan
  • Webpack / Vite plugins — pembuatan saat proses build

srcset dengan WebP dan Cadangan

Gabungkan srcset dengan <picture> untuk menyediakan cadangan format:

<picture>
  <!-- Modern browsers: WebP -->
  <source
    type="image/webp"
    srcset="photo-400.webp 400w, photo-800.webp 800w"
    sizes="(max-width: 600px) 100vw, 50vw"
  >
  <!-- Fallback: JPEG -->
  <img
    srcset="photo-400.jpg 400w, photo-800.jpg 800w"
    sizes="(max-width: 600px) 100vw, 50vw"
    src="photo-800.jpg"
    alt="Mountain photo"
  >
</picture>

Pengarahan Artistik vs Pergantian Resolusi

Dua jenis masalah gambar responsif:

  • Pergantian resolusi — gambar yang sama, resolusi berbeda → gunakan srcset + sizes
  • Pengarahan artistik — pemotongan atau komposisi berbeda pada layar berbeda → gunakan <picture> dengan <source media>

Menguji Gambar Responsif

Cara memverifikasi bahwa srcset Anda berfungsi:

  • Buka DevTools → tab Jaringan → filter Gambar
  • Atur emulasi perangkat ke berbagai ukuran area pandang dan DPR
  • Muat ulang—periksa berkas mana yang diminta peramban
  • Periksa juga: Lighthouse → Kinerja → audit Gambar dengan ukuran yang tepat

Dukungan Peramban untuk srcset

Dukungan peramban untuk srcset sangat baik:

  • Didukung di semua peramban modern (Chrome, Firefox, Safari, Edge)
  • Cadangan src menangani peramban lama
  • Tidak diperlukan polifil untuk penggunaan produksi

Pemeriksaan Cepat

Apa yang diberitahukan atribut sizes kepada peramban?

Rangkuman: srcset dan sizes

Hal-hal penting tentang gambar responsif:

  • srcset — daftar berkas gambar dengan lebar intrinsik atau kepadatan pikselnya
  • sizes — kondisi media yang menjelaskan seberapa lebar gambar akan ditampilkan
  • Peramban memilih kecocokan terbaik: nilai sizes × DPR perangkat
  • Deskriptor lebar (w) untuk gambar fleksibel; x untuk elemen berukuran tetap
  • Selalu sediakan src sebagai cadangan

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Gambar Responsif dengan srcset dan sizes” gratis?

Ya — teks lengkap “Gambar Responsif dengan srcset dan sizes” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Gambar Responsif dengan srcset dan sizes”?

Sajikan gambar dengan ukuran yang sesuai untuk berbagai kepadatan layar. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai HTML Academy?

Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Gambar Responsif dengan srcset dan sizes” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?

Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Elemen img src alt width height
  2. Gambar Responsif dengan srcset dan sizes
  3. Elemen picture untuk Art Direction
  4. figure dan figcaption
← Kembali ke HTML Academy