Esta frase famosa se hace real en el mundo de internet porque como humanos aún todo entra por los ojos. Cada día es más usual ver una página web en una notebook, o un dispositivo móvil, y ahora hasta en una pantalla de TV en donde la resolución cada dia aumenta en su  definición y el objetivo es dar al mundo una experiencia inolvidable, un sentimiento o un poema visual con una sola imagen.

Para los diseñadores y programadores de internet mostrar una imagen que se adapte al dispositivo del usuario se ha convertido en una tarea más fácil, pero ¿cómo? Y ¿porque?

Empecemos por explicar cómo un navegador muestra una imagen: es simple haciendo uso de un tag de html <img> y por medio de métodos en javascript o css podemos hacer que esta imagen se adapte “sin costo alguno” para el usuario. En realidad no es asi de simple. El costo puede ser en muchos casos bastante alto.   Ya que utilizar una imagen de alta resolución, puede resultar en altos costos de ancho de banda al usuario, en especial si lo baja por medio de una coneccion 3g, y lo mas triste del caso, nuestros navegadores optimizan la imagen, comprimiendola dependiendo del dispositivo que uses.

Mientras que antes utilizar  métodos en javascript o css para acoplar una imagen al dispositivo era lo común, pero no lo óptimo, ahora podemos hacerlo por medio de un elemento de html. ¿Qué significa esto?  pues tendremos la facilidad de indicarle a nuestro navegador el formato de la imagen que queremos mostrar dependiendo del dispositivo que el usuario use o la resolución de la pantalla del usuario.

El elemento <picture> ha sido introducido últimamente como el elemento para cargar recursos de imágenes optimizadas para distintos dispositivos.  Uno de sus usos será el despliegue de la orientación de la imagen en vertical u horizontal. Pero el mayor logro es mejorar el rendimiento de la carga de recursos. Cuando se utiliza <picture> y <img> con el atributo srcset y size, el navegador sólo descargará la imagen que se indica expresamente para el escenario que concuerde. Esta aplicación nativa es compatible con programas de análisis HTML y puede tomar ventaja de almacenamiento en caché de la imagen en el navegador y sus capacidades de precarga.

La syntaxis del elemento <picture>

<picture>

 <source

   media="(min-width: 650px)"

   srcset="images/Horizontal-logo-light-background-en.png">

 <source

   media="(min-width: 465px)"

   srcset="images/Vertical-logo-light-background-en.png">

 <img

   src="images/Vertical-logo-light-background-en.png"

   alt="Joomla!">

</picture>

Puedes ver un ejemplo en este link.

Durante el Joomla! Day UK, Bruce Lawson nos deleito con su plática muy amena acerca de su contribución a este proyecto que hoy ya es una realidad. Puedes escuchar su plática en youtube aquí.  Y puedes leer más acerca de sus comentarios sobre esto y cómo Opera ha adaptado este elemento.