Gambar Responsif dengan srcset dan sizes

Pilih pola yang tepat

Resolution switching menjaga komposisi tetap sama dan menawarkan beberapa lebar berkas. Ini adalah pola umum untuk foto produk, figura artikel, dan kartu. Gunakan deskriptor lebar seperti 480w atau 1200w ketika lebar render berubah sesuai tata letak. Angka itu adalah lebar piksel nyata dari berkas, bukan target ponsel atau perintah CSS.

Density switching melayani slot CSS yang tetap dengan lebih banyak piksel sumber untuk tampilan dengan kepadatan lebih tinggi. Deskriptornya adalah 1x, 1.5x, atau 2x, dan cocok untuk logo atau ikon yang konsisten misalnya 160 piksel CSS lebar. Jangan mencampur deskriptor lebar dan kepadatan dalam satu srcset.

Pahami bagaimana sizes memandu pemilihan

Dengan deskriptor lebar, browser mengevaluasi sizes sebelum mengunduh gambar. Setiap entri memasangkan kondisi media opsional dengan sebuah panjang. Kondisi pertama yang cocok menyediakan ukuran sumber; panjang tanpa kondisi di akhir adalah fallback. sizes adalah petunjuk pemilihan, bukan aturan CSS.

Browser membandingkan ukuran sumber itu dengan lebar kandidat untuk menghitung kepadatan efektif, lalu mungkin mempertimbangkan kepadatan tampilan, zoom, dan kondisi jaringan. Browser tidak diwajibkan memilih nama berkas yang secara matematis paling dekat. Sediakan kandidat yang jujur dan perkiraan slot yang kredibel; pemilihan akhir tetap keputusan agen pengguna.

Turunkan kandidat dari tata letak aktual

Inventarisasikan komponen, bukan halaman. Hero, figura editorial, galeri produk, thumbnail pencarian, dan logo footer sering memiliki lebar slot yang berbeda. Untuk tiap-tiapnya, catat lebar render sempit dan terbesar, rasio aspek, perilaku crop, dan visibilitas pada layar awal.

Hasilkan lebar di sekitar rentang slot komponen yang bermakna, dengan opsi yang lebih besar ketika detail membenarkan rendering beresolusi tinggi. Berkas yang hampir identik menambah kompleksitas build dan cache; hanya berkas yang sangat kecil dan sangat besar yang memaksa kompromi. Uji URL yang dihasilkan alih-alih berasumsi transformasi gambar berfungsi.

Pertahankan src fallback yang valid dan nilai width serta height yang sesuai dengan rasio yang dikirimkan. Nilai-nilai itu memesan ruang tetapi tidak mencegah CSS responsif mengubah dimensi akhir.

Gunakan picture untuk art direction

Art direction mengubah komposisi, bukan sekadar ukuran berkas. Foto lanskap lebar mungkin perlu crop potret yang lebih ketat pada layar sempit agar subjek tetap terlihat. Elemen picture dapat menawarkan opsi sumber spesifik-media, diikuti img fallback. Browser mempertimbangkan media, type, dan informasi srcset setiap source; img membawa teks alternatif, dimensi, dan perilaku fallback.

Siapkan setiap crop dengan tinjauan editorial dan aksesibilitas. Crop pada ponsel dapat menghapus detail produk atau orang yang disebutkan di teks alternatif. Letakkan alt pada img dan deskripsikan informasi atau fungsi yang disampaikan gambar. Gunakan alt="" hanya untuk gambar yang benar-benar dekoratif; untuk gambar yang ditautkan atau tombol, jelaskan tindakan bukannya penampilan. Jangan memperkenalkan picture jika komposisi tidak berubah: srcset berbasis lebar yang biasa lebih sederhana.

Hindari kesalahan pemuatan dan markup yang mahal

Pemborosan umum adalah menyalin sizes="100vw" ke setiap gambar. Itu mungkin cocok untuk figura penuh-lebar yang sempit tetapi tidak untuk kontainer yang dibatasi atau kartu desktop. Kegagalan kebalikan adalah sizes yang usang setelah redesign. Ubah CSS dan sizes bersama-sama.

Jangan lazy-load gambar yang penting pada konten yang terlihat awal. Panduan merekomendasikan lazy loading untuk gambar di bawah fold dan menjaga hero yang terlihat eager. fetch priority dapat meningkatkan prioritas gambar yang benar-benar vital, tetapi aturan prioritas tinggi atau preload yang luas dapat merugikan kinerja. Jangan mengandalkan nama berkas atau hasil cache sebagai bukti.

Uji permintaan, crop, dan perbaikannya

Uji halaman representatif pada lebar perubahan tata letak, termasuk tepat di atas dan di bawah breakpoint grid. Sertakan pengaturan kepadatan tinggi, desktop lebar, dan status yang mengubah slot. Konfirmasi dimensi render, crop, teks alternatif, dan ketajaman visual.

Di Chrome DevTools, buka Network, muat ulang dengan cache dinonaktifkan atau gunakan Empty Cache And Hard Reload, filter permintaan gambar, dan periksa URL, ukuran transfer, header, initiator, dan timing. Batasi (throttle) untuk mengungkap pekerjaan yang terlambat atau boros. Catat viewport, faktor skala perangkat, slot, kandidat, byte yang ditransfer, dan hasil yang diharapkan.

Ketika template, breakpoint, CDN, atau pipeline aset berubah, jadikan ini gerbang rilis. Perbaiki secara sempit: koreksi sizes, perbaiki deskriptor, regenerasi crop, pulihkan fallback, atau hapus preload yang tidak perlu. Uji ulang dengan muat ulang cache kosong.

Terapkan sebagai kontrol ketahanan SIU

Gambar responsif mengurangi transfer yang dapat dihindari tetapi tidak dapat menjamin permintaan berhasil. Kesalahan origin, transformasi yang tidak tersedia, host pihak ketiga, dan kegagalan CDN memerlukan perencanaan kontinuitas dan pemulihan terpisah.

Untuk SIU, gunakan catatan pengujian untuk menangkap regresi pengiriman lebih awal, identifikasi template atau aturan transformasi yang bertanggung jawab, dan lakukan koreksi paling kecil yang aman sebelum peluncuran. Padukan ini dengan pemeriksaan ketersediaan pra-penerbangan dan perencanaan rollback.