Web BizarroWeb Bizarro

Suscríbete a nuestro Newsletter

X

Únete a nuestra lista de correos para recibir semanalmente actualizaciones de nuestro contenido.

PictureFill para usar imágenes responsive

PictureFill para usar imágenes responsive 17.SEP.15

Alvaro José Rios Ch
Fundador WebBizarro

Cuando hablamos de imágenes responsive nos referimos a que el sitio web carga la imagen adecuada dependiendo de la resolución de la pantalla, esto es algo muy útil para cualquier desarrollador web ya que le permite entregar a los usuarios justo la imagen que necesitan, además de ahorrarles ancho de banda y mejorar los tiempos de carga de la página.

PictureFill es una librería JavaScript que te permite implementar imágenes responsive fácilmente, lo único de que debes hacer es descargar e incluir el script en tu página.

<head>
<script>
// Picture element HTML5 shiv
document.createElement( "picture" );
</script>
<script src="picturefill.js" async></script>
</head>

Luego solo tienes que seguir la documentación, por ejemplo si usas esto

<img srcset="examples/images/large.jpg 1x, examples/images/extralarge.jpg 2x" alt="…">

Entonces tendrás dos imágenes, ambas son del mismo tamaño sin embargo la primera tiene una densidad de píxeles menor.

<img
sizes="(min-width: 40em) 80vw, 100vw"
srcset="examples/images/medium.jpg 375w,
examples/images/large.jpg 480w,
examples/images/extralarge.jpg 768w"
alt="…">

En el ejemplo anterior pueden ver que además de los tamaños de las imágenes también es posible jugar con la resolución de la pantalla, o del viewport.

Una herramienta muy útil que nos permite crear mejores sitios, amables con el usuario y que estan optimizados para cargar rápido.