En los tiempos actuales uno de los grandes problemas
que se le presentan a los diseñadores web es la multi-resolucion, que la web
que diseñen pueda visualizarse de manera correcta en cualquier dispositivo (Véase
Diseño Responsive)
Para solucionar lo anterior se usa el siguiente código
CSS
img {
max-width: 100%;
height: auto;
}
|
El anterior código nos asegura que la imagen nunca ira
mas allá de su contenedor padre y resolverá
el problema respecto a que nos
deja mostrar la misma imagen en diferentes dispositivos. Pero no nos dejará
especificar diferentes imágenes
para diferentes circunstancias, para solucionar esto HTML5 introdujo el
elemento <picture>
Figura 1
El nuevo elemento <picture> de HTML5 es un
contenedor utilizado para especificar varios elementos <source> y una <img>
especifica contenida en el mismo. Permite describir con todo detalle cómo deben
cargarse las imágenes de tu sitio web, los usuarios se aprovecharán de las
ventajas de cargar solamente las imágenes optimizadas para el dispositivo que
están utilizando y así solucionar el problema de las imágenes responsivas.
El uso más habitual del elemento <picture>
consiste en elegir la mejor imagen exclusivamente en función de criterios
artísticos. En vez de diseñar una única imagen que se escala para ajustarse al
tamaño de la ventana del navegador, se pueden diseñar diferentes imágenes en
función de su tamaño.
Figura 2
Como puedes ver, no se utiliza ni código JavaScript ni
ninguna otra librería externa. El bloque de código CSS se utiliza para aplicar
unos estilos básicos a la imagen y de nuevo puedes ver que no se utilizan hacks
ni media queries.
El elemento <picture> no define ningún atributo
propio, pero puede encerrar a varios elementos <source> como muestra la
Figura 2.
El elemento <source>, que se utiliza para cargar
elementos multimedia como audios y vídeos, se ha actualizado para que también
soporte la carga de imágenes. Para ello, se le han añadido los siguientes
atributos:
Atributo |
Valor |
Descripción
|
srcset
(obligatorio) |
URL |
Indica
la ruta de la imagen a la que se hace referencia |
media |
Permite
indicar cualquier media query que sea válido en el selector @media de CSS |
|
sizes |
Acepta
cualquier valor que describa la anchura de la imagen |
|
type |
Acepta
como valor cualquier tipo MIME estándar |
|
El elemento source no tiene etiqueta de cierre porque
es un elemento vacío, es decir, su campo de acción está limitado al lugar donde
se coloque (no crea un bloque), el navegador no necesita que le digamos hasta
donde limitar el lugar o ámbito de desarrollo de esa etiqueta.
Añadir un elemento <img> dentro del elemento
<picture> es obligatorio. Si no lo haces, el navegador no mostrará
ninguna imagen.
Puede utilizar la consulta de medios min-device-width, en lugar de min-width, que comprueba la anchura del dispositivo, en lugar del tamaño del navegador.
El elemento picture
