Por fin se puede utilizar con tranquilidad el nuevo elemento de HTML5 <picture>, que permite un uso ‘responsivo’ de imágenes, gracias a la librería JS Picturefill.
Con <picture> se pueden señalar varias fuentes http para una misma imagen (tamaños prqueños, mediano, grande…), que sólo se cargarán y mostrarán en el navegador en función de la anchura de la pantalla o de cualquier otro parámetro filtrable vía ‘media query’. Picturefill.js se encargará de hacer los ‘arreglillos’ necesarios para que el elemento picture funcione incluso en navegadores antiguos que no lo soportan.
Ya puedes descargar Picturefill en http://scottjehl.github.io/picturefill/
Su uso es extremadamente sencillo. Sólo hay que cargar la librería (cuyo peso es mínúsculo en versión minimizada, sólo 6kb) en el <head> y utilizar el elemento picture con normalidad, por ejemplo:
<picture> <source srcset="img/extragrande.jpg" media="(min-width: 1024px)"> <source srcset="img/grande.jpg" media="(min-width: 728px)"> <source srcset="img/mediana.jpg"> <img srcset="examples/images/mediana.jpg" alt="Imagen de ejemplo"> </picture>
En el elemento <picture> se definen tres fuentes distintas a través del subelemento <source>, y un subelemento <img> para los navegadores que no soportan <picture> ni <source>. En cada <source> hay dos parámetros, srcset, en el que se define la fuente http de la imagen, y media, en el cual se establece un filtro ‘media query’.
En el ejemplo anterior, sólo se cargará y mostrará la imagen extragrande.jpg en pantallas con un ancho mínimo de 1024, grande.jpg en pantallas con un ancho mínimo de 728px, y mediana.jpg en los demás casos.
Según se explica en la página de los autores del proyecto, es necesario utilizar un pequeño ‘truco’ para que el sistema funcione en IE9:
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="img/extragrande.jpg" media="(min-width: 1024px)">
<source srcset="img/grande.jpg" media="(min-width: 728px)">
<source srcset="img/mediana.jpg">
<!--[if IE 9]></video><![endif]-->
<img srcset="examples/images/mediana.jpg" alt="Imagen de ejemplo">
</picture>
Se trata de incrustar en el HTML un elemento <video> no visible, que a través del filtro condicional de IE ([if IE 9]) sea reconocible sólo por el navegador de Microsoft en su versión 9.
He probado en internet explorer 11 y en Mozilla 38.0.5 y no hubo cambios al usar o no el plugin. Las imagenes se tomaban correctamente segun la medida. El unico problema fue que al redimensionar desde chico a mas grande la ventana del navegador, no se actualizaban las imágenes, pero al revés sí.
Pingback: optimize-images-seo-2024 — My WordPress
Pingback: optimize-images-seo-2024 – My WordPress