Tutorial HTML / Gambar responsif dengan srcset, sizes, dan picture

Gambar responsif menyediakan file dengan berbagai resolusi atau komposisi kepada browser, agar browser dapat memilih gambar yang sesuai untuk tampilan. Gunakan srcset dan sizes untuk pemilihan resolusi dari gambar yang sama, dan picture jika layar yang lebih sempit memerlukan potongan gambar yang berbeda.

Dapatkan file gambar contoh

Contoh-contoh ini menggunakan gambar danau yang sama dalam tiga lebar dan satu potongan persegi yang menonjolkan pohon. Unduh file-file tersebut dan simpan di folder yang sama dengan file HTML Anda untuk menguji URL relatif yang tidak diubah. Siapkan file, teks alternatif, dan dimensi menggunakan prinsip-prinsip di Gambar: img, teks alternatif, dan dimensi.

• Gambar dengan lebar 480 piksel
• Gambar dengan lebar 960 piksel
• Gambar dengan lebar 1600 piksel
• Potongan persegi 800×800 piksel

Tiga yang pertama mempertahankan adegan dan rasio aspek. File persegi memiliki komposisi berbeda untuk tampilan sempit.

Memilih resolusi gambar dengan srcset dan sizes

Deskriptor 480w, 960w, dan 1600w dalam srcset menunjukkan lebar sebenarnya setiap file dalam piksel. sizes menjelaskan lebar desain yang diharapkan dari gambar dalam berbagai kondisi jendela.

<img class="example-fluid"
  src="html-image-sample-lake-tree-960-v1.webp"
  srcset="html-image-sample-lake-tree-480-v1.webp 480w,
          html-image-sample-lake-tree-960-v1.webp 960w,
          html-image-sample-lake-tree-1600-v1.webp 1600w"
  sizes="(max-width: 800px) 100vw, 800px"
  alt="Sebuah pohon di sebuah pulau di tengah danau, dengan gunung-gunung di latar belakang"
  width="1600" height="900">

Ini mengasumsikan bahwa gambar kira-kira memiliki lebar yang sama dengan jendela tampilan hingga 800 piksel CSS, dan tidak melebihi 800 piksel CSS. Jika tata letak Anda berbeda, ubah sizes agar sesuai. src menyediakan solusi cadangan untuk lingkungan tanpa dukungan srcset.

.example-fluid {
  display: block;
  width: 100%;
  max-width: 800px;
  height: auto;
}

CSS ini hanya berlaku untuk contoh pertama yang memiliki kelas example-fluid. Peramban juga dapat mempertimbangkan kerapatan piksel perangkat dan zoom. Oleh karena itu, viewport yang sempit tidak menjamin bahwa file 480 piksel akan dipilih. sizes menggambarkan piksel CSS yang ditampilkan dan bukan lebar file yang diunduh.

Gunakan deskriptor kerapatan untuk lebar tampilan tetap

Jika sebuah gambar selalu ditampilkan dengan lebar CSS 480 piksel, Anda dapat menyarankan kandidat 1x dan 2x. Jangan gunakan sizes dengan bentuk ini.

<img class="example-fixed"
  src="html-image-sample-lake-tree-480-v1.webp"
  srcset="html-image-sample-lake-tree-480-v1.webp 1x,
          html-image-sample-lake-tree-960-v1.webp 2x"
  alt="Sebuah pohon di sebuah pulau di tengah danau, dengan gunung-gunung di latar belakang"
  width="480" height="270">

.example-fixed {
  display: block;
  width: 480px;
  height: auto;
}

CSS dari contoh pertama tidak berlaku untuk gambar ini. CSS ini menetapkan lebar tampilan menjadi 480 piksel, sehingga gambar dapat melewati kontainer yang lebih sempit. Jika lebar tampilan harus berubah tergantung pada tata letak, gunakan pendekatan yang disebutkan sebelumnya dengan w dan sizes. Jangan mencampur deskriptor w dan x dalam satu srcset.

Mengubah pemotongan dengan picture

