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 particulière doit être 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, notamment satellitaires ou 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 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 démonstration intéressante 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 et l’intégration de la visionneuse aux thèmes des deux versions d’Omeka.

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 et 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 avec la balise <script>. Le chemin de l’image est spécifié en javascript et de multiples options s’offrent au développeur qui son 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 :

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.

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

dzc-import
Appuyer sur Import

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

Appuyez sur Compose
Appuyez sur Compose

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) ».

Appuyez sur Export
Appuyez sur Export
  1. Cliquez sur « Export » en bas à droite.
  2. 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 ».
  3. Le répertoire « dzc_output_files » contient l’image convertie.
  4. Adaptez et insérez le code dans votre page HTML, visualisez dans votre navigateur favori et voilà.
openseadragon
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 qui exploitent des images en haute résolution.

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à, permettant d’augmenter les possibilités des grands gestionnaires de contenus libres que sont Drupal ou WordPress, des gestionnaires de documents tels que DSpace, Omeka, 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 s’avèrent 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). Des bibliothèques javascript comme StoryMap JS permettent finalement de raconter des histoires incluant en illustration une image au format gigapixel.

Zoom sans tuilage :

Votre commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l’aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google

Vous commentez à l’aide de votre compte Google. Déconnexion /  Changer )

Image Twitter

Vous commentez à l’aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l’aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s