En el video incrustado a continuación, Jen Simmons explica cómo mejorar la carga de imágenes mediante el uso de atributos de ancho y alto. El problema es que hay muchos bloqueos cuando una imagen se carga por primera vez porque un img
naturalmente tendrá una altura de 0
antes de que el navegador haya descargado correctamente el recurso de imagen. Luego, debe volver a pintar la página después de eso, lo que empuja todo el contenido. Definitivamente he visto este problema mucho en sitios web de noticias importantes.
De todos modos, Jen recomienda que agreguemos height
y width
atributos a las imágenes así:
<img src="https://css-tricks.com/do-this-to-improve-image-loading-on-your-website/dog.png" height="400" width="1000" alt="A cool dog" />
Esto se debe a que Firefox y Chrome ahora tendrán en cuenta esos valores y eliminarán todos los bloqueos 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 un montón de proyectos en los que coloqué imágenes en la parte inferior de la página simplemente porque quería evitar este tipo de bloqueos. Creo que esto soluciona ese problema bastante bien.