Responsive image en tu web: acercamiento con varias alternativas

Cómo adaptar las imágenes en tu web

La adaptación de las imágenes a un dispositivo es un tema que ha generado muchísimos debates; unos están a favor del max-width: 100%, otros no, unos están a favor de crear miniaturas que después serán mostradas cuando el usuario haga clic sobre ellas, otros cargan las imágenes solo cuando el usuario se ha posicionado a la altura de la imagen, unos utilizan distintas imágenes según el dispositivo etc., etc., etc.

Últimamente he leído mucho sobre este tema y he llegado a una conclusión: que cuanto más leo más dudas me surgen. Hoy quiero mostrarte algunas alternativas conocidas e interesantes y que seguramente te hagan reflexionar sobre cómo adaptar las imágenes en tu web.

max-width: 100%

Como ya comenté en el tutorial sobre Responsive Image con HTML5 y CSS, una de las formas sencillas de adaptar las imágenes de tu web a un determinado dispositivo, es añadiendo esto en el estilo de la imagen:

img{ max-width: 100%;}

Como puedes ver en el enlace anterior, esto hará que tus imágenes sean redimensionadas (de tamaño) y se adapten al dispositivo. ¿Qué pero podríamos sacarle? Que las imágenes son cargadas en su totalidad (hablo de peso, bytes) y esto podría considerarse una contrariedad ya que realmente estás viendo una imagen más pequeña y de menor calidad.

Por ejemplo, si yo tengo un artículo en el que hay solamente 2 imágenes y las he optimizado para web, no necesitaría hacer nada más, pero si tengo un escrito con 20 fotografías de 300KB cada una mostrando lo bien que he estado de vacaciones, tardará en cargarse en cualquier dispositivo. En este último caso habría que encontrar una nueva forma.

Focal Point

En inglés he visto cómo se hace muchas veces referencia al proyecto Focal Point, que he estado probando estos días. ¿Qué es? En palabras muy sencillas: es un archivo de estilo (.css) que aparte de redimensionar la imagen según el tamaño del dispositivo, permite mostrar  la parte de la imagen que uno quiere. Me explico: si tienes una imagen donde aparece un caballo y una montaña, cuando la imagen se vea en un smartphone, podrás hacer que aparezca solamente la montaña o el caballo, poniendo el foco en uno de ellos.

Para realizar esto utiliza márgenes negativos (em).

Cargar la imagen cuando es mostrada

Posiblemente una de las mejores alternativas unida a la primera. De esta forma, el usuario va leyendo el artículo y solo se carga la imagen cuando con la barra de desplazamiento te has situado a su altura. Consigues que el usuario cargue solamente las imágenes que va a ver, que la página se cargue más rápidamente al inicio y si unes esto a max-width: 100%, consigues que las imágenes se vean bien en cualquier dispositivo.

Uno de los plugins más conocidos que he visto utilizar en algunas webs es:

• LazyLoad: Inspirado en el plugin YUI ImageLoader. He comprobado que funciona en diferentes navegadores y testeado también en Android, que no lo indica su web. Destaca que el archivo js, en su versión comprimida, es muy reducido y el manejo del mismo está bien explicado. Algunos dicen que lleva tiempo sin desarrollarse, pero veo en su blog que la última versión es reciente.

Mostrar miniaturas y que el usuario haga clic para poder verla

Otra opción bastante comentada es mostrar siempre una miniatura de la imagen y, si el usuario quiere verla, debe hacer clic en ella y será mostrada en una ventana emergente (popup). Así, el usuario solo ve las imágenes que le interesan y tu servidor estará más aliviado de descargas. A mí personalmente esta opción no me gusta nada porque te obliga a alojar, permanente o temporalmente la miniatura, a crear una nueva imagen de un tamaño específico y además estás obligando al usuario a hacer clic en todas las imágenes: para mí una pérdida de tiempo. Además hoy lo he comprobado personalmente: existen ventanas emergentes para mostrar la imagen que son difíciles de hacer desaparecer.

Otras 3 interesantes alternativas

Esta es una interesante librería escrita en PHP que según tu dispositivo muestra determinadas imágenes (por ejemplo, para tu ordenador de escritorio puedes descargar una imagen de 200KB, mientras que esa misma imagen para tu smartphone solo será de 30KB): Adaptive Images. También puedes usar una pequeña librería JavaScript: PictureFill, y otro proyecto interesante que me ha llamado mucho la atención: ResImageCrop, donde a un archivo PHP le pasas los datos como parámetros en la URL.

El elemento <picture></picture>

Posiblemente sea el futuro del tema relacionado con la adaptación de imágenes. Actualmente el elemento <picture> es solo una propuesta. Ejemplo de uso:

<picture width="500" height="500">
   <source media="(min-width: 45em)" src="/large.jpg">
   <source media="(min-width: 18em)" src="/med.jpg">
   <source src="/small.jpg">
   <img src="/small.jpg" alt="">
   <p>Accessible text</p>
</picture>

Conclusiones

Como podrás pensar, la elección de una u otra opción depende de las imágenes que tengas alojadas, de la cantidad que quieras mostrar y de su peso. Si en cada artículo que haces, necesitas 20 imágenes, sería conveniente hacer uso de un plugin como LazyLoad.

Desde mi punto de vista, la mayor parte de smartphones o pequeños dispositivos, permiten ampliar la pantalla haciendo un simple gesto: una pinza con los dedos... Por este hecho, yo creo que no es necesario poner una miniatura, sino directamente la imagen y si el usuario quiere verla al completo, que la amplíe. Después, normalmente para volver a su estado inicial, basta con dar 2 clics en la pantalla.

En el párrafo anterior me estoy refiriendo al uso de unas pocas imágenes en un artículo. Por supuesto que no me refiero a una galería de imágenes o al uso de muchas imágenes y de peso en un artículo, donde habría que buscar alternativas arriba comentadas.