Picture Element: vía libre al responsive imag 29.8.12

Picture Element: vía libre al responsive imag

Son varios los artículos dedicados al responsive design, y en todos mencionaba que este concepto es extensible también a las imágenes utilizadas. Pero este era un aspecto no resuelto.
Hoy ya queda menos para ello, pues el consorcio ha incluido el Picture Element en el documento desarrollo de la especificación HTML Responsive Images Extension.
Como esto lo estoy escribiendo con la publicación calentita, es sólo una aproximación a esta novedad.

Este artículo fue escrito al inicio del desarrollo del Picture element por lo que habrá cuestiones no coincidentes con la especificación final.
Por lo tanto, será mejor que consultes la Guía "responsive image" que recoge la versión final adoptada como estándar junto a ejemplos de uso de los distintos elementos y sus atributos.

Picture Element

El elemento Picture

El "Picture element" representa una lista de orígenes de datos de imagen y los atributos asociados que definen cuándo se debe utilizar una imagen u otra. El origen de la imagen y sus datos puede ser declarado explícitamente basado en las media queries de comunicación o se puede sugerir al navegador a través del atributo srcset en el elemento de imagen.

Traducido: que puedes indicar una serie de imágenes distintas (y sus atributos correspondientes) para que el navegador elija y muestre la que corresponda en función de, por ejemplo, el tamaño del dispositivo.

Ejemplo del marcado html para Picture Element


<picture alt="">
 <source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x">
 <source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x">
 <source srcset="small-1.jpg 1x, small-2.jpg 2x"> 
 <img src="small-1.jpg"> 
</picture>

Picture element admite atributos

Los atributos que se pueden utilizar en el tag Picture son:
atributos globales & src & srcset & type & media

atributos globales: Los atributos permitidos a nivel general.
src: La dirección del recurso multimedia. Una URL no vacía, con posibilidad de estar rodeada de espacios en blanco.
type: El tipo de recurso multimedia (utilizado para ayudar a la UA determinar, antes de pedir al servidor este recurso multimedia, si puede reproducirlo). Una cadena que identifica un tipo MIME válido medios de comunicación.
media: el tipo de dispositivo previsto en las media queries (utilizado para ayudar a la UA determinar, antes de descargar este recurso multimedia, si es útil para el usuario).
srcset: Una lista de URL no vacías y separada por comas para indicar qué imagen mostrar en función de la media querie indicada.

Source element

El elemento Source:

"Source" es un elemento secundario (hijo) del elemento "Picture" y amplía el hasta ahora elemento "source" (origen). Cada "Source" define una o más fuentes de datos de imagen y las condiciones en que ésta debe ser utilizada.
Tenga en cuenta que como todas las fuentes proporcionadas por un elemento "Picture" dado debe representar el mismo tema, el recorte (crop) y zoom pueden ser diferentes.

Admite los mismos atributos que el elemento "Picture"

El atributo Srcset

El atributo srcset se basa en la propuesta de imagen-set notación y sigue la misma sintaxis:
srcset = srcset( [ <srcset-decl>, ]* [ <srcset-decl> | <color>] ) <em>srcset-decl</em> = [ <url> | <string> ] <resolution>

Ejemplo de Srcset


srcset="med-1.jpg 1x, med-2.jpg 2x"

La implementación experimental de webkit utiliza la unidad "x" que es idéntica a dppx

Aquí tienes un ejemplo del elemento source utilizando los atributos media y srcset obra de Mathew Marquis.

Casos de uso del elemento Picture

El documento del consorcio menciona dos casos típicos para utilizar el elemento "Picture":
.- La necesidad de fuentes diferentes (distinto archivo) en función del tamaño de la ventana en el responsive design.
.- La necesidad de fuentes diferentes en función de la densidad de píxeles de la pantalla.
Y dentro de estos dos casos, multitud de situaciones en cada uno de ellos como dispositivos móviles, uso de unidades relativas en media queries (em, rem, vw/vh etc), en función de si el usuario hace zoom, pantallas en escalas de grises o de alto cntraste...

Lecturas recomendadas:

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.