Kita semua pernah mengalaminya: Anda lupa memperkecil gambar sebelum menambahkannya ke halaman. Gambar terlihat baik, tetapi membuang-buang data pengguna dan merusak performa halaman.
Mengidentifikasi gambar yang ukurannya salah
Lighthouse memudahkan identifikasi gambar yang ukurannya salah. Jalankan Audit Performa (Lighthouse > Options > Performance) dan cari hasil audit Ukur dimensi gambar dengan benar. Audit mencantumkan semua gambar yang perlu diubah ukurannya.
Menentukan ukuran gambar yang benar
Pengaturan ukuran gambar bisa sangat rumit. Oleh karena itu, kami telah menyediakan dua pendekatan: "baik" dan "lebih baik". Keduanya akan meningkatkan performa, tetapi pendekatan yang "lebih baik" mungkin memerlukan waktu lebih lama untuk dipahami dan diterapkan. Namun, hal ini juga akan memberi Anda peningkatan performa yang lebih besar. Pilihan terbaik untuk Anda adalah pilihan yang dapat Anda terapkan dengan nyaman.
Catatan singkat tentang unit CSS
Ada dua jenis unit CSS untuk menentukan ukuran elemen HTML, termasuk gambar:
- Satuan mutlak: Elemen yang diberi gaya menggunakan satuan mutlak akan selalu ditampilkan dalam ukuran yang sama, terlepas dari perangkat. Contoh unit CSS absolut yang valid: px, cm, mm, in.
- Unit relatif: Elemen yang diberi gaya menggunakan unit relatif akan ditampilkan dalam berbagai ukuran, bergantung pada panjang relatif yang ditentukan. Contoh unit CSS relatif yang valid: %, vw (1vw = 1% dari lebar area pandang), 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.
Anda mungkin merasa perlu memeriksa data analisis (misalnya, Google Analytics) untuk melihat ukuran layar yang umum digunakan oleh pengguna Anda. Atau, screensiz.es memberikan informasi tentang layar banyak perangkat umum. - Unit absolut: Mengubah ukuran gambar agar sesuai dengan ukuran yang ditampilkan.
Panel Elemen DevTools dapat digunakan untuk menentukan ukuran gambar yang ditampilkan.
Pendekatan "Lebih Baik"
Untuk gambar dengan ukuran absolut dan relatif, gunakan atribut srcset dan sizes untuk menayangkan 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 yang berbeda. Dengan asumsi semua hal lainnya tetap sama, layar dengan kepadatan piksel tinggi akan terlihat lebih tajam daripada layar dengan kepadatan piksel rendah.
Oleh karena itu, beberapa versi gambar diperlukan jika Anda ingin pengguna mendapatkan gambar yang paling tajam, terlepas dari kepadatan piksel perangkat mereka.
Teknik gambar responsif memungkinkan hal ini dengan mengizinkan Anda mencantumkan beberapa versi gambar dan perangkat memilih gambar yang paling sesuai untuknya.
Gambar yang berfungsi di semua perangkat akan terlalu besar untuk perangkat yang lebih kecil. Teknik gambar responsif, khususnya srcset dan sizes, memungkinkan Anda menentukan beberapa versi gambar dan perangkat memilih ukuran yang paling sesuai untuknya.
Mengubah ukuran gambar
Terlepas dari pendekatan yang Anda pilih, Anda mungkin merasa terbantu dengan menggunakan ImageMagick untuk mengubah ukuran gambar. ImageMagick adalah alat command line paling populer untuk membuat dan mengedit gambar. Sebagian besar 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
Menskalakan gambar agar sesuai dalam "lebar 200 px x tinggi 100 px":
# 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 mungkin merasa lebih mudah menggunakan skrip atau layanan untuk mengotomatiskan prosesnya. Anda dapat mempelajari lebih lanjut hal ini dalam panduan Gambar Responsif.
Menghindari pergeseran tata letak dengan menentukan dimensi
Meskipun panduan ini membahas dimensi gambar dalam konteks mengurangi jumlah byte yang tidak perlu yang didownload, penting untuk diperhatikan bahwa mencadangkan ruang yang tepat untuk gambar dalam tata letak adalah komponen penting lainnya untuk meminimalkan metrik Pergeseran Tata Letak Kumulatif halaman. Saat menayangkan gambar di HTML, pastikan untuk menggunakan atribut width dan height yang tepat agar browser mengetahui berapa banyak 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 seberapa banyak ruang yang akan ditempati gambar hingga dimuat. Hal ini akan menyebabkan pergeseran tata letak dalam dokumen, yang dapat membuat pengguna kesal saat konten bergerak setelah mereka mulai menggunakannya. Hal ini dapat menyebabkan pengguna kehilangan posisi saat membaca, atau "melewatkan" target klik yang diinginkan dan akhirnya mengklik sesuatu yang tidak diinginkan saat pemuatan halaman.
Alternatif untuk memberikan lebar dan tinggi secara eksplisit adalah dengan menggunakan properti CSS aspect-ratio pada gambar. Hal ini memiliki efek serupa pada ukuran elemen yang dilakukan oleh atribut width dan height dalam arti bahwa penampung akan mempertahankan rasio aspek yang konsisten. Namun, perbedaannya adalah bahwa hal ini dapat menyebabkan rasio aspek yang digunakan berbeda dengan rasio aspek gambar yang diberikan, jadi sebaiknya Anda menggunakan setelan object-fit untuk memastikan gambar tidak terdistorsi dalam tampilan 16/9 yang 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.