Muy lejos ha quedado el uso inicial de img. Todo diseño web viene influenciado por cómo quedarán las imagenes en en layout. Al principio de las páginas web no habían tanta implicación de los tamaños de las imagenes en el diseño, y se incrustaban con el tamaño con el que estaban realizadas. Posteriormente se fue redefiniendo los tamaños de las imagenes con su ancho y alto para que acoplasen en un diseño. Posteriormente al aparecer los dispositivos como móviles y tablets se fue haciendo más complicado que una imagen quedase bien en todos los dispositiovos de ahí a que todos los diseños fueran responsive. Y qué decir actualmente acoplar diseños web definido su estilo como "mobile first" y que sean responsive hasta para televisores 4K.
Las primeras modificaciones que haciamos en img se hacían directamente dentro de la etiqueta, tan solo con añadir width y height esra suficiente.
Ejemplo
See the Pen image1 by Bernardo Martin (@bermartinv) on CodePen.
Después se empezó a ser más purista y se definía width y height dentro del CSS.
Ejemplo
See the Pen imagen2 by Bernardo Martin (@bermartinv) on CodePen.
Apareció también la etiqueta figure en la que podemos incrustar una imagen como la etiqueta img, pero además podemos añadir una descripción de la imagen con la etiqueta figcaption.
Ejemplo
See the Pen imagen 3 by Bernardo Martin (@bermartinv) on CodePen.
Apareció la etiqueta picture. Sirve como contenedor de imagenes las cuales sólo una de ellas será elegida por el navegador para ser utilizada. Se indicarán varias etiquetas source y una sola etiqueta img, esta última representará la imagen que cogerá el navegador que no soporte la etiqueta picture.
Para indicar la dirección url de las etiquetas source utilizaremos el atributo srcset a diferencia de src que lo hacemos en img.
También podemos indicar con el atributo media que imagen será usada por el navegador según el tamaño del dispositivo. Además podemos usar el atributo landscape para indicar la orientación del dispositivo, sus posibles opciones son lanscape o portrait.
Valores
<picture>
<source srcset="http://placeimg.com/200/300/people" media="(max-width: 400px) and (orientation: landscape)">
<source srcset="http://placeimg.com/200/300/animals" media="(max-width: 400px) and (orientation: portrait)">
<source srcset="http://placeimg.com/500/300/people" media="(max-width: 799px) and
(min-width:401px) and (min-width:401px) and (orientation: portrait)">
<source srcset="http://placeimg.com/800/500/people" media="(max-width: 999px) and
(min-width:800px) and (min-width:601px) and (orientation: landscape)">
<source srcset="http://placeimg.com/1000/700/people" media="(min-width: 1000px) and
(orientation: landscape)">
<img src="http://placeimg.com/1000/480/arch" alt="My default rwerimage">
</picture>
Con srcset indicamos la imagen que usará el navegador y además indicamos algunos requisitos que debe tener nuestro dispositivo, este atributo se puede usar tanto con la etiqueta img como con picture. Estos requisitos pueden ser: densidad de pixeles, tamaño, por formato de archivo, por orientación de la pantalla
Por el tamaño del dispositivo, podemos seleccionar una imagen determinado por el tamaño del dispositivo
<source media="(min-width: 1280px)" sizes="50vw"
srcset="imagen200.jpg 200w,
imagen400.jpg 400w,
imagen800.jpg 800w,
imagen1200.jpg 1200w,
imagen1600.jpg 1600w,
imagen.jpg 2000w" >
Por la densidad de pixeles del viewport, por ejemplo si tenemos un dispositivo con pantalla de retina indicaremos en el archivo x2
<img src="imagen_dispositivo_movil.jpg" srcset="imagen_dispositivo_movil_HD.jpg 2x"/>
Por el formato del archivo, podemos hacer que los navegadores que son capaces de usar imagenes en formato webp usan una imagen y los navegadores que no, usen otra imagen.
<picture>
<source type="image/webp" srcset="flor.webp">
<img src="flor.jpg" alt="Flor primavera" >
</picture>
Ya lo hemos usado anteriormente, pero podemos indicar la orientación del viewport.
<picture>
<source srcset="http://placeimg.com/200/300/people" media="(orientation: landscape)">
<source srcset="http://placeimg.com/200/300/animals" media="(orientation: portrait)">
</picture>
Puede encontrar más información en forma de slide
