Skip to content

Tiled Image

September 29, 2023
April 8, 2016

Mipmap - Wikiwand

When viewing extremely large image (maps, medical and astrological images), it's more efficient to:

There are many formats that specify the file structure and file name convention to archive these two goals.
There are also many viewer to render these images on browser that provide different features.

Viewing Large Images - OpenLayers, GSIV, ModestMaps, DeepZoom, and Python Β« Itinerant Source (from WaybackMachine)
Deep Zoom and others for displaying large images on the web

web-maps

iangilman/zooming: Resources for people interested in zooming technology. with dead links

Formats

OpenSlide

OpenSlide vendor neutral library for reading WSI
List of Known Properties
Virtual slide formats understood by OpenSlide

Adding a New Slide Format to OpenSlide

Deep Zoom Image

Deep Zoom is a standard by Microsoft. It allows users to pan around and zoom in a large, high resolution image . It reduces the time required for initial load by downloading only the region being viewed or only at the resolution it is displayed at.

Deep Zoom - Wikiwand
A deepzoom primer ( explained and coded).. – Jaime Rodriguez
Deep Zoom
Deep Zoom File Format Overview !important
Deep Zoom Schema Reference
About Deep Zoom Composer
Creating Zooming Images | OpenSeadragon

Inside Deep Zoom – Part I: Multiscale Imaging – RTFM / Daniel Gasienica
Inside Deep Zoom – Part II: Mathematical Analysis – RTFM / Daniel Gasienica
Inside Deep Zoom – Part III: Deep Zoom in Flash – RTFM / Daniel Gasienica

OpenSlide Python have built-in deep zoom support. See RunningDeepZoomServerOnApache Β· openslide/openslide Wiki for setting up an sample server.

TileSize is the effective content, each tile has a padding of Overlap pixels. So a non edge tile is has side length of TileSize + 2*Overlap.
Use 254 pixels as default tile size by gasi Β· Pull Request #359 Β· jcupitt/libvips (recommend tile size)
vips dzsave saves tiles with incorrect size because it ignores the overlap parameter Β· Issue #357 Β· jcupitt/libvips (fix overlap)

IIIF

Home β€” IIIF | International Image Interoperability Framework
Apps & Demos β€” IIIF | International Image Interoperability Framework
Technical Details β€” IIIF | International Image Interoperability Framework
Image API 2.0 β€” IIIF | International Image Interoperability Framework
Presentation API 2.0 β€” IIIF | International Image Interoperability Framework

IIPImage

Micrio - Ultra Resolution Storytelling
WebAssembly: Beyond the Browser
From JavaScript to WebAssembly in three steps

[1403.6025] Web-Based Visualization of Very Large Scientific Astronomy Imagery

Zoomify

thematic mapping blog: Creating a custom map tiling scheme for New Zealand’s seafloor
Zoomify PFF file format documentation Β· lovasoa/pff-extract Wiki

Does Zoomify work with Akamai and other edge servers?

WMS/TMS/EPSG:4326

The OSGeo group published Web Map Server and Tile Map Service specs for map viewing.

WMS also have API for FeatureInfo
epsg > EPSG home

Tile Map Service Specification - OSGeo Wiki
TilingStandard - OSGeo Wiki

Welcome to MapServer
TileCache, from MetaCarta Labs
FeatureServer


Tools

Help:Zoomable images - Wikimedia Commons

Dezoomify
lovasoa/dezoomify: Download images from websites using Zoomify, Deep Zoom (seadragon), and other zoomable image formats

Deep Zoom

Download Deep Zoom Composer from Official Microsoft Download Center
zoomhub/node-deepzoomtools: Node.js Deep Zoom Tools

Generators in Python usually requires Python Imaging Library (PIL).
openzoom/deepzoom.py
openslide-python/deepzoom_tile.py at master

Each folder is a layer, which contains tiles of side length (max of width, height) <= 2^N

LayerTile Resolution (Max)
12*2
24*4
8256*256
101024*1024 (1M pixels)
1416384*16384
1532768*32768 (1G pixels)
1665536*65536

Within a layer, files are named in {col}_{row}.{format} fashion:

  -----> x (cols)
| 0_0  1_0
| 0_1  1_1
| 0_2  1_2
v
y (rows)

Zoomify

