Kita semua pernah melakukannya: Anda lupa untuk memperkecil skala gambar sebelum menambahkannya ke halaman. Gambar terlihat baik-baik saja, tetapi gambar tersebut menyia-nyiakan data pengguna dan menurunkan performa halaman.
Mengidentifikasi gambar dengan ukuran yang salah
Lighthouse memudahkan Anda mengidentifikasi gambar yang ukurannya salah. Jalankan Audit Performa (Lighthouse > Options > Performance) dan cari hasil audit Gambar ukuran yang benar. Audit mencantumkan gambar yang perlu diubah ukurannya.
Menentukan ukuran gambar yang benar
Ukuran gambar bisa sedikit menipu. Untuk alasan ini, kami menyediakan dua pendekatan: yang "baik" dan "yang lebih baik". Keduanya akan meningkatkan performa, tetapi pendekatan yang "lebih baik" mungkin memerlukan waktu sedikit lebih lama untuk dipahami dan diterapkan. Namun, Anda juga akan mendapatkan peningkatan performa yang lebih besar. Pilihan terbaik bagi Anda adalah yang menurut Anda mudah diterapkan.
Catatan singkat tentang unit CSS
Ada dua jenis unit CSS untuk menentukan ukuran elemen HTML, termasuk gambar:
- Unit absolut: Elemen yang diberi gaya menggunakan unit absolut akan selalu ditampilkan dengan ukuran yang sama, apa pun perangkatnya. Contoh unit CSS absolut yang valid: px, cm, mm, in.
- Unit relatif: Elemen yang diberi gaya menggunakan unit relatif akan ditampilkan dengan berbagai ukuran, bergantung pada panjang relatif yang ditentukan. Contoh unit CSS relatif yang valid: %, vw (1vw = 1% dari lebar area tampilan), em (1,5 em = 1,5 kali ukuran font).
Pendekatan "Baik"
Untuk gambar dengan ukuran berdasarkan...
- Unit relatif: Mengubah ukuran gambar ke ukuran yang akan berfungsi di semua perangkat.
Periksa data analisis Anda (misalnya, Google Analytics) untuk melihat ukuran tampilan yang biasa digunakan oleh pengguna mungkin dapat membantu. Atau, screensiz.es menyediakan informasi tentang tampilan banyak perangkat umum. - Unit absolut: Ubah ukuran gambar agar sesuai dengan ukurannya.
Panel Elemen DevTools dapat digunakan untuk menentukan ukuran gambar yang akan ditampilkan.
Pendekatan "Lebih baik"
Untuk gambar dengan ukuran absolut dan relatif, gunakan atribut srcset
dan sizes
untuk menampilkan gambar yang berbeda pada kepadatan tampilan yang berbeda.
Baca panduan tentang gambar responsif.
"Kepadatan tampilan" mengacu pada fakta bahwa tampilan yang berbeda memiliki kepadatan piksel yang berbeda pula. Jika semua hal lain dianggap sama, tampilan dengan kepadatan piksel tinggi akan terlihat lebih tajam daripada tampilan kepadatan piksel rendah.
Akibatnya, beberapa versi gambar diperlukan jika Anda ingin pengguna menerima gambar dengan hasil sejelas mungkin, terlepas dari kepadatan piksel perangkat mereka.
Teknik gambar responsif memungkinkan hal ini dengan memungkinkan Anda menampilkan beberapa versi gambar dan membuat perangkat memilih gambar yang paling cocok untuknya.
Gambar yang berfungsi di semua perangkat akan berukuran besar untuk perangkat yang lebih kecil. Teknik gambar responsif, khususnya srcset dan sizes, memungkinkan Anda menentukan beberapa versi gambar dan membantu perangkat memilih ukuran yang paling sesuai untuknya.
Mengubah ukuran gambar
Terlepas dari pendekatan yang dipilih, sebaiknya gunakan ImageMagick untuk mengubah ukuran gambar. ImageMagick adalah alat command line yang paling populer untuk membuat dan mengedit gambar. Kebanyakan orang dapat mengubah ukuran gambar jauh lebih cepat saat menggunakan CLI daripada editor gambar berbasis GUI.
Mengubah ukuran gambar menjadi 25% dari ukuran aslinya:
convert flower.jpg -resize 25% flower_small.jpg
Skalakan gambar agar sesuai dengan "lebar 200 piksel kali tinggi 100 piksel":
# macOS/Linux
convert flower.jpg -resize 200x100 flower_small.jpg
# Windows
magick convert flower.jpg -resize 200x100 flower_small.jpg
Jika akan mengubah ukuran banyak gambar, akan lebih praktis jika Anda menggunakan skrip atau layanan untuk mengotomatiskan prosesnya. Anda dapat mempelajari hal ini lebih lanjut di panduan Gambar Responsif.
Menghindari pergeseran tata letak dengan menentukan dimensi
Meskipun panduan ini membahas dimensi gambar dalam konteks pengurangan jumlah byte yang tidak perlu didownload, penting untuk diperhatikan bahwa memesan ruang yang benar untuk gambar dalam tata letak merupakan komponen penting lainnya dalam meminimalkan metrik Pergeseran Tata Letak Kumulatif halaman. Saat menyajikan gambar dalam HTML, pastikan untuk menggunakan atribut width dan height yang tepat sehingga browser mengetahui berapa banyak ruang yang akan 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 digunakan gambar hingga gambar dimuat. Hal ini akan menyebabkan pergeseran tata letak dalam dokumen, yang dapat membuat pengguna frustrasi ketika konten bergerak setelah mereka mulai memakainya. Hal ini dapat mengakibatkan pengguna kehilangan posisi mereka saat membaca, atau "melewatkan" target klik yang diinginkan dan akhirnya mengklik sesuatu 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 yang serupa pada ukuran elemen yang dilakukan atribut width dan height dalam hal penampung akan mempertahankan rasio aspek yang konsisten. Namun, perbedaannya adalah bahwa hal ini dapat mengakibatkan rasio aspek yang digunakan berbeda dengan gambar yang diberikan. Jadi, 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 tidak melewatkan apa pun.