Cara menggunakan srcset, sizes, dan picture dengan benar
Gambar responsif memungkinkan browser memilih file terkecil yang paling sesuai untuk layar dan tata letak pengunjung. Kuncinya adalah menyediakan varian lebar yang bisa diandalkan, mendeskripsikan slot tampilan dengan sizes, dan menjaga keputusan aksesibilitas konten tetap berada di halaman Anda, bukan di generator gambar.
Oleh PixoDiterbitkan Diperbarui
Buat varian lebar yang sesungguhnya
Mulai dengan beberapa file yang mempertahankan rasio aspek sumber, misalnya lebar 320, 640, 960, 1280, dan 1920 piksel. Jangan memperbesar (upscale) gambar asli yang lebih kecil, dan jangan menyimpan turunan yang lebih besar dari sumber tanpa alasan khusus. Generator gambar responsif Pixo menerapkan kedua aturan ini dan menulis dimensi serta tipe MIME hasilnya ke manifest.json.
Gunakan deskriptor lebar dalam srcset
Cantumkan setiap kandidat dengan lebar piksel sebenarnya, misalnya image-640w.webp 640w. Deskriptor w bukan lebar CSS dan bukan pula pengali kepadatan (density); ia memberi tahu browser lebar intrinsik file tersebut. Setiap path dalam srcset yang dihasilkan menunjuk ke aset yang disertakan dalam ZIP, jadi salin direktori assets dan markup-nya bersamaan.
Sesuaikan sizes dengan tata letak
Atribut sizes mendeskripsikan seberapa lebar gambar akan ditampilkan sebelum browser mengunduhnya. Titik awal yang umum adalah (min-width: 1024px) 50vw, 100vw untuk gambar yang memakai setengah viewport di desktop dan seluruh viewport di layar lebih kecil. Ganti contoh itu dengan breakpoint CSS dan lebar slot sebenarnya di situs Anda; sizes yang tidak akurat bisa membuat browser memilih file yang jauh lebih besar dari perlu atau terlihat kurang tajam.
Gunakan picture untuk pilihan format
Elemen picture bisa menawarkan sumber WebP sambil tetap menyediakan fallback img dalam format JPEG atau PNG. Letakkan elemen source lebih dulu dan elemen img terakhir. Browser akan memilih sumber yang didukung, dan tetap menggunakan elemen img untuk permintaan fallback, lebar dan tinggi intrinsik, perilaku loading, serta teks alternatif yang aksesibel.
Simpan width, height, dan alt di halaman
Atur width dan height dari manifest yang dihasilkan agar browser dapat mencadangkan ruang dengan rasio aspek yang benar dan mengurangi pergeseran tata letak (layout shift). Pixo sengaja membiarkan alt kosong karena hanya penulis halaman yang tahu apakah gambar bersifat informatif, fungsional, atau dekoratif. Tulis teks alt yang ringkas dan kontekstual untuk gambar yang bermakna, dan biarkan alt kosong hanya untuk gambar dekoratif.
Terapkan dan verifikasi paket lengkap
Ekstrak paketnya, publikasikan direktori assets tanpa mengganti nama filenya, tempel picture.html ke halaman Anda, lalu sesuaikan sizes dan alt. Setelah itu uji pada ukuran viewport sempit dan lebar, pastikan panel Network hanya meminta satu kandidat dan bukan seluruh set, dan verifikasi bahwa setiap URL yang diminta memberikan tipe MIME gambar yang sesuai.