Affichage d’images en haute résolution avec OpenSeadragon

« Pour voir loin, il faut y regarder de près »
Pierre Dac

OpenSeadragon est une bibliothèque javascript Open Source (Licence BSD) qui facilite la visualisation des détails d’une image haute résolution dans un navigateur en permettant de facilement zoomer et dézoomer sur une zone avec la molette de la souris, avec les doigts (écran tactile), ou bien en cliquant sur un ensemble de boutons dédiés. Il devient alors possible de passer d’une vue générale à l’exploration des détails, tout cela de manière simple, fluide, sans latence. Le temps de chargement d’une image lourde devient réduit et la bande passante est ainsi économisée. Cool !

L’image haute résolution doit préalablement être traitée et transformée en une hiérarchie de tuiles, localisées sur un serveur, dans un système de fichier particulier. Une requête est ensuite transmise du client (le navigateur) au serveur via javascript. De multiples options permettent de finement configurer OpenSeadragon et de l’adapter à divers cas. Il est notablement possible de visualiser des diaporamas d’images zoomables, de créer des sur-couches mettant en évidence des zones particulières, de comparer sur le même écran deux images haute résolution différentes. Les bibliothèques, les musées et les archives, tout autant que les géographes, sont les premiers utilisateurs de cette visionneuse particulièrement adaptée à l’affichage des manuscrits anciens, des œuvres d’art numérisées, des images haute résolution variées, des cartes notamment satellitaires ou des radiographies médicales.

Compatible avec la norme IIIF (International Image Interoperability Framework), la visionneuse Mirador (Stanford, Harvard, Biblissima, Cambridge) se distingue ensuite. Mirador fournit un environnement adapté au visionnage de séries d’images tuilées. OpenSeadragon ainsi que le projet du W3C Open Annotation en sont des composantes de base. Mirador permet par exemple de visualiser simultanément deux images, de naviguer dans des ensembles d’images par l’intermédiaire de vignettes, pour consulter un livre ancien par exemple, de créer des annotations et des vues, d’afficher des métadonnée ou lire des livres, de visionner des images satellite ou des cartes, de gérer des signets, ou bien de visionner simultanément des images provenant de serveurs différents.

Mirador est testé actuellement en France, notamment par le projet Biblissima (Campus Condorcet, patrimoine écrit du Moyen Âge et de la Renaissance), qui propose une intéressante démonstration pour les amateurs d’archives et de documents anciens.

Les modules « IIIF Toolkit » pour Omeka Classic, de même qu’avec Omeka S « Image Server », « IIIF Server » et « Mirador Viewer » rendent possible la création d’un serveur d’image compatible, l’intégration de la visionneuse aux thèmes des deux versions d’Omeka.

OpenSeadragon : https://openseadragon.github.io/
API : https://openseadragon.github.io/docs/OpenSeadragon.html
Seadragon sur Wikipedia : https://en.wikipedia.org/wiki/Seadragon_Software

1. Fabrication d’images zoomables

Mais revenons aux fondamentaux. Une image tuilée ? Quésaco ? Une image haute résolution est transformée automatiquement en une grande série d’images de plus petites dimensions appelées « tuiles » (tile en anglais), de forme carrée, localisées dans une arborescence normalisée. Cette transformation peut être faite de manière programmée (C++, PHP, Python, PERL, .NET, Node.js) ou bien à l’aide de logiciels de bureautique libres, tels que Deep Zoom Composer (Microsoft) ou bien MapTiler (Klokan Technologies). OpenSeadragon accepte les formats de tuiles DZI, TMS et OSM.

Le format DZI (Deep Zoom Image), spécification XML maintenue par Microsoft : Lien
Le format TMS (Tile Map Service), spécification développée par l’Open Source Geospatial Foundation : Lien
Le format OSM (Open Street Map) : Lien
Créer une image zoomable de différentes manières pour OpenSeadragon : Lien

2. Affichage des images

Dans un document HTML, la bibliothèque OpenSeadragon est appelée de manière classique à l’aide de la balise <script>. Le chemin de l’image est spécifié en javascript et de multiples options s’offrent au développeur, bien documentées et complétées d’exemples.

Code HTML, OpenSeadragon API, Getting Started : Lien

3. Normalisation

L’objectif du consortium à la base de l’International Image Interoperability Framework (IIIF) est de fournir les spécifications rendant aisé la vision et le partage d’images ou de fragments d’images en haute résolutions, de même que des métadonnées et des outils rendant possible la recherche d’informations textuelles. IIIF désigne à la fois une communauté et un ensemble de spécifications techniques dont l’objectif est de définir un cadre d’interopérabilité pour la diffusion et l’échange d’images haute résolution sur le web. Le cadre normatif de IIIF définit des interfaces de programmation applicative (API) communes qui fournissent une méthode standardisée de description et d’accès aux images sur le Web, ainsi que l’exposition de métadonnées descriptives et structurelles nécessaires à la présentation d’un document numérique dans une interface.

International Image Interoperability Framework (IIIF) : Lien fr, Lien en

4. Quelques liens

Quelques sites et pages :

