1

Estaba haciendo uso de la página de PageSpeed Insights para ver la velocidad de mi sitio y uno de los que me sale como para solucionar es el de "Los elementos de imagen no tienen width y height explícitos".

Entiendo que hay que especificar el width y el height en cada imagen, el problema es que al hacerlo (p. ej. width="500" y height="83") si se manipula la página la imagen se distorsiona. Debe ser por la relación de aspecto ya que el sitio es responsive.

También agregue el height=auto !important a img, el width:100% ya estaba de antes en mi página CSS, quedando así:

img{width:100%;height=auto !important}

y se ha solucionado en parte. Es que esto funciona en Google Chrome y Opera, pero lo probé en Firefox y Edge y me sale la línea de height=auto como advertencia y entonces la imagen se distorsiona.

¿Hay alguna solución para esto y que se vea bien en todos los navegadores?, o bien, ¿otro alternativa para que las imagenes no se distorsionen?

2 respuestas 2

1

Amigo yo tenia el mismo problema y lo maneje de la siguiente manera:

<div class="col-lg-4 col-6">
     <div class="container">
          <img loading="lazy" src="assets/img/3D-icons/10.webp" alt="" class="img-fluid" data-aos="fade-up" data-aos-duration="2000" width="100%" height="100%">   
     </div>
</div>

Le pones 100% al width y al height, y controlas el tamaño con el contenedor de la imagen, en este caso yo uso el sistemas de filas y columnas de BootStrap 5: https://getbootstrap.com/docs/5.1/layout/columns/

Aquí te dejo la evidencia de que a mi me sirvió:

introducir la descripción de la imagen aquí

A mi no me aparece esa oportunidad ya.

0

Te recomiendo colocar a los dos (tanto alto como ancho) el 100%, recuerda que esto te indica que es el porcentaje de la imagen, por otro lado olvidate de utilizar !important, si lo estas utilizando es porque tienes en tu codigo css codigo repetido que esta afectando a esa imagen o a todas en general, te recomiendo que revises la especificidad en tu css.

3
  • Mas que una solución parece un comentario amigo, te recomiendo que leas como responder en: es.stackoverflow.com/help/how-to-answer , para no llevarte votos negativos
    – Mateo Guio
    Commented el 2 feb. 2022 a las 15:00
  • Lo siento pero mi respuesta no es un comentario, es una solucion, dice especificamente que debe colocar los porcentajes en 100%, debe mejorar su forma de evaluar... Commented el 2 feb. 2022 a las 15:15
  • 1
    La sección de respuestas es para dar soluciones, no recomendaciones Bro. Si vas a recomendar algo hazlo en los comentarios, detalla la estructura de mi respuesta, yo explico mi solución y muestro evidencia del resultado de este.
    – Mateo Guio
    Commented el 2 feb. 2022 a las 15:20

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.