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.

 






SUSCRÍBETE A NUESTRO BOLETÍN 

No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






Tal vez te puede interesar:

  1. La innovación no puede mantener la Web rápida
  2. Rendimiento web ultrarrápido
  3. Tabla de contenidos fijos con estados activos de desplazamiento
  4. “cambiar tamaño: ninguno;” en áreas de texto es una mala experiencia de usuario

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

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 muc

programar

es

https://pseint.es/static/images/programar-haga-esto-para-mejorar-la-carga-de-imagenes-en-su-sitio-web-1252-0.jpg

2024-06-13

 

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

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences