Jika gambar yang dirender memiliki rasio aspek yang sangat berbeda dengan rasio aspek dalam file sumbernya (rasio aspek alami), gambar yang dirender mungkin terlihat terdistorsi, dan mungkin menciptakan pengalaman pengguna yang tidak menyenangkan.
Kegagalan audit rasio aspek gambar Lighthouse
Lighthouse menandai gambar apa pun dengan dimensi yang dirender memiliki perbedaan lebih dari beberapa piksel dengan dimensi yang diharapkan saat dirender pada rasio naturalnya:
Ada dua penyebab umum terkait rasio tinggi lebar gambar yang salah:
- Gambar ditetapkan dengan nilai lebar dan tinggi eksplisit yang berbeda dari dimensi gambar sumber.
- Gambar disetel ke lebar dan tinggi sebagai persentase container yang ukurannya bervariasi.
Memastikan gambar ditampilkan dengan rasio aspek yang benar
Menggunakan CDN gambar
CDN gambar dapat mempermudah otomatisasi proses pembuatan versi gambar yang berbeda-beda. Lihat Menggunakan CDN gambar untuk mengoptimalkan gambar untuk mendapatkan ringkasan dan Cara menginstal CDN gambar Thumbor untuk codelab interaktif.
Periksa CSS yang memengaruhi rasio aspek gambar
Jika Anda kesulitan menemukan CSS yang menyebabkan rasio aspek yang salah, Chrome DevTools dapat menunjukkan kepada Anda deklarasi CSS yang memengaruhi gambar tertentu. Lihat halaman Hanya melihat CSS yang benar-benar diterapkan ke elemen Google untuk mengetahui informasi selengkapnya.
Periksa atribut width dan height gambar di HTML
Jika memungkinkan, sebaiknya tentukan atribut width dan height setiap gambar di HTML Anda agar browser dapat mengalokasikan ruang untuk gambar.
Pendekatan ini membantu memastikan bahwa konten di bawah gambar tidak berubah setelah
gambar dimuat.
Namun, menentukan dimensi gambar dalam HTML bisa menjadi sulit jika Anda bekerja dengan gambar responsif karena tidak ada cara untuk mengetahui lebar dan tinggi sebelum Anda mengetahui dimensi area pandang. Pertimbangkan untuk menggunakan library Rasio Aspek CSS atau kotak rasio aspek untuk membantu mempertahankan rasio aspek untuk gambar responsif.
Terakhir, lihat postingan Menayangkan gambar dengan dimensi yang benar untuk mempelajari cara menampilkan gambar dengan ukuran yang tepat untuk setiap perangkat pengguna.