La optimización de imágenes para web viene impuesta por la necesidad de acelerar la velocidad de descarga de nuestras páginas. Es decir, intentamos que las imágenes que utilizamos pesen lo menos posible.
El problema viene cuando por ejemplo queremos mostrar imágenes en alta resolución, bien porque necesitamos mostrar la imagen a un mayor tamaño para que se vean los detalles o porque queremos dar la opción de ver y compartir dicha imagen a mayor calidad. En el reescalado e interpolación siempre perdemos calidad.
Teniendo en cuenta que el ancho de banda irá aumentando podemos pensar que el problema de la velocidad de carga de la página estaría solucionado. Sin embargo, el cómo adaptar una imagen cuya resolución es mayor que la de nuestra pantalla, mucho mayor que nuestro navegador, y mucho mayor que el espacio en nuestro blog o web sin por ello perder calidad es de lo que vamos a hablar a continuación.
Casi todas las soluciones pasan por el uso de Flash o Silverlight, de hecho estas tecnologías ya tienen por defecto en el menú las opciones de zoom y pan.
Algunas soluciones son muy simples pensadas para usuarios que no saben nada de programación, si sabes algo de ActionScript puedes desarrollarlas tú mismo. Otros servicios tienen valores añadidos como el de integrarse en una comunidad, widgets para blogs, exportación desde Photoshop, interacción con usuarios, etc.
Vamos a hablar de:
- Gigapan
- Zoomorama
- OpenZoom
- Closr.it
- Zoomery
- Zoomify
- Hack CSS para interpolación bicúbica en IE
- Imágenes líquidas (javascript)
Destacaría dos, por un lado el increíble trabajo de Daniel Gasienica (demo) y su proyecto OpenZoom y por otro Zoomorama, un proyecto web reciente que promete muy mucho.
Gigapan
En este sitio puedes visionar y navegar por imágenes, por panoramas enormes.
Puedes subir tus propias fotografías, comentar, tomar capturas de partes de ellas, widgets para blogs
Google participa en el proyecto. Dos de sus servicios están integrados en Gigapan, las fotografías de lugares tienen asociada su geolocalización en Google Maps e integrado con Google Earth.
Daniel Gasienica ha creado una versión basada en Adobe Air que podéis descargar aquí: Gigapan Desktop
Zoomorama
Zoomorama es el proyecto web de un fotógrafo que pretendía llevar a la red la magia de la revista LIFE.
Hace poco Adobe nombró «sitio del día» a su proyecto «Art in HD».
Zoomorama es un sitio para compartir y alojar gratis álbumes (hasta 2GB) fotografía y vídeo con la particularidad de que navegas por ellos con un potente zoom.
Puedes crear álbumes online desde ZoomExpress o con su app de escritorio Zoomcreator podrás crear estos álbumes en tu PC (sólo Windows de momento).
Está perfectamente integrado con Flickr y YouTube.
Los usuarios tienen su propia página y funciona como los demás sitios, votaciones, comentarios
Este es el ejemplo que creé para testarlo:
http://www.zoomorama.com/ceslava
Inline Multiscale Image Replacement | OpenZoom
En el blog de Daniel Gasienica podemos ver demos de la tecnología que el mismo ha desarrollado basándose en el proyecto de código abierto OpenZoom. Este interesante proyecto aún en desarrollo pretende convertirse en una serie de clases y componentes para Flash que permitan desarrollar aplicaciones con funciones de multiescalado y Zoomable User Interfaces (ZUIs).
El usuario no descarga la imagen que no ve, ahorrando transferencia y gracias al menú contextual damos al usuario una forma de navegación conocida y por tanto usable y no intrusiva.
Código en OpenZoom Google Code
Closr.it
Una opción sencilla para obtener un widget con función de zoom. Luego lo compartes con Clearspring.
Zoomery
Con este software comercial puedes crear tu propia galería como esta sobre Obama, más de 700 imágenes que gracias al zoom puedes ver en detalle.
Zoomify
Zoomify genera un flash con controles para hacer pan y zoom sobre una imagen.
Entre sus productos se encuentran:
- Zoomify Express (Windows y Mac) vesrión gratuita para crear tus pelis con el visor flash zoomify. Si pagas por otros productos puedes personalizar el visor y quitar el logo.
- Zoomify Export in Adobe Photoshop, descargas el flash y lo añades a tu carpeta Presets de tu instalación de PS CS4 o CS3. Instrucciones
Daniel y su proyecto OpenZoom han mejorado este visor de Zoomify, es el llamado OpenZoom Tango:
Demo | Descarga e instrucciones [en]
Interpolación Bicúbica en IE
En cuanto a CSS podemos decir que existe un hack para IE que nos muestra las miniaturas con mejor calidad gracias al modo de interpolación bicúbica.
Mejoramos el reescalado que hace el navegador cuando indicamos un tamaño menor que el original de una imagen.
img.thumb { -ms-interpolation-mode: bicubic; }
Este sería una demo de un efecto con jQuery que usa esta propiedad.
+ info [en]
Imágenes líquidas (javascript)
Este último apunte no trata de imágenes en alta resolución ni del uso de zoom & pan pero sí del reescalado de imágenes en web. Hay veces que necesitamos que una imagen se redimensione según el tamaño del navegador, es lo que llamamos diseño líquido, para solucionarlo podemos utilizar este imgSizer.js
Visita la demo y cambia el tamaño de la ventana de tu navegador.
Cristian,
Great review of all the players in the ZUI field! Unfortunately for me, I was only able to enjoy it through Google Translate ;) I must admit, I feel proud that you’ve highlighted both OpenZoom & Zoomorama, as I am – in the case of Zoomorama was – involved with both projects.
Keep up the good work!
Cheers,
Daniel
P.S. If you’d like to discuss Zooming with like-minded people, join our community at http://grou.ps/zooming
Hi Daniel, what can I say?
Your job is great, amazing, I guess that when you wondered how will be internet images in five years you´ll be involve too.
As you can see I write much better in Spanish.
Best regards
Muchas gracias por la informacion que proporcionas en tu blog. Gigapan me ha sido de una enorme utilidad. Llevaba tiempo buscándolo sin saber si existía siquiera.
http://gigapan.org/gigapans/38169/
He visto el enlace de la mega-ilustración Montanejos, supongo que es tuyo César. Muy bueno, felicidades.