Haga esto para mejorar la carga de imágenes en su sitio web.

En el vídeo incluido a continuación, Jen Simmons explica cómo mejorar la carga de imágenes utilizando atributos de ancho y alto. El problema es que hay muchos bloqueos cuando se carga una imagen por primera vez porque, imgnaturalmente, tendrá una altura de 0antes de que el navegador haya descargado correctamente el recurso de imagen. Luego, es necesario volver a pintar la página, lo que desplaza todo el contenido. Definitivamente he visto este problema mucho en sitios web de noticias importantes.

De todos los modos, Jen recomienda que agreguemos heightatributos widtha las imágenes como este:

img src="dog.png" alt="A cool dog" /

Esto se debe a que Firefox y Chrome ahora tendrán en cuenta esos valores y eliminarán todos los obstáculos antes de que se cargue la imagen, incluso cuando anule esos valores en CSS con un ancho fluido y, por lo tanto, una altura desconocida. Eso significa que el contenido siempre permanecerá en la misma posición, incluso si la imagen aún no se ha cargado. En el pasado, trabajé en varios proyectos en los que coloqué imágenes más abajo en la página simplemente porque quiero evitar este tipo de interferencias. Creo que esto soluciona el problema bastante bien.