Uso de imágenes en alta resolución para web | zoom & pan

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.

zoom_pan

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:

  1. Gigapan
  2. Zoomorama
  3. OpenZoom
  4. Closr.it
  5. Zoomery
  6. Zoomify
  7. Hack CSS para interpolación bicúbica en IE 
  8. 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

zoom and pan

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.

zoom and pan

Demo | Original

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.

zoom and pan

Zoomify

Zoomify genera un flash con controles para hacer pan y zoom sobre una imagen.

zoom and pan

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.

Escribí esto el 21/04/2009

6 comentarios

  1. 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

    • ceslava dice:

      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

  2. César dice:

    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/

Enlazan a este artículo:

Tu comentario

Usamos cookies para obtener datos estadísticos de su navegación y poder ofrecer publicidad contextual de terceros

ACEPTAR
Aviso de cookies