Si una imagen renderizada tiene una relación de aspecto diferente de la del archivo de origen (la relación de aspecto natural), la imagen renderizada puede verse distorsionada, lo que puede crear una experiencia del usuario desagradable.
Cómo falla la auditoría de relación de aspecto de la imagen de Lighthouse
Lighthouse marca cualquier imagen con una dimensión renderizada de más de unos pocos píxeles de diferencia con respecto a la dimensión esperada cuando se renderiza en su proporción natural:
Existen dos causas comunes por las que la relación de aspecto de la imagen no es correcta:
- Se configura una imagen con valores explícitos de ancho y alto que difieren de las dimensiones de la imagen de origen.
- Una imagen se establece en un porcentaje de ancho y alto de un contenedor de tamaño variable.
Asegúrate de que las imágenes se muestren con la relación de aspecto correcta
Usa una CDN de imágenes
Una CDN de imágenes puede facilitar la automatización del proceso de creación de versiones de diferentes tamaños de tus imágenes. Consulta Usa CDN de imágenes para optimizar imágenes a fin de obtener una descripción general y Cómo instalar la CDN de imágenes de Thumbor para realizar un codelab práctico.
Verifica la CSS que afecta la relación de aspecto de la imagen
Si tienes problemas para encontrar la CSS que causa la relación de aspecto incorrecta, las herramientas para desarrolladores de Chrome pueden mostrarte las declaraciones de CSS que afectan una imagen determinada. Para obtener más información, consulta la página Cómo ver solo el CSS que se aplicó realmente a un elemento de Google.
Verifica los atributos width y height de la imagen en el archivo HTML
Cuando sea posible, se recomienda especificar los atributos width y height de cada imagen en tu código HTML, de modo que el navegador pueda asignar espacio para ellas.
Este enfoque ayuda a garantizar que el contenido debajo de la imagen no cambie una vez que esta se cargue.
Sin embargo, especificar las dimensiones de la imagen en HTML puede ser difícil si trabajas con imágenes responsivas, ya que no hay forma de saber el ancho y la altura hasta que conozcas las dimensiones del viewport. Considera usar la biblioteca de relación de aspecto de CSS o los cuadros de relación de aspecto para ayudar a preservar las relaciones de aspecto de las imágenes responsivas.
Por último, consulta la publicación Cómo publicar imágenes con las dimensiones correctas para obtener información sobre cómo publicar imágenes del tamaño adecuado para el dispositivo de cada usuario.