El elemento picture
Selección de imagen basada en dirección artística
Para los casos de uso vistos en temas anteriores utilizamos el elemento <img> con los atributos srcset y sizes. HTML5 también incorpora el nuevo elemento <picture> para cometidos especialmente indicados en selección de imagen basada en dirección artística y en formato de imagen.
El primer problema se plantea cuando tenemos una imagen de gran tamaño y que al ser reducida para dispositivos de pequeño tamaño se pieden detalles que nos interesa resaltar. Supongamos que tenemos una imagen de un monumento histórico con unas dimensiones de 640×480 píxeles.
Ejemplo: Elemento PICTURE
El objetivo es ofrecer la imagen completa para dispositivos mayores de 700px de ancho. Entre 500 y 700px ofreceremos un recorte de la imagen centrado en el monumento. Para dispositivos más pequeños de 500px recortaremos aún más enfocando sólo el monumento. Esto es lo que la especificación llama selección de imagen basada en dirección artística, un uso adecuado para el nuevo elemento <picture>. Independientemente de si el navegador soporta este nuevo elemento, aportamos una consulta de medios para adaptar el tamaño de la imagen al ancho del viewport con este CSS:
/* Ejemplo con PICTURE ------------------------------------------- */
#ejemplo-picture {
text-align: center;
}
/* Aportamos medidas para adaptar la imagen en navegadores que no
soporten PICTURE y también para los que la soporten conocer el
tamaño a pintar antes de descargar la imagen. Por defecto para
todos los dispositivos elegimos el tamaño más pequeño con objeto
de que pueda verse completa en los dispositivos más pequeños. */
#ejemplo-picture img {
width: 240px;
height: 180px;
}
@media screen and (min-width: 500px) {
#ejemplo-picture img {
width: 440px;
height: 330px;
}
}
@media screen and (min-width: 700px) {
#ejemplo-picture img {
width: 640px;
height: 480px;
}
}Los tamaños posibles son 240×180, 440×330 y el original de 640×480 píxeles. Esta original es la imagen que se suministra en el atributo src para los navegadores que no soporten el nuevo elemento. El HTML es el siguiente:
<div id="ejemplo-picture">
<picture>
<source media="(min-width: 700px)"
srcset="ejemplos/sacre-coeur-640x480.jpg" />
<source media="(min-width: 500px)"
srcset="ejemplos/sacre-coeur-440x330.jpg" />
<source srcset="ejemplos/sacre-coeur-240x180.jpg" />
<img src="ejemplos/sacre-coeur-640x480.jpg"
width="240" height="180"
alt="Basilique Sacre Coeur" />
</picture>
</div>Los navegadores que no soporten <picture> y <source> se quedarán con el elemento <img>. Le ponemos un src con la imagen más grande aunque configuramos el tamaño más pequeño. Así nos aseguramos que se verá entera en todos los dispositivos. El navegador IE11 no soporta el nuevo elemento aunque sí soporta las consultas de medios. Si en este navegador redimensionamos el ancho de la ventana veremos que se producen los tres tramos limitados por los saltos 500px y 700px. Pero siempre usará el archivo del src que es de 640×480. Navegadores que no soporten consultas de medios como IE8 usarán también este archivo pero pintará la imagen en 240×180 especificados en los atributos width y height (y también replicado en el CSS). Con esto nos aseguramos que se verá una imagen completa en cualquier dispositivo.
Los tres ejemplares tienen distintos tamaños pero conservan la proporción, lo que no es estrictamente necesario para el uso de la selección artística. Pero para hacerlo compatible con los navegadores que soportan consultas de medios pero no el nuevo elemento, es necesario que conserven la proporción.
Si por ejemplo el ejemplar de 240×180 fuera de 240×300 como aparece en la imagen anterior, tendríamos una porción más significativa en altura del monumento. Pero en IE11 aparecería con proporciones erróneas dado que estaría usando como origen la imagen de 640×480.
Por último y como vimos en un tema anterior hemos de considerar como las herramientas de optimización para móviles tratan este nuevo elemento <picture>. La utilidad PageSpeed Insights presenta un mensaje de optimización:
Se trata de la imagen sacre-coeur-640x480.jpg del src donde se establecen unas medidas inferiores de width="240" height="180". Por lo tanto no está teniendo en cuenta las características del nuevo elemento picture. Aunque para la versión de ordenador no presenta este mensaje obteniéndose una puntuación de 100.
Nuevo formato de imagen WEBP
Los formatos de imagen para la web más usados son PNG, JPG (JPEG) y GIF cuando se requiere animación. Antes de usarlos en la web necesitamos optimizar su tamaño tal como explico en la herramienta Optimizador de imágenes. Un nuevo formato que ha sacado Google es Webp. Lo define como un formato con las capacidades de compresión lossless y lossy. El primero es una compresión sin alterar ningún píxel de la imagen. El segundo si puede eliminar píxeles pero basándose en que el resultado aún es visualmente satisfactorio. Soporta transparencias y asegura mejores ratios de compresión (más del 25%) que los que usan los otros formatos.
El formato WEBP es creado específicamente para imágenes en la web y, supuestamente, podría llegar a ser ampliamente utilizado. Por ahora lo soporta Chrome y Opera, pero no Firefox ni IE. Podemos descargar los programas en la página de descargas Webp. Para Windows 8 descargamos los precompilados ejecutables libwebp-0.4.3-windows-x64.zip. Entre otros tiene un programa para decodificar y otro cwebp.exe para codificar desde varios formatos a WEBP.
Para usar el codificador sin compresión lossless o lossy ejecutaremos algo como cwebp input.png -q 80 -o output.webp, donde input.png es el archivo de origen PNG y el de salida es output.webp. El parámetro -q 80 indica que se usará un factor de calidad de un 80%. Se consigue mayor compresión con el parámetro -lossless, en cuyo caso el otro parámetro -q 80 controlará el tiempo que usará el programa para comprimir la salida al tamaño más pequeño posible.
Hice una prueba de conversión Lossless desde un PNG a este nuevo formato WEBP. Usé la imagen PNG fractal-200x200.png. Primero optimicé su tamaño hasta los 27140 bytes, para lo cual usé primero un editor de imágenes para quitarle las transparencias y luego la herramienta Optimizadora de Imágenes con el ejecutable PNGOUT. Luego la convertí a WEBP con el siguiente resultado:
C:\aimg\webp\bin>cwebp fractal-200x200.png -q 100 -lossless -o fractal-200x200.webp
Saving file 'fractal-200x200.webp'
File: fractal-200x200.png
Dimension: 200 x 200
Output: 25762 bytes
Lossless-ARGB compressed size: 25762 bytes
* Lossless features used: PALETTE
* Precision Bits: histogram=5 transform=5 cache=0
* Palette size: 123
Vemos que el archivo tiene un tamaño algo menor de 25762 bytes. Aunque la reducción es sólo de un 5%, hay que tener en cuenta que apliqué la conversión desde un PNG optimizado. Si hubiese usado la versión del PNG sin optimizar que era de 42828 bytes también obtendría un archivo del mismo tamaño, con lo que la reducción sería entonces de 39,8%. Digamos que WEBP con Lossless usa procesos similares de optimización que ya venían usando otros programas como PNGOUT, buscando siempre el menor tamaño posible de archivo.
En resumen, un nuevo formato de imagen que habrá que seguir con atención porque tiene pinta de convertirse en un estándar para la web.
Selección de imagen basada en el formato de archivo
El apartado anterior venía a cuento de aplicar una selección de imagen basada en el formato de archivo. Y ahora que el formato webp no es usado por todos los navegadores, es la situación indicada para llevar a cabo un ejemplo con este caso de uso para el elemento <picture>.
En este ejemplo tenemos una imagen WEBP para los navegadores que lo soporten y PNG para el resto:
Ejemplo: Elemento PICTURE para formatos de imagen
El código es el siguiente:
<picture>
<source srcset="ejemplos/fractal-200x200.webp"
type="image/webp" />
<img src="ejemplos/fractal-200x200.png"
width="200" height="200"
alt="Fractal Mandelbrot z^2+c" />
</picture>
En el elemento <source> ponemos el nuevo formato WEBP. Luego en el <img> ubicamos el PNG. El navegador que no soporte el tipo image/webp o bien que no soporte estos nuevos elementos, usará el PNG.
Imagen no disponibleEn estas capturas de pantalla puede ver algunos resultados. En Chrome 41 se observa el soporte WEBP pues descargó ese archivo. En Firefox 36 e Internet Explorer 11 usó el PNG.