Gambar responsif: memahami srcset, sizes, dan rasio piksel perangkat

Pisahkan piksel sumber, piksel CSS, dan DPR

Berkas selebar 800 piksel bisa ditampilkan pada slot 400 piksel CSS. Pada DPR 2, slot itu menggunakan sekitar 800 piksel perangkat. Hubungan ini membantu menentukan resolusi; pilihan akhir tetap milik peramban.

Hitung slot sebagai nilai lebih kecil antara 800 dan lebar viewport dikurangi 32. Kalikan slot tersebut dengan DPR untuk memperoleh target lebar sumber. Jangan mengalikan seluruh viewport bila gambar hanya menempati satu kolom kecil.

Gunakan deskriptor lebar untuk tata letak yang berubah

Deskriptor w menyatakan lebar asli berkas, bukan breakpoint. Angkanya harus sesuai dengan gambar sesungguhnya. sizes menjelaskan lebar slot yang diharapkan: pada contoh, viewport mulai 832 piksel memakai slot 800, sedangkan yang lebih sempit memakai lebar viewport dikurangi kedua tepi.

CSS yang menyertai markup adalah bagian contoh. Jika komponen dipindahkan ke setengah grid, sesuaikan sizes. Nilai lama yang masih menyatakan lebar penuh bisa membuat peramban memilih sumber terlalu besar. Deskripsi yang tepat mengikuti komponen, bukan sekadar ukuran ponsel populer.

<img
  src="/images/workspace-800.webp"
  srcset="/images/workspace-400.webp 400w,
          /images/workspace-800.webp 800w,
          /images/workspace-1600.webp 1600w"
  sizes="(min-width: 832px) 800px, calc(100vw - 32px)"
  width="1600" height="1200"
  alt="A desk with a monitor and an open notebook"
  style="display:block;width:calc(100vw - 32px);max-width:800px;height:auto;margin-inline:auto"
>

Perkirakan kandidat, lalu periksa pilihan sebenarnya

Pada viewport 392 dan DPR 2, slotnya 360 piksel CSS sehingga target sumber 720. Kandidat 800w merupakan perkiraan masuk akal dari daftar tersebut. Pada kolom lebar dan DPR 2, targetnya 1600. Perhitungan menjelaskan masukan pemilihan, bukan memaksa satu URL tertentu.

Peramban dapat mempertimbangkan faktor lain dan mempertahankan gambar besar yang sudah diunduh setelah viewport mengecil. Uji pemuatan baru dengan pengaturan perangkat yang diinginkan. Periksa URL terpilih dan byte transfer di alat pengembang; mengubah ukuran halaman yang sudah hangat dapat menyesatkan.

Buat berkas asli selebar 400, 800, dan 1600 piksel, periksa kualitasnya, lalu pastikan semua URL mengembalikan gambar. Menggandakan satu berkas besar dengan nama berbeda tidak menghasilkan ukuran kandidat yang benar.

• Ukur lebar elemen yang dirender, bukan menganggapnya sama dengan viewport.
• Bandingkan currentSrc dengan respons gambar di panel Network.
• Periksa dimensi, tipe respons, keadaan cache, dan byte transfer.
• Ulangi pada viewport sempit dan lebar dengan DPR 1 serta DPR 2.
• Cari luapan horizontal dan pergeseran tata letak ketika gambar selesai dimuat.

Pilih deskriptor kepadatan untuk ukuran tetap

Logo yang selalu tampil selebar 120 piksel CSS dapat memakai berkas 120 sebagai 1x dan 240 sebagai 2x. Ini adalah pilihan resolusi untuk ukuran tampilan yang sama. Jangan mencampur deskriptor x dan w dalam satu srcset.

Potongan komposisi yang berbeda merupakan persoalan lain. Jika versi seluler perlu wajah dekat dan desktop memerlukan pemandangan luas, gunakan picture dengan kondisi media pada source. Teks alternatif harus menjelaskan isi yang bermakna bagi pembaca, bukan nama berkas.

<img src="/images/mark-120.png"
     srcset="/images/mark-120.png 1x, /images/mark-240.png 2x"
     width="120" height="120" alt="Example project mark">

Rencanakan rasio aspek dan waktu pemuatan

Atribut width dan height memungkinkan peramban menyediakan ruang berdasarkan rasio sebelum gambar tiba. CSS tetap dapat mengubah ukuran responsifnya. Pada rasio 4:3, lebar 800 memberikan tinggi 600; lebar 360 memberikan tinggi 270.

Lazy loading berguna untuk gambar jauh di bawah halaman, tetapi jangan menunda gambar penting yang langsung terlihat tanpa alasan. Kandidat responsif mengurangi piksel berlebih; format, kompresi, dan strategi pemuatan menangani bagian biaya yang berbeda.

Memori hasil dekode berbeda dari ukuran berkas jaringan. WebP kecil dapat menjadi buffer piksel besar. Hitung memori dari dimensi dekode dan ukur berkas terkompresi sebenarnya, alih-alih menebak byte hanya dari jumlah piksel.

Periksa kontrak komponen sebelum rilis

Simpan lebar kandidat, potongan, rasio, kualitas, dan ekspresi sizes bersama aturan komponen. Perubahan lebar maksimal dari 800 menjadi 1000 perlu diikuti peninjauan kandidat, agar deskripsi tidak tertinggal dari desain.

Periksa src cadangan, semua URL srcset, teks alternatif, dan ruang yang disediakan. Gunakan kalkulator piksel CSS ke perangkat untuk slot serta DPR Anda, dan kalkulator rasio untuk tinggi. Hasil yang dicari adalah berkas dan tata letak yang benar-benar cocok pada perangkat nyata.