Zoomify HTML5 Express
asfez/CsZoomify: A c# library to create Zoomify compatible tiles from big images.
http://tools.wmflabs.org/zoomable-images/zoomify.php
http://tools.wmflabs.org/zoomable-images/zoomify-form-source.php
http://tools.wmflabs.org/zoomable-images/zoomify-source.php
moravianlibrary/opentiler: OpenTiler is a desktop application which generates Zoomify tiles
sebastianhohns/JImagePyramide: Convert images to a image pyramide file format (usable by Zoomify and Openzoom)

lovasoa/pff-extract: pff (zoomify single-file image format) to jpeg converter

zoomify_dl
Xuth/zoomify_dl: script to download and stitch resolution zoomify'd images (perl / perlmagick)

valgur/dezoomify: Download and losslessly untile Zoomify images python
fun-dac/daconv: Daemon script for converting Zoomify format python
dbalcomb/dezoomify: Reverse Zoomify livescript

VIPS

VIPS is recommended for convertion to avoid loading the entire image to RAM.
vips memory use scales with image width, not number of pixels, so it can process very large images without using much memory.
It supports various input format, including OpenSlide (requires libopenslide at build). It can perform many operation on the image. The dzsave operation supports deep zoom (requires libgsf at build),zoomify and google layout.
pyvips – Image processing with libvips β€” pyvips documentation official Python binging
sharp - High performance Node.js image processing is VIPS's Node binding

VipsWiki
VIPS from the command-line: VIPS Reference Manual

libvips and nip2
Tips and tricks for vipsthumbnail
Profiling libvips
Making DeepZoom, Zoomify and Google Maps image pyramids with vips

VIPS can infer pipeline with extension, you can also pass options to the transform with:

# using dzsave as action
vips huge.svs mydz --layout google
# specifying jpeg saving option
vips huge.svs mydz --suffix .jpg[Q=90]
# using dzsave in pipeline (with .dz suffix)
vips extract_area huge.svs mypy.dz[layout=google] 100 100 10000 10000

MapTiler

Commercial with feature limited free version.

MapTiler - map overlay, cut map tiles for Google Maps, GIS layers and mobile apps – MapTiler
Features of MapTiler

Tiling schemes:
Open GIS WMTS / Open Street Maps / Google XYZ (top-left-origin)
OSGEO TMS (bottom-left-origin)

Coordinate systems – MapTiler

GeGL

GEGL a graph based image processing framework
babl babl is a dynamic, any to any, pixel format translation library.

Another image processing library.

Custom

Creating zoomable images using Graphics Mill and Leaflet


Viewers

Apps & Demos β€” IIIF | International Image Interoperability Framework

OpenSeadragon

openseadragon

OpenLayers

OpenLayers 3 - Welcome
OpenLayers 3 Examples features

OpenLayers 3 - OpenLayers Custom Build
Introduction | OpenLayers Workshop
OpenLayers 3 - Tutorials
OpenLayers 3 - Frequently Asked Questions (FAQ)
OpenLayers 3 API Reference - Index

Leaflet.js

Leaflet JS Bin

Using Leaflet.js with non-geographic imagery - Oliver Marriott
Deep Zoom Image with multiple views – Leaflet.js

React-Leaflet Β· βš›οΈ React components for πŸƒ Leaflet maps
How to use React-Leaflet - LogRocket Blog

thematic mapping blog: Creating a synchronized view of two maps or images with Leaflet source

thematic mapping blog: Showing Zoomify images with Leaflet source

Overlap handling

Custom Tile Rendering in Leaflet - Google Groups

leaflet-src.js (of 2012-10)

--- a/leaflet-src.js
+++ b/leaflet-src.js
@@ -2270,7 +2270,7 @@
 _getTilePos: function (tilePoint) {
   var origin = this._map.getPixelOrigin(),
-  tileSize = this.options.tileSize;
+  tileSize = this.options.tileSize - 2;

   return tilePoint.multiplyBy(tileSize).subtract(origin);
 },

This does not handle the edge tiles!!

IIPMooViewer

IIPImage Β» IIPMooViewer
ruven/iipmooviewer: IIPMooViewer is an advanced javascript HTML5 image viewer for streaming high resolution scientific images supports rectangular annotation, synced view, image blending

jcupitt/iipmooviewer fork that support experimental WebGL rendering (from author of VIPS)

Zoomify

The official viewer of Zoomify is a commercial product and less interesting.
Use the above OSS.

Zoomify HTML5 Enterprise

Zoomify Product Comparison
Zoomify Updates & Version History

Honorable Mentions

Universal Viewer source It uses OpenSeadragon and virtex3d over three.js

Free whole slide image viewer - PMA.start | Universal digital microscopy software