Kita semua pernah mengalaminya: Anda lupa untuk memperkecil gambar sebelum menambahkannya ke kami. Gambar terlihat baik-baik saja, tetapi itu menyia-nyiakan pengalaman pengguna halaman yang bermasalah tingkat tinggi.
Mengidentifikasi gambar berukuran salah
Lighthouse memudahkan identifikasi gambar yang salah ukuran. Jalankan Audit Performa (Lighthouse > Opsi > Performa) dan cari hasil audit Ukuran gambar dengan benar. Audit mencantumkan setiap gambar yang perlu diubah ukurannya.
Menentukan ukuran gambar yang tepat
Pengaturan ukuran gambar bisa menjadi hal yang rumit. Oleh karena itu, kami telah memberikan dua pendekatan: "baik" dan "lebih baik." Keduanya akan meningkatkan kinerja, tetapi "lebih baik" mungkin memerlukan waktu sedikit lebih lama untuk dipahami dan diterapkan. Namun, juga akan memberikan reward dengan peningkatan performa yang lebih besar. Pilihan terbaik untuk Anda adalah orang yang membuat Anda merasa nyaman untuk menerapkannya.
Catatan singkat tentang unit CSS
Ada dua jenis unit CSS untuk menentukan ukuran elemen HTML, termasuk gambar:
- Unit absolut: Elemen yang ditata gayanya menggunakan unit absolut akan selalu ditampilkan dengan ukuran yang sama, apa pun perangkatnya. Contoh valid, unit CSS absolut: px, cm, mm, inci.
- Unit relatif: Elemen yang diberi gaya menggunakan unit relatif akan ditampilkan di berbagai ukuran, tergantung pada panjang relatif yang ditentukan. Contoh valid, unit CSS relatif: %, vw (1vw = 1% dari lebar area pandang), em (1,5 em = 1,5 kali ukuran font).
"Baik" Pendekatan
Untuk gambar dengan ukuran berdasarkan...
- Unit relatif: Ubah ukuran gambar ke ukuran yang akan berfungsi di semua perangkat.
Sebaiknya periksa data analisis Anda (mis., Google Analytics) untuk melihat ukuran tampilan yang biasa digunakan oleh pengguna Anda. Sebagai alternatif, screensiz.es memberikan informasi tentang tampilan berbagai perangkat umum. - Unit absolut: Ubah ukuran gambar agar sesuai dengan ukuran yang ditampilkan.
Panel Elemen DevTools dapat digunakan untuk menentukan ukuran gambar ditampilkan di.
"Lebih baik" pendekatan
Untuk gambar dengan ukuran absolut dan relatif, gunakan srcset
dan sizes
untuk menyajikan gambar yang berbeda ke kepadatan tampilan yang berbeda.
Baca panduan tentang gambar responsif.
"Kepadatan tampilan" mengacu pada fakta bahwa tampilan yang berbeda memiliki kepadatan piksel. Semua hal lainnya dianggap sama, kepadatan piksel yang tinggi layar akan terlihat lebih tajam daripada layar dengan kepadatan piksel rendah.
Akibatnya, diperlukan beberapa versi gambar jika Anda ingin pengguna mendapatkan gambar yang jernih, terlepas dari kepadatan piksel di perangkat mereka.
Teknik gambar responsif memungkinkan hal ini dengan memungkinkan Anda membuat daftar beberapa versi image dan agar perangkat memilih image yang berfungsi yang paling cocok.
Gambar yang berfungsi di semua perangkat akan terlalu besar untuk perangkat yang lebih kecil. Teknik gambar responsif, khususnya srcset dan ukuran, memungkinkan Anda menentukan beberapa versi gambar dan agar perangkat dapat memilih ukuran yang paling sesuai.
Ubah ukuran gambar
Apa pun pendekatan yang dipilih, Anda sebaiknya menggunakan ImageMagick untuk mengubah ukuran gambar. ImageMagick adalah yang paling populer baris perintah untuk membuat dan mengedit gambar. Kebanyakan orang dapat mengubah ukuran gambar jauh lebih cepat saat menggunakan CLI daripada editor gambar berbasis GUI.
Ubah ukuran gambar menjadi 25% dari ukuran asli:
convert flower.jpg -resize 25% flower_small.jpg
Skalakan gambar agar pas dengan "lebar 200px kali tinggi 100px":
# macOS/Linux
convert flower.jpg -resize 200x100 flower_small.jpg
# Windows
magick convert flower.jpg -resize 200x100 flower_small.jpg
Jika Anda akan mengubah ukuran banyak gambar, Anda akan merasa lebih nyaman menggunakan skrip atau layanan untuk mengotomatiskan proses. Anda dapat mempelajari lebih lanjut tentang hal ini di Panduan Gambar Responsif.
Menghindari pergeseran tata letak dengan menentukan dimensi
Meskipun panduan ini membahas dimensi gambar dalam konteks mengurangi jumlah byte yang tidak perlu didownload, penting untuk diperhatikan bahwa memesan ruang yang benar untuk gambar dalam tata letak adalah komponen penting lain dalam meminimalkan metrik Pergeseran Tata Letak Kumulatif halaman. Saat menayangkan gambar dalam HTML, pastikan untuk menggunakan atribut width dan height yang tepat sehingga browser mengetahui banyaknya ruang yang harus dialokasikan dalam tata letak untuk gambar:
<img src="flower.jpg" width="640" height="480" alt="A picture of a siberian iris.">
Tanpa atribut ini, atau ukuran CSS yang setara, browser tidak tahu berapa banyak ruang yang akan dibutuhkan gambar sampai gambar tersebut dimuat. Hal ini akan menyebabkan pergeseran tata letak dalam dokumen, yang dapat membuat pengguna frustrasi ketika konten berpindah setelah mereka mulai menggunakannya. Hal ini dapat mengakibatkan pengguna kehilangan posisi mereka saat membaca, atau "melewatkan" target sasaran yang diinginkan dan akhirnya mengklik hal lain yang tidak mereka inginkan selama pemuatan halaman.
Alternatif untuk memberikan lebar dan tinggi secara eksplisit adalah dengan menggunakan properti aspect-ratio CSS pada gambar. Hal ini memiliki efek serupa pada ukuran elemen dengan atribut width dan height dalam arti bahwa penampung akan mempertahankan rasio aspek yang konsisten. Namun, perbedaannya adalah hal ini dapat menyebabkan penggunaan rasio aspek yang berbeda dengan yang diberikan gambar, sehingga sebaiknya gunakan setelan object-fit untuk memastikan gambar tidak terdistorsi dalam tampilan 16/9 eksplisit ini:
img {
aspect-ratio: 16 / 9;
width: 100%;
object-fit: cover;
}
Verifikasi
Setelah mengubah ukuran semua gambar, jalankan kembali Lighthouse untuk memverifikasi bahwa Anda belum melakukannya melewatkan apa pun.