TinySrc, una pequeña gran idea para servir imágenes en la web

Más que nunca, y pese a lo que diga el W3C, no vivimos en una web (el W3C lo sabe, y hasta lo explica bastante bien, pero lo de ‘One Web’ a mí me suena fatal como nombre, la verdad).

Existen tipos de contenidos que no se adaptan bien a la inmensa diversidad de dispositivos y resoluciones de la web de hoy. Un ejemplo son las tablas: quien espere que una tabla mínimamente compleja se presente bien cuando el ancho de pantalla es de 400 píxeles, no sabe de qué habla. Sí, con los móviles actuales hacer scroll es fácil, pero las tablas, o al menos muchas tablas, sólo tienen sentido si podemos ver (y leer) simultáneamente las cabeceras y los contenidos. Hablamos de separación de presentación y contenidos, pero para que una tabla tenga sentido en un dispositivo de baja resolución (incluso un iPhone 4, con sus brutales DPIs), o te comes la tabla o le añades una capa de comportamiento para que la cosa tenga un mínimo de legibilidad.

Con las imágenes pasa otro tanto. Hoy en día, una imagen para la web puede nacer perfectamente como una foto digital de tres o cuatro mil píxeles de ancho. Y la podemos querer servir a una pantalla de 1920 píxeles de ancho, a otras de 1280, a dispositivos móviles con 200, 300 o 400 píxeles de ancho (u 800 o 900 si apuntamos al Retina Display)… y hasta podemos querer conservar toda la resolución original para la versión para imprimir.

Un CMS actual, como WordPress, hace lo que puede y, si el tamaño de la imagen no se le atraganta, genera un ‘thumbnail’, una versión ‘mediana’ y otra ‘grande’ de lo que le subamos, en el momento de subirla. Pero eso no suele ser suficiente. ¿Qué podemos hacer con una imagen de 6 o más megapíxeles, para servirla ‘como dios manda’ a todos los dispositivos, presentes y futuros?

Una imagen de ejemplo de escritura cuneiforme, presentada a 550 píxeles de ancho
Imagen tomada en el Louvre. Un clic lleva al original, a 3587 por 2373 píxeles

Podríamos servir una imagen ‘grande’ siempre y fiarnos del reescalado del navegador. Pero eso es un derroche de recursos bastante irresponsable (la imagen de arriba, a resolución completa, pesa 2 megas, y un plan móvil de datos te da 500 al mes… Además, muchos navegadores siguen haciendo verdaderos destrozos al reescalar imágenes.

Lo que hace falta, pues, es un servicio web que a partir de la imagen original genere ‘al vuelo’ (y almacene en caché) la imagen de turno a la resolución y necesaria, en el formato adecuado. Y, a poder ser, en caso de necesidad, nos deberíamos poder fiar del servicio para pedirle una imagen «a la resolución necesaria para el dispositivo, por favor»).

Y esa es la proposición que hace, precisamente, tinySrc, un servicio que lleva al menos año y medio dando vueltas por ahí. Si queremos la imagen a 1280 píxeles de ancho, por ejemplo, basta pedirle http://i.tinysrc.mobi/1280/URL_de_la_imagen. Y si la queremos a 400 píxeles de ancho…

La imagen anterior, a 400 píxeles de ancho
¡Magia!

De hecho, uno preferiría una implementación de código abierto, a poder ser integrada a través de un plug-in con WordPress, claro :-). Si alguien conoce algo similar, que deje comentario, por favor. Pero, mientras tanto, una herramienta más a añadir al arsenal.

Comprime tus imágenes con RIOT

Comprimir imágenes, fácilmente... y gratis
Comprimir imágenes, fácilmente... y gratis

Uno de los problemas que aquejan a las webs de ‘novatos’, casi universalmente, son las imágenes que pesan de más. Jugar con los ‘settings’ de compresión de JPGs en Photoshop o en Gimp no es especialmente complicado, pero sí exige de un poquito de paciencia (y, claro, hay que tener o Photoshop o Gimp a mano y, además, en el caso de Photoshop, eso implica o dejarse una pasta o llevar el parche en el ojo…). Pero ahora, con RIOT, queda poca excusa: es gratis, es sencillo, la descarga pesa poco, se habla con la mayoría de formatos de archivo (y no tiene ningún tipo de problema con el ‘portapapeles’ de Windows: ImpPant y Ctrl+V da una captura de la pantalla, Alt+ImprPant captura la ventana activa), guarda JPEGs, GIFs y PNGs… Cuenta, incluso, con una versión portable para llevarse siempre encima.

Vamos, que no tenéis excusa.

Localiza usos de tus imágenes con TinEye

No sé si recordaréis la historia de mi foto de la torre Agbar, la que colgué aquí, cuya historia conté aquí y que, en resumen, suele salir en los primeros lugares cuando uno busca ‘Torre Agbar’ en Google Images… pero no en la entrada original de mi blog, sino por media web…

Bueno, en cualquier caso, cuando he leído sobre la existencia de TinEye, un «motor de búsqueda inversa de imágenes» en Confused of Calcutta, me ha faltado tiempo para registrarme y hacer la prueba…

¿Qué es un «motor de búsqueda inversa de imágenes»? Uno al que tú le entras una imagen (bien subiéndola, bien dando una URL) y busca sus usos por la web. Difícil, ¿no? ¿Funciona? Probemos:

TinEye localiza múltiples usos de la imagen, a pesar de haber sido reescalada, compuesta con otras imágenes o editada de múltiples otras formas
Bastante bien, ¿no? Resiste a reescalados y todo tipo de ediciones

Notable pero no excelente: le he pasado un uso de la foto y (i) no ha sido capaz de llegar a mi blog y (ii) ha devuelto algunas imágenes que, si bien similares, no son la mía (insisto que lo conseguido es de nota y me ha dejado con la boca abierta).

Hagamos una nota aparte ‘condenatoria’. Si cuelgas una foto en la web, el mejor halago que te pueden hacer es usarla. Y sabes que por mucho que le cuelgues una licencia que solo exige la atribución para usos no comerciales, alguien se la va a saltar a la torera porque sí, tarde o temprano, bien por desconocimiento o por cara dura. Apunto aquí a dos casos de estos que me tocan la moral. El primero, una inmobiliaria (ownerdirectbarcelona.com, no me apetece enlazarles) que usa la imagen en su web, recortada y pequeñita, pero sin atribución:

Captura de la web ownerdirectbarcelona.com
ownerdirectbarcelona.com

El segundo uso ‘al-menos-discutible’, del mismo estilo, me duele más:

La dichosa foto, compuesta con otras
www.20minutos.es/data/img/2008/04/03/790404.jpg

Sí, esa imagen (está ‘hotlinkada’, me siento con derecho a hacerlo) ‘vive’ en 20minutos.es. Por lo que entiendo, se ha usado en múltiples ‘sidebars’ de piezas variopintas, aunque las URLs que devuelve TinEye ya no la usan. Por lo que veo en esas imágenes, no es costumbre del diario poner los créditos de la imagen (poner tres créditos en una imagen de 544×120 tendría su aquel, ciertamente). Y digo yo, ¿no tendrán en 20 Minutos acceso a tropecientas imágenes de la torre por cuyos derechos, seguro, ya han pagado religiosamente? En fin…