Cuando implementamos nuestro sitio web debemos tener en cuenta los distintos tamaños de pantalla. Cuando agregamos una imagen para la vista desktop esta sera grande para la vista mobile y aunque adaptemos su tamaño con CSS resulta en una carga innecesaria para la vista que solo necesita una imagen más pequeña.
La etiqueta picture permite escoger entre diferentes opciones de imagenes de acuerdo al tamaño de la pantalla. Dichas opciones seran determinadas mediante el uso de la etiqueta source de la siguiente forma:
<picture><sourcemedia="(min-width:650px)"srcset="img_pink_flowers.jpg"><sourcemedia="(min-width:465px)"srcset="img_white_flower.jpg"><imgsrc="img_orange_flowers.jpg"alt="Flowers"style="width:auto;"></picture>El navegador buscará el primer elemento <source> donde la consulta de media coincida con el ancho de la ventana gráfica actual y luego mostrará la imagen adecuada (especificada en el atributo srcset). El elemento <img> es necesario como último hijo del <picture>elemento, como opción alternativa si ninguna de las etiquetas de origen coincide.
De esta forma ahorramos ancho de banda y se mejora el tiempo de carga de la página.
