Ukuran gambar untuk website: ikuti slot tata letak, bukan monitor
Tidak ada satu ukuran terbaik untuk semua gambar website. Set sumber yang tepat mengikuti lebar render maksimum gambar, breakpoint tata letak, kepadatan piksel perangkat, perilaku crop, dan anggaran performa halaman.
Oleh PixoDiterbitkan
Mulai dari slot render yang sebenarnya
Ukur slot tata letak CSS terlebar yang ditempati gambar, bukan lebar monitor. Hero selebar halaman dan kartu 320 piksel membutuhkan set sumber yang berbeda. Jika sebuah hero dirender pada 1280 piksel CSS di layar besar, kandidat 1280 dan mungkin 2560 piksel bisa berguna; kartu harus tetap jauh lebih kecil.
Generator gambar responsif Buat varian lebar, markup, dan ZIP secara lokal.
Buat set kandidat kecil yang berguna
Set lebar harus mengikuti tata letak: misalnya 320, 640, 960, 1280, dan 1920 piksel. Jangan membuat setiap ukuran yang mungkin. Browser memilih di antara kandidat yang ada, jadi setiap file harus mewakili selisih byte transfer yang berarti.
Beri tahu browser tata letaknya lewat sizes
Atribut srcset mencantumkan lebar kandidat; sizes mendeskripsikan seberapa lebar gambar akan dirender pada kondisi viewport tertentu. Jika sizes tidak ada atau tidak akurat, browser bisa mengunduh kandidat yang lebih besar dari yang diperlukan.
Pilih format dan kualitas per kelas gambar
Gunakan format lossy modern untuk foto, dan hasil lossless untuk grafik yang membutuhkannya. Logo sering lebih baik disimpan sebagai SVG. Bandingkan teks, wajah, gradasi, dan tepi tajam pada ukuran render sebenarnya, bukan menerapkan satu angka kualitas ke semua aset.
Jaga tata letak dan prioritas pemuatan
Atur width dan height intrinsik atau rasio aspek agar browser mencadangkan ruang. Prioritaskan gambar utama di paruh atas layar (above the fold) jika framework Anda mendukungnya, dan terapkan lazy-load untuk gambar di bawahnya. Hindari menjadikan semua gambar prioritas tinggi.