Introducción.
El elemento Picture de HTML surge para solucionar problemas que encontramos a la hora de usar las imágenes en nuestras páginas web. ¿Cuál es el problema?
Se nos plantea la necesidad de adecuar nuestras páginas web para todo tipos de monitores, Internet Tvs, tablets, móviles por lo que estás deben ajustarse a las nuevas medidas que van desde los 320px alcanzando los 7680px de ancho.
Solución Actual.
La solución más usada hoy en día a través de CSS es:
img {
max-width: 100%;
height: auto;
}
Al usar este estilo en CSS nos aseguramos de que el ancho de la imagen se ajuste al ancho que corresponde en cada momento, además, con la propiedad height:auto la escala de la fotografía siempre será respetada. Pero no nos deja especificar diferentes imágenes para diferentes circunstancias.
Nueva solución.
Es en este punto en el que surge un nuevo elemento no estandarizado llamado <picture> en HTML5. Esta etiqueta te permite utilizar múltiples etiquetas <source>.
- Podrás cargar una imagen para cualquier situación dependiendo de:
- La orientación, el ancho o la altura.
- La densidad del pixel.
- Cargar imágenes de tamaño apropiado, haciendo mejor uso de la banda ancha.
- Cargar imágenes recortadas en relación al aspecto en los cambios de la anchura.
- Cargar píxeles con alta resolución.
Limitaciones.
IE9.
No funciona con otras versiones ya que no reconocen los elementos <source> dentro de la etiqueta <picture>. Para solucionar esto debemos envolver los elementos <picture> entre comentarios con etiquetas de <video>. Los navegadores web en los que funciona este tipo de etiquetas son Chrome, Opera y Mozilla Firefox.
Android 2.3
Requiere de una versión de Android que no sea la 2.3 ya que no reconoce los atributos srcset por lo que deberemos incluir en último lugar una etiqueta img de respaldo por si se utilizara esta versión de Android.
Javascript y Soporte Nativo de Media Queries.
Es necesario que Javascript esté habilitado en el navegador ya que no provee una solución “no-js”. Además es necesario que los navegadores tengas utilicen un soporte de media queries de IE9 en adelante ya que de no ser así no soportará la función.
Peticiones HTTP Extra.
Es posible que el archivo especificado de respaldo img sea pedido por el navegador antes que nuestro elemento, esto es un problema temporal que se solucionará cuando la implementación nativa de nuestra etiqueta sea lanzada.
A tener en cuenta:
Debido a que la implementación nativa de los navegadores no soporta el elemento <picture> deberás utilizar un polyfill llamado Picturefill 2.0.
Polyfill: código que implementa una función en los navegadores web que no admiten la función.
Como implementarlo en tu página.
Debemos descargar el archivo picturefill.js e implementarlo en tu proyecto.
Link para la descarga : http://scottjehl.github.io/picturefill/
Una vez implementado, cargaremos en nuestra página de HTML5 el script en la sección de head.
Como utilizarlo.
- Abre y cierra la etiqueta de
<picture>. - Dentro de las etiquetas utiliza un elemento
sourcepara cada interacción. - Añade el atributo media con el contenido del alto, ancho, orientación, etc.
- Agrega un atributo
srcsetcon el nombre del archivo de la imagen. - Agrega nombre de archivos extra al atributo
srcsetsi deseas dotar a las imágenes diferentes densidades de pixel. - Por último, como hemos mencionado utilizaremos un elemento
imgde respaldo en caso de no poder usarse.
Ejemplos gráficos.
Prueba para ver cómo se comporta el elemento picture en situaciones con un máximo de 768px de ancho para una página web. En este caso y los siguientes casos he usado dos imágenes diferentes para ver de una manera más clara la transición.
En este caso lo que hacemos es la distinción en la posición en la que se encuentra el dispositivo. Si está en vertical el dispositivo mostrará el archivo de imagen Prueba.jpg, mientras que si se encuentra de manera horizontal mostrará el archivo de imagen Pruebagrande.jpg
Ahora, nos enfocamos en la propiedad de la resolución para los monitores que pueden reproducir imágenes de más calidad. Como vemos utilizamos dos archivos ya que el navegador comprobará las dimensiones primero y luego se centrará en la densidad de pixel ( 2x ).
Código utilizado para la prueba (opción de copia):
<!DOCTYPE html>
<html lang=»es»>
<head>
<meta charset=»UTF-8″>
<meta http-equiv=»X-UA-Compatible» content=»IE=edge»>
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
<title>Ejercicio voluntario de picture</title>
<script src=»picturefill.js»></script>
</head>
<!– Uso del ancho de la pantalla –>
<picture>
<source srcset=»Prueba.jpg» media=»(max-width: 768px)»>
<source srcset=»Pruebagrande.png»>
<img srcset=»Prueba.jpg» alt=»My default image»>
</picture>
<!– Uso de la orientación del dispositivo –>
<picture>
<source srcset=»Pruebagrande.png» media=»(max-width: 40em) and (orientation: landscape)»>
<source srcset=»Prueba.jpg» media=»(max-width: 40em) and (orientation: portrait)»>
<img srcset=»Prueba.jpg» alt=»My default image»>
</picture>
<!– Uso de la densidad de pixel –>
<picture>
<source srcset=»Prueba.jpg, Prueba.jpg 2x» media=»(max-width: 768px)»>
<source srcset=»Pruebagrande.png, Pruebagrande.png 2x»>
<img srcset=»Pruebagrande.png, Pruebagrande.png 2x» alt=»My default image»>
</picture>
<!– Solución al problema de las versiones distintas IE9 –>
<picture>
<!–[if IE 9]><video style=»display: none;»><![endif]–>
<source srcset=»Prueba.jpg» media=»(max-width: 768px)»>
<source srcset=»Pruebagrande.png»>
<!–[if IE 9]></video><![endif]–>
<img srcset=»Pruebagrande.png» alt=»My default image»>
</picture>
</html>
Bibliografía.
Autor: Kenzz Bracey.
W3school, información sobre IE9 en navegadores:
https://www.w3schools.com/browsers/browsers_explorer.asp
Página de Picturefill: