Menampilkan gambar dengan rasio aspek yang salah

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.

Lighthouse menandai gambar apa pun dengan dimensi yang dirender memiliki perbedaan lebih dari beberapa piksel dengan dimensi yang diharapkan saat dirender pada rasio naturalnya:

Audit Lighthouse menampilkan gambar yang ditampilkan dengan rasio aspek yang salah

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.

Referensi