Descripción
El atributo imagesizes del elemento link es un atributo que permite indicar los tamaños de una imagen vinculada, ayudando al navegador web a reservar espacio para la imagen antes de que se cargue completamente. Esto mejora el rendimiento y evita el desplazamiento del contenido durante la carga de la página.
Sintaxis
<link imagesizes="tamaños">
Elemento Padre
Ejemplo
A continuación se muestra un ejemplo de cómo usar el atributo imagesizes en un elemento link para especificar los tamaños de las imágenes vinculadas:
<link rel="preload"
href="/imagen-responsive.jpg"
as="image"
imagesizes="(max-width: 600px) 480px, 800px"
imagesrcset="/imagen-small.jpg 480w,
/imagen-large.jpg 800w">
En este ejemplo, el navegador cargará la imagen más adecuada según el ancho de la ventana del dispositivo, reservando el espacio necesario antes de que la imagen se cargue completamente, lo que mejora la experiencia del usuario al evitar saltos en el contenido durante la carga.
Artículos
Vídeos HTML
Disfruta también de nuestros artículos sobre HTML en formato vídeo. Aprovecha y suscribete a nuestro canal.