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.

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

  1. Es deseable que ya la misma página proporcione los contenidos de una forma óptima según el ‘oyente’, pero si las 10^n páginas de internet han de molestarse (a día de hoy) a dinamizar la información a la carta según el ‘oyente’, es tarea hercúlea.

    El Opera mini hace tiempo ya que procesa las páginas (en su servidor) para que la digestión en el dispositivo móvil sea más liviana.

    En un futuro, si se estandariza el tema de las imágenes, como ha hecho el CSS con el texto, el ‘oyente’ podría dar la información de sus preferencias y el servidor si lo tiene a bien prodría cumplirlas.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *