Imágenes responsivas y atributos srcset and sizes

by Janeth Kent Date: 01-07-2019 imagenes responsivas image srcset media html5

En la revolución del diseño web, las imágenes son una cosa que aparentemente se ha quedado atrás. Hasta hace relativamente poco, servir diferentes imágenes en función del tamaño de la pantalla o de la densidad de píxeles no era algo que se hacía en absoluto.

El elemento <picture> es muy prometedor para cambiar esto. Pero si se utiliza el elemento de imagen, hay dos atributos que son clave para proporcionar imágenes sensibles: srcset y los sizes que lo acompañan.

El atributo srcset

El atributo srcset nos permite proporcionar un conjunto de imágenes que pueden ser potencialmente servidas por el navegador. Nosotros, como autores, proporcionamos una lista de imágenes separadas por comas y el agente de usuario determina qué imagen mostrar dependiendo de los detalles del dispositivo.

Al listar las imágenes, proporcionamos dos piezas de información sobre cada imagen.

El path (ruta) al archivo de imagen
La pixel density (densidad de píxeles) o width (ancho) de la imagen

Para definir la pixel density (densidad de píxeles), añadimos una x al número de densidad de la imagen. Por ejemplo

<img src="one.png"
     srcset="two.png 2x, three.png 3x, four.png 4x">

La imagen definida con el atributo src se supone que es 1x.

Cuando el atributo srcset se especificó por primera vez en 2012, sólo podíamos proporcionar imágenes de diferentes densidades de píxeles, como se muestra arriba. Sin embargo, la Especificación 2014 introdujo el valor de ancho (width), lo que nos permite asignar el ancho de las diferentes imágenes.

Para asignar el ancho de la imagen, añadimos una w al número de ancho de píxel de la imagen. Por ejemplo

<img src="one.png"
     srcset="two.png 100w, three.png 500w, four.png 1000w">

Sólo cuando se utiliza la versión de ancho del atributo srcset, podemos acompañarlo con el atributo sizes.

El atributo Sizes (de los tamaños)

El atributo sizes nos permite definir explícitamente el tamaño de la imagen en función de un conjunto de Media Conditions.

<img src="one.png"
     srcset="two.png 100w, three.png 500w, four.png 1000w"

     sizes="<media condition> <width>,
            <media condition> <width>,
            <optional default image width>">

Media Conditions

Una media condition no es exactamente una media query. Es parte de una media query. No nos permite especificar los media types, por ejemplo, screen o print, pero acepta la condición que normalmente añadimos a un media type.

Una condición válida de los medios puede ser una de las dos cosas.

Una plain media condition, por ejemplo (min-width: 900px)
Una media condition “not”, por ejemplo ( not (orientation: landscape) )
Una media condition “and”, por ejemplo (orientation: landscape) and (min-width: 900px)
Una media condition “or”, por ejemplo, ( (orientation: portrait) or (max-width: 500px) )

Width

El width (ancho) especificado puede ser casi cualquier valor de longitud, por ejemplo, em, rem, píxeles y viewport  (ancho de vista).

Sin embargo, no se permiten valores porcentuales, "para evitar confusiones sobre lo que sería relativo". El valor vw se recomienda como alternativa si se necesita un valor relativo.

Poniéndo media condition y width todo junto

<img src="one.png"
     srcset="two.png 100w, three.png 500w, four.png 1000w"

     sizes="(min-width: 900px) 1000px,
            (max-width: 900px) and (min-width: 400px) 50em,
            ( not (orientation: portrait) ) 300px,
            ( (orientation: landscape) or (min-width: 1000px) ) 50vw, 
            100vw">

Si la media condition es true (verdadera), el user agent (agente de usuario) elegirá qué imagen servir al tamaño especificado basándose en las diferentes imágenes definidas en el atributo srcset.

Soporte
Los atributos srcset y sizes están relativamente bien soportados.

![Feature support for srcset attribute](http://bitsofco.de/content/images/2016/02/Screen-Shot-2016-02-02-at-08-27-05.png)

Para los navegadores que no soportan los atributos, la imagen se obtiene del atributo regular src y se muestra normalmente en todas las condiciones del medio.

 

 

 

 
by Janeth Kent Date: 01-07-2019 imagenes responsivas image srcset media html5 visitas : 5221  
 
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.

 
 
 

Artículos relacionados

Imágenes generadas por GAN

Juguemos a un juego... ¿Adivinas qué tienen en común estos retratos?   Todas estas son personas inexistentes. Las imágenes fueron creadas por una inteligencia artificial. Podríamos decir que la IA "soñó" con…

Guía sencilla para convertir imágenes a WebP en PHP

El 30 de septiembre de 2010, Google anunció la publicación de un nuevo estándar abierto para la compresión con pérdida de gráficos de 24 bits en la web. La base…

El marketing de la personalidades en las redes sociales

Las huellas que dejamos en la Web y en nuestros dispositivos digitales pueden dar a los anunciantes y a otras personas una visión sorprendente, y a veces perturbadora, de nuestra…

10 bancos de imágenes gratuitos

No es la primera vez que hablamos de lo importantes que son las imágenes en las páginas web, especialmente en el caso de tiendas online. También os hemos proporcionado algunas…

Por un social media marketing exitoso: recursos y herramientas

Sabemos muy bien que para lograr el éxito en la web debemos centrarnos en determinadas actividades: - estudiar cómo actuan los individuos exitosos en el nicho de nuestro interés. - mejorar nuestras habilidades…