jueves, 4 de septiembre de 2014

Etiquetas HTML5: picture

Etiquetas HTML5: picture

Esta etiqueta es una novedad aún no implementada de HTML 5 cuya principal ventaja será la optimización de la carga de imágenes en dispositivos portátiles. Además favorecerá la correcta visualización de estas.

Cuando tenemos una imagen con un ancho de unos 600px por ejemplo, en los monitores actuales de escritorio o en un portátil se verá sin problemas. Pero si dicha web está maquetada en responsive, la misma imagen en un dispositivo móvil perderá información al ser redimensionada. Y puede que el resultado no sea el que esperábamos.

Con la etiqueta picture lo que conseguiremos es mostrar la misma imagen pero optimizada dependiendo de la resolución del dispositivo.

La sintaxis es la siguiente:

<picture>


<picture>
    <source media="(min-width: 800px)" src="high-res.jpg">
    <source media="(min-width: 480px)" src="med-res.jpg">
    <source src="low-res.jpg">
    <img src="fallback.jpg" alt="Esta imagen se cargará en navegadores antiguos (IE7/8).">
</picture>

Al igual que con un proyecto responsive, podemos crear unos condicionales dependiendo de la resolución.

Así la primera fila cargaría una imagen grande previamente creada a partir de una resolución de 800px.

La segunda cargaría una imagen mediana a partir de 480px.

La tercera cargaría una imagen pequeña.

Y por último dejamos una imagen por defecto para navegadores antiguos que no entiendan la etiqueta picture.

Es una etiqueta bastante interesante con múltiples opciones que en un futuro cuando esté implementada será un pilar importantísimo a la hora de optimizar la carga en páginas web. Todas las opciones que hemos visto en el ejemplo anterior son configurables en cuanto a medidas o resoluciones.

En esta web explican el concepto de la etiqueta <picture> con todo detalle.

0 comentarios:

Publicar un comentario