≡En resumen
- Zoomify no descarga la imagen completa: sirve teselas pequeñas según el nivel de zoom y la zona visible.
- La empresa original ha cerrado, pero su formato de teselas lo siguen leyendo visores libres como OpenSeadragon.
- En una tienda online, el zoom profundo solo compensa cuando el detalle vende: tejidos, joyas, arte, mapas o piezas técnicas.
- Para la mayoría de fichas de producto basta con una lupa al pasar el ratón o una galería a pantalla completa.
- El visor debe cargarse cuando el usuario lo pide, para no penalizar la velocidad ni las Core Web Vitals.
01 ¿Qué es Zoomify?
No hay que confundirlo con el efecto lupa que traen casi todas las plantillas de ecommerce, que amplía una foto normal y del que hablamos en la entrada de lens zoom, ni con el concepto general de zooming en interfaces, que abarca el pellizco en el móvil y el zoom del navegador. Zoomify pertenece a la familia del deep zoom o zoom profundo.
02 Cómo funciona el zoom profundo por teselas
-
1
Se parte de un original grande
Una fotografía, un escaneo o una imagen de microscopio de miles de píxeles de lado.
-
2
Se crea una pirámide
El conversor genera niveles sucesivos, cada uno a la mitad de resolución que el anterior, hasta que la imagen entera cabe en una sola tesela.
-
3
Se trocea cada nivel
Cada nivel se corta en teselas cuadradas, normalmente de 256 píxeles, guardadas como JPEG con nombres del tipo nivel-columna-fila.jpg.
-
4
Se agrupan y describen
Las teselas se reparten en carpetas TileGroup0, TileGroup1… de 256 teselas cada una, y un archivo ImageProperties.xml guarda el ancho, el alto, el número de teselas y su tamaño.
-
5
El visor pide lo justo
Según el zoom y la zona visible, el visor calcula qué teselas necesita y las descarga, igual que un mapa online.
| Nivel | Tamaño | Teselas |
|---|---|---|
| Máximo detalle | 10.000 × 8.000 | 40 × 32 = 1.280 |
| -1 | 5.000 × 4.000 | 20 × 16 = 320 |
| -2 | 2.500 × 2.000 | 10 × 8 = 80 |
| -3 | 1.250 × 1.000 | 5 × 4 = 20 |
| -4 | 625 × 500 | 3 × 2 = 6 |
| -5 | 313 × 250 | 2 × 1 = 2 |
| Vista general | 157 × 125 | 1 |
Son 1.709 archivos, pero el usuario rara vez descarga más de unas decenas: los que caben en su pantalla en cada momento. Por eso el zoom profundo funciona incluso con imágenes que no se podrían abrir enteras en un móvil.
03 Zoomify hoy y sus alternativas: OpenSeadragon, Deep Zoom e IIIF
| Opción | Qué es | Cuándo usarla |
|---|---|---|
| Formato Zoomify | Teselas en carpetas TileGroup e ImageProperties.xml | Si ya tienes imágenes convertidas y quieres reutilizarlas |
| Deep Zoom (DZI) | Formato de teselas creado por Microsoft, con un XML descriptor | Opción por defecto para proyectos nuevos con OpenSeadragon |
| IIIF | Estándar internacional para servir imágenes de bibliotecas, museos y archivos | Colecciones culturales que deben compartirse entre instituciones |
| OpenSeadragon | Visor JavaScript libre (licencia BSD) para escritorio y móvil | Mostrar cualquiera de los formatos anteriores en tu web |
OpenSeadragon lee teselas Zoomify con una configuración en línea (ancho, alto, ruta de las teselas y tamaño, 256 por defecto), así que no hace falta volver a generar las imágenes para modernizar el visor.
04 Zoom en las imágenes de producto de una tienda online
| Tipo | Cómo funciona | Adecuado para |
|---|---|---|
| Lupa al pasar el ratón | Amplía la foto dentro de la ficha al mover el puntero; en WooCommerce usa la librería jQuery Zoom desde la versión 3.0 | Ropa, calzado, electrónica: la mayoría de tiendas |
| Galería a pantalla completa | La foto se abre en grande y se amplía con pellizco o doble toque; WooCommerce usa PhotoSwipe | Todas las tiendas, sobre todo en móvil |
| Zoom profundo por teselas | Visor tipo Zoomify u OpenSeadragon con originales de decenas de megapíxeles | Tejidos, joyería, relojes, arte, grabados, mapas, recambios técnicos |
La lupa depende del mouse over, que no existe en pantallas táctiles, y hoy la mayoría de visitas a una tienda llegan desde el móvil. Por eso la galería a pantalla completa con pellizco es la base, y el zoom profundo, un extra para catálogos en los que el detalle justifica el precio. Sin una buena fotografía de producto para ecommerce, ningún visor salva la ficha: ampliar una foto mediocre solo enseña mejor sus defectos.
Una tienda vende reproducciones de grabados antiguos. En la ficha muestra una foto optimizada de 1.200 px y un botón «Ver detalle del papel». Al pulsarlo se abre OpenSeadragon con el escaneo original en teselas, y el cliente comprueba la trama del grabado antes de comprar. La ficha sigue cargando rápido porque el visor y las teselas solo se piden tras el clic. Es el tipo de solución que planteamos en un diseño de tienda online a medida.
05 Zoom profundo y rendimiento: cómo no hundir la velocidad
- ✓Carga el visor solo cuando el usuario pulse para ampliar, no al abrir la página.
- ✓La imagen principal visible debe ser una foto normal, ligera y con ancho y alto declarados, porque suele ser el elemento LCP.
- ✓No apliques carga diferida (lazy loading) a esa imagen principal; sí a las miniaturas y al resto de la galería.
- ✓Sirve las teselas desde una CDN con caché larga: no cambian una vez generadas.
- ✓Usa JPEG o WebP de calidad media en las teselas; con cientos de archivos, cada kilobyte cuenta.
- ✓Genera solo los niveles que aportan detalle real: si el original está desenfocado al 100 %, sobra el último nivel.
Un visor mal integrado puede añadir cientos de kilobytes de JavaScript y decenas de peticiones antes de que el usuario haga nada. Si tus fichas ya van lentas, primero aplica una buena optimización de imágenes y revisa la velocidad de carga web; el zoom profundo va después.
06 SEO, accesibilidad y protección de las imágenes
SEO
Google no indexa las teselas como imagen de producto. Mantén en la ficha una etiqueta img normal, con texto alternativo y nombre de archivo descriptivo.
Accesibilidad
El visor debe manejarse con teclado y botones de acercar y alejar visibles, no solo con rueda o gestos.
Móvil
El visor no debe capturar el desplazamiento de la página: el usuario tiene que poder seguir bajando sin quedar atrapado en la imagen.
Protección
Las teselas son públicas: cualquiera puede recomponer la imagen completa. Si el original tiene valor comercial, publica una resolución menor o con marca de agua.
07 Cómo implementar un visor tipo Zoomify paso a paso
-
1
Elige el formato
Para proyectos nuevos, Deep Zoom o IIIF; si ya tienes teselas Zoomify, reutilízalas.
-
2
Genera las teselas
Herramientas como libvips, con su comando dzsave, crean pirámides en formato Deep Zoom, Zoomify o IIIF desde la línea de comandos.
-
3
Súbelas a tu servidor o CDN
Respeta la estructura de carpetas y configura una caché larga.
-
4
Integra el visor
Añade OpenSeadragon a la página y configúralo con la ruta de las teselas y las dimensiones de la imagen.
-
5
Prueba en móvil y con teclado
Comprueba pellizco, doble toque, botones de zoom y que la página se puede seguir desplazando.
Preguntas frecuentes sobre Zoomify
Es un visor de imágenes con zoom profundo y el formato de teselas que utiliza. Divide una imagen muy grande en una pirámide de teselas y descarga solo las que se ven en cada momento.
La empresa Zoomify, Inc. ha cesado su actividad, según la propia web zoomify.com. Su formato de teselas sigue siendo compatible con visores mantenidos como OpenSeadragon.
OpenSeadragon, un visor JavaScript de código abierto con licencia BSD que lee Deep Zoom, IIIF, Zoomify y otros formatos de teselas.
El zoom habitual de una ficha amplía una sola foto ya descargada. Zoomify trabaja con teselas a varias resoluciones y permite ampliar imágenes enormes sin descargarlas enteras.
Solo si el visor se carga al abrir la página. Si se carga al pulsar para ampliar y las teselas se sirven desde una CDN con caché, apenas afecta a la velocidad.
Sí, técnicamente: las teselas son archivos públicos que se pueden recomponer. Si el original tiene valor comercial, publica una resolución menor o con marca de agua.
Fuentes consultadas
Sobre el autor
Germán Gutiérrez
Development Manager en appyweb
Dirige el equipo de desarrollo de appyweb: aplicaciones web y móviles, SaaS, integraciones y arquitectura de software.
Ver perfil en LinkedIn ↗