ARTÍCULO 50. Nueva etiqueta PICTURE en HTML5.1. (III)


El nuevo tag <picture>. Orientación con Media Query

 

Una variante de lo que estamos viendo es utilizar la orientación del dispositivo como condición para mostrar una imagen u otra. Por ejemplo de esta forma:

<source media="(orientation: portrait)" srcset="graficos/en_rio_mediana_300_portrait.jpg">

Si la orientación es vertical (portrait) se cumplirá la condición y se mostrará la imagen indicada en srcset.

La orientación puede ser horizontal (landscape) si la anchura de la ventana es mayor que la altura, o vertical en otro caso.

Las Media Query permiten especificar condiciones compuestas, es decir varias preguntas en una condición, por ejemplo, podemos preguntar si la ventana tiene orientación vertical y además el ancho es como máximo de 300 px., como vemos en la primera etiqueta source de este ejemplo.

<picture>
<source media="(orientation: portrait) and (max-width: 300px)" srcset="graficos/en_rio_pequenya_200_portrait.jpg">
<source media="(orientation: portrait)" srcset="graficos/en_rio_mediana_300_portrait.jpg">
<source media="(min-width: 800px)" srcset="graficos/en_rio_grande_800.jpg">
<source media="(min-width: 600px)" srcset="graficos/en_rio_mediana_600.jpg">
<source media="(max-width: 600px)" srcset="graficos/en_rio_pequenya_300.jpg">
<img src="graficos/por_si_acaso.jpg" alt="Si no se cumple ninguna condición">
</picture>

En este enlace puedes ver este ejemplo

orientacion_picture

Con este tipo de condiciones compuestas podemos diseñar la página con imágenes distintas según el tamaño de la ventana pero teniendo también en cuenta la orientación. Muchas imágenes captadas para verse en horizontal quedan mal o muy pequeñas al verlas en vertical, ahora podemos recortarlas y crear una versión que quede bien para la orientación vertical. Esto es especialmente importante pensando en smartphones donde es frecuente girar el dispositivo.

El nuevo tag <picture>. Tipo de imagen

 

Otra posibilidad de la etiqueta picture es utilizar el tipo de imagen como condición.

Por ejemplo, en este caso si el dispositivo en el que se está viendo la página web es capaz de mostrar imágenes de tipo webp, se mostrará la imagen indicada en srcset, en caso contrario se ejecutará la siguiente instrucción, en este caso la etiqueta img.

<picture>
<source type="image/webp" srcset="graficos/en_rio_pequenya_300.webp">
<img src="graficos/por_si_acaso.jpg" alt="Si no se cumple ninguna condición">
</picture>

Este tipo de condiciones se suelen usar si disponemos de más de una imagen de distinto tipo (webp, png, jpg, ...) y queremos que muestren preferentemente las de un tipo, en ese caso basta colocarlas en diferentes etiquetas source ordenadas según nuestras preferencias.

El nuevo tag <picture>. Resolución del dispositivo

 

La última posibilidad que vamos a ver se refiere a la resolución del dispositivo en el que se mostrará la imagen. Vamos a verlo sobre el siguiente ejemplo.

 

<picture>
<source srcset="graficos/pendientes_2x3_peq.jpg, graficos/en_rio_grande_800.jpg 2x">
<img src="graficos/por_si_acaso.jpg" alt="Si no se cumple ninguna condición">
</picture>

En la etiqueta source, hemos puesto dos archivos de imagen separados por una coma y detrás de la segunda imagen hemos escrito 2x. Esto se interpretará de la siguiente forma, si el dispositivo es capaz de mostrar imágenes de resolución 2x (alta resolución) se mostrará la segunda imagen, en otro caso se mostrará la primera imagen.

Es decir, se muestra la imagen de la máxima resolución que es capaz de mostrar el dispositivo.

La resolución estándar se indica como 1x, alta resolución 2x y muy alta resolución por 3x. Aunque también se pueden utilizar valores intermedios, 1,25, 1,5, ... y otras formas de especificar la resolución (dpi)

Resumiendo, como puedes ver la nueva etiqueta picture ofrece muchas posibilidades, se pueden combinar distintas condiciones (ancho, alto, orientación, ...) para conseguir mostrar la imagen adecuada a cada situación. En este artículo solo hemos hecho una primera introducción al tema, queda mucho por investigar y descubrir.

Si quieres conocer más posibilidades de utilización de Media Query puedes visitar este enlace: Mozilla Media Query


Marzo-2017
Pág.3 de 3
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.