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?