Une communauté de bibliothèques nationales et universitaires : http://iiif.io/community.html
DZI (Deep Zoom Image), Microsoft : https://msdn.microsoft.com/en-us/library/cc645077(v=vs.95).aspx
TMS (Tiled Map Service), Open Source Geospatial Foundation : https://openseadragon.github.io/examples/tilesource-tms/
IIIF (International Image Interoperability Framework) : http://iiif.io/ http://doc.biblissima-condorcet.fr/introduction-iiif
Éco-système et panorama des visualiseurs : http://doc.biblissima-condorcet.fr/ecosysteme-et-panorama-des-visualiseurs

Démos :

Un journal à la Bibliothèque du Congrès avec OpenSeadragon : Lien
Régis Robineau (Biblissima) : Une Introduction à IIIF : Lien
Hébergement d’images haute-résolution au format IIIF : Lien
Bibliothèque de Cambridge avec Mirador, les papiers de Newton transcrits en version diplomatique : Lien
La visionneuse Mirador : Lien, démo : Lien
Une démo de Mirador à Biblissima : Lien

Sur Omeka Classic et Omeka S :

IIIF Toolkit (Omeka Classic), module officiel : Lien
Mirador Viewer (Omeka S), intègre la bibliothèque javascript mirador : Lien
Diva Viewer (Omeka S), intègre la bibliothèque javascript légère diva.js : Lien
IIIF Server (Omeka S), transforme Omeka S en serveur IIIF interopérable, propose OpenSeadragon en visionneuse, module officiel : Lien
Image Server (Omeka S), est un module qui intègre les spécifications IIIF et un serveur d’image simple, capable de traiter et partager de manière instantanée des images de toutes tailles et de divers formats (pdf, audio, video, 3D…). Il fonctionne conjointement depuis 2020 avec le module parent Iiif Server : Lien

5. Un tutoriel sous windows

Comment rendre zoomable une image personnelle ? Voici un tutoriel qui va vous permettre de tester OpenSeadragon et de réaliser vous-même des images zoomables, en très haute définition. Vous disposez d’un serveur local et d’un PC sous windows.

Téléchargez la version zip d’OpenSeadragon ici.
Dézippez le fichier.
Copiez le répertoire « openseadragon-bin-2.0.0 » sur le répertoire du serveur local en le renommant « openseadragon ».
Convertissez votre image haute résolution. Téléchargez Deep Zoom Composer.
Installez Deep Zoom Composer et ouvrez un nouveau projet avec « New Project ».
En haut à droite, ajoutez une image avec « Add Image ».

Cliquez en haut sur « Compose » et glissez l’icône de votre image en bas à gauche dans le panneau du milieu. Peu importe où.

Cliquez en haut sur « Export », entrez à droite le nom du répertoire d’export dans « Name » et le lieu dans « Location » (le répertoire du serveur). Sélectionnez « Export as a composition (single image) ».

Cliquez sur « Export » en bas à droite.
Cliquez sur « View Image Folder » pour bien repérer la localisation du fichier « dzc_output.xml » à paramétrer dans le code sous le nom « tileSources ».
Le répertoire « dzc_output_files » contient l’image convertie.
Adaptez et insérez le code dans votre page HTML, visualisez dans votre navigateur favori et voilà.

Une version de Virgile imprimée en 1561 et annotée (bibliothèque d'Harvard), visible avec OpenSeadragon — Une version de Virgile, imprimée en 1561 et annotée (bibliothèque d’Harvard), visible avec OpenSeadragon/Mirador, Biblissima (Campus Condorcet)

Conclusion

OpenSeadragon est une bibliothèque javascript libre développée et maintenue par Ian Gilman et utilisée entre autres par des organismes du type université, bibliothèque nationale, laboratoire de recherche. Il est tout à fait possible d’envisager l’usage de cette fort intéressante bibliothèque javascript dans une multitude de domaines scientifiques, non seulement en humanités numériques, mais encore en agronomie, études sur l’environnement, médecine et biologie (microscopie), physique, astronomie, tout domaine dans lequel des images en haute résolution sont nécessaires.

Des services dans le cloud pourraient être créés, susceptibles de faciliter la gestion d’images de ce type, analogue au maintenant disparu Zoom.it de Microsoft. Des modules DZI/OpenSeadragon existent déjà, susceptibles d’augmenter les possibilités des gestionnaires de contenus tels que Drupal ou WordPress, ou bien des gestionnaires de documents et d’archives tels que Omeka, DSpace, Pleade.

La technologie libre OpenSeadragon semble prometteuse dans l’objectif de rendre accessible et aisément manipulable des images en très haute résolution. Des technologies libres potentiellement équivalentes sont pour la partie javascript Leaflet (Open Street map), OpenLayers, PanoJS. D’autres systèmes libres semblent plus difficiles à mettre en œuvre comme IIPImage, digilib. Certains systèmes propriétaires peuvent être cités, tels que jQuery Image Viewer, zoomify, ajax-zoom, shockwave-flash (Adobe) ou gigapan (NASA, Google). Finalement, des bibliothèques javascript comme StoryMap JS permettent de raconter des histoires, incluant en illustration une image au format gigapixel.