El diseño responsive ha llegado para quedarse. Esto lo sabemos, al ver la funcionalidad de varios sitios de la web en nuestros SmartPhones. Pero un punto, y tal vez el mas importante, es el de las imágenes adaptables. Una imagen pixelada en un sitio web puede costar unos cuantos visitantes, ya que como sabrán la mayoría de personas encargadas de sitios web, la parte visual es uno de los factores mas importantes para conseguir trafico.

La gran mayoría de desarrolladores web aconsejan sobre la adaptabilidad del tamaño real de la imagen. El navegador web debe ser capaz de cargar las imágenes que hayan en distintos tamaños, que pueden ser relativos al tamaño de la ventana de navegador. De esta forma podemos ofrecer el tamaño de imagen adecuado al usuario, y brindar una buena experiencia en nuestro sitio web.

Aquí es donde el elemento picture de HTML5 entra a hacernos algo mas fácil la vida ;)  Picture nos permite ofrecer múltiples fuentes de imagen y controlar el suministro de estas, a través del uso de las Media Queries. La cuestion es, como es un elemento relativamente nuevo, la mayoría de navegadores no soportan este útil llamativo elemento de HTML5, entonces, ¿Que se puede hacer? Para saltar este pequeño bache en el camino del desarrollo web adaptable, usaremos un util polyfill llamado Picturefill.

Comenzando

Picturefill es una librería JavaScript desarrollada por Filament Group. Con esto, ya podremos utilizar el elemento Picture en nuestro desarrollo. Para comenzar, descargaremos el script en el repositorio de Github y usaremos el archivo picturefill.js ó picturefill.min.js. Picurefill es una librería de JavaScript independiente, lo que quiere decir, es que no necesitamos otra librería para que Picturefill funciones. Luego añadimos en el head la ruta donde se encuentre el archivo de Picturefill que deseemos usar, fácil, ¿no?:

[html]<script type="text/javascript" src="js/picturefill.js"></script> [/html]

 

La Imagen

Para el ejemplo del articulo, se ha preparado una imagen en tres diferentes tamaños. La imagen se ha recortado para preservar el enfoque en la persona de la imagen. Lo que se pretende, es mostrar la imagen proporcional al tamaño de la pantalla del dispositivo, sin perder el enfoque en la persona, como se menciono antes:

Usando Etiqueta Picture De HTML5

Picturefill puede funcionar de dos maneras: se puede incrustar la ruta en la etiqueta img ó usar directamente el elemento Picture. En este articulo usaremos el elemento Picture, ya que el código será mas limpio y fácil de comprender.

[html]

<img alt="" srcset="img/person-med.jpg" />

[/html]

Como se puede apreciar, se usar el elemento source para mostrar la imagen segun el tamaño, en la misma linea usamos la Media Querie para realizar el cambio inmediato de la imagen proporcional al tamaño de la ventana. El atributo media solo va en la imagen que queremos aplicar el cambio al momento de cambiar el tamaño de la ventana.

See the Pen Elemento Picture HTML5 by HostDime Colombia (@HostDimeColombia) on CodePen.

 

Picturefill Para WordPress

Si estás usando WordPress, puede utilizar un plugin llamado Picturefill.WP que le permite implementar el elemento Picture en WordPress. Para implementarlo no tendra que hacer ninguna modificación a nivel de código, solo tienes que cargar las imágenes como siempre lo has hecho, el plugin se encargara del resto, al fin de cuentas, para eso están los plugins ;)

Finalmente

El elemento Picture es una gran adición en HTML5. Tenemos más control sobre el tamaño de la imagen y la dimensión que se debe mostrar en el navegador. Y con picturefill podemos utilizar este nuevo elemento, aunque no haya soporte en varios navegadores. Picturefill trabaja en una amplia gama de navegadores como en IE.