picture dapat menawarkan komposisi yang berbeda, bukan hanya resolusi yang berbeda. Contoh ini menggunakan pemotongan persegi untuk lebar jendela hingga 600 piksel dan gambar lanskap untuk ukuran lain.

<picture class="example-picture">
  <source media="(max-width: 600px)"
          srcset="html-image-sample-lake-tree-square-800-v1.webp"
          width="800" height="800">
  <img src="html-image-sample-lake-tree-960-v1.webp"
       alt="Sebuah pohon di sebuah pulau di tengah danau, dengan gunung-gunung di latar belakang"
       width="960" height="540">
</picture>

Memilih sebuah potongan dan menyesuaikan lebar tampilannya adalah tindakan yang berbeda. Tambahkan CSS ini ke elemen style di bagian kepala atau ke stylesheet yang terhubung, agar gambar dalam picture menyesuaikan dengan elemen induk yang sempit sambil mempertahankan proporsinya.

.example-picture img {
  display: block;
  max-width: 100%;
  height: auto;
}

Foto di atas menunjukkan file persegi yang digunakan pada layar sempit; foto ini di artikel itu sendiri tidak berubah tergantung pada lebar jendela. picture selalu memerlukan elemen img dengan konten pengganti dan alt. Setiap source memberikan kondisi dan file kandidat; teks alternatif gambar termasuk dalam img.

Periksa gambar mana yang dipilih browser

Simpan keempat file gambar, sambil mempertahankan nama file mereka, di samping index.html. Buat contoh HTML di dalam body dan CSS-nya di dalam elemen style di head atau di stylesheet terpisah. Untuk menguji terkait dengan lebar jendela sebenarnya di perangkat seluler, tambahkan <meta name="viewport" content="width=device-width, initial-scale=1"> ke head.

1. Buka index.html di peramban dan buka panel jaringan di alat pengembang.
2. Ubah lebar jendela tampilan, nonaktifkan cache dan muat ulang halaman. Periksa nama file dari permintaan gambar untuk melihat kandidat mana yang dimuat.
3. Untuk contoh picture, muat ulang sekali dengan lebar jendela browser 600 piksel atau kurang dan sekali lagi dengan lebar lebih dari 600 piksel. Periksa pemotongan kotak pada lebar tersempit dan file lanskap pada lebar terluas.

Anda juga bisa memeriksa nilai-nilai ini di konsol. currentSrc menunjukkan URL gambar yang saat ini dipilih oleh browser. Perintah pertama ditujukan untuk contoh srcset; perintah kedua ditujukan untuk contoh picture.

document.querySelector('.example-fluid').currentSrc
document.querySelector('picture img').currentSrc

Bahkan dengan lebar jendela yang sama, kepadatan piksel dan zoom dapat menentukan file srcset yang dipilih. Jika file yang lebih besar sudah dimuat, memperkecil jendela tidak akan segera menggantinya dengan file yang lebih kecil. Ubah kondisi, nonaktifkan cache, dan muat ulang sebelum membandingkan.

Periksa perubahan resolusi dan penyesuaian potongan gambar

Jendela tampilan adalah area peramban yang digunakan untuk mengatur halaman. Kepadatan piksel perangkat menghubungkan piksel CSS dengan piksel fisik layar. Kepadatan, zoom, dan status cache dapat memengaruhi pemilihan resolusi meskipun lebar jendela sama, oleh karena itu Anda tidak boleh menjanjikan nama file tetap untuk srcset. Uji kondisi media untuk potongan gambar secara terpisah dari perubahan resolusi.

Jika gambar yang salah dipilih

• Periksa bahwa setiap penanda w sesuai dengan lebar sebenarnya dari file dalam piksel.
• Bandingkan sizes dengan lebar CSS pada setiap ukuran jendela.
• Untuk memilih resolusi, gunakan berkas dengan komposisi yang sama. Untuk komposisi atau potongan berbeda, gunakan picture dengan berkas yang sesuai.
• Pertahankan alt yang bermakna pada img di dalam picture.

Untuk aturan pemilihan yang rinci, lihat panduan gambar responsif MDN dan spesifikasi gambar HTML WHATWG.