Puede que el diseño responsive haya llegado para quedarse, pero hay muchos problemas que hay que resolver cuando se trata de hacer que las imágenes sean responsive. Aunque las imágenes responsive se redimensionan automáticamente en función del tamaño de la ventana gráfica (lo cual es técnicamente sencillo), uno de los problemas a los que se enfrentan los usuarios es que el punto focal de la imagen apenas es visible cuando la imagen es demasiado pequeña.
El consenso ideal entre los desarrolladores web es que la dimensión real también debe ser responsive. El navegador debería poder cargar imágenes más pequeñas o más grandes en función del tamaño de la ventana gráfica. De ese modo podemos dirigir y entregar la mejor proporción de imagen en lugar de la imagen encogida (como se muestra).
Aquí es donde entra en juego el elemento picture de HTML5. La imagen nos permite proporcionar múltiples fuentes de imagen y controlar la entrega a través de Media Queries. Veamos cómo se hace.
Cómo Empezar
He preparado una imagen en tres dimensiones diferentes, como se indica a continuación. La imagen se ha recortado para mantener el enfoque en la persona que aparece en ella. El plan aquí es que mostraremos el tamaño más pequeño en pantallas pequeñas y la imagen más grande en pantallas grandes.
Uso del Elemento Picture
Picturefill puede funcionar de dos maneras: podemos incrustar srcset en la etiqueta img o utilizar el elemento picture. Aquí optaremos por el elemento picture ya que es más manejable, más fácil de entender y más legible.
Al igual que los elementos de video y audio, la imagen envuelve múltiples elementos de origen que apuntan a la fuente de la imagen, como se indica a continuación.
<picture>
<source srcset="img/person-xsmall.jpg" media="(max-width: 480px)">
<source srcset="img/person-small.jpg" media="(max-width: 640px)">
<source srcset="img/person-med.jpg">
<img srcset="img/person-med.jpg" alt="">
</picture>El elemento source, como puedes ver en el fragmento de código anterior, está configurado con el atributo media. En este atributo especificamos el punto de corte de la ventana gráfica en el que debe presentarse la imagen. Puedes ver el efecto inmediatamente.
Echa un vistazo a la página de demostración, y cambiar el tamaño de la ventana gráfica, deberías encontrar la imagen que se muestra dentro de la anchura de la ventana gráfica especificada.
Navegadores Compatibles
Todos los navegadores soportan ahora el elemento Picture de HTML5, incluido Microsoft Edge, así como los navegadores móviles. Pero si tienes que soportar navegadores antiguos como Internet Explorer donde este elemento no es soportado, puedes usar un polyfill, Picturefill.
Picturefill es una librería JavaScript desarrollada por Filament Group. Nos permite utilizar el elemento picture ahora. Para empezar, descarga el script en el repositorio de Github y pon el picturefill.js o picturefill.min.js. Puedes añadirlo simplemente en la etiqueta head.
<script src="js/picturefill.js"></script>Conclusión
El elemento picture es una gran adición en HTML5. Proporciona más control sobre el tamaño de la imagen que el navegador debe presentar en un tamaño de ventana específico. El elemento picture funciona en todos los navegadores más recientes, y WordPress lo ha incluido desde WordPress 4.4. Si alguna vez necesitas utilizar navegadores antiguos como Internet Explorer que no soportan el elemento picture, puedes utilizar Picturefill.
Por último, puedes ver la demo y descargar el código fuente más abajo.
