Make Your Mosaic A Deep Zoom Image
You’ve completed your mosaic and you want to share it with others at full resolution but the file is enormous. In this guide I will show you how to create a .dzi file (deep zoom image) from a high resolution image and how to use it on your website using OpenSeadragon.
Installing libvips
Libvips is an open source image processing library that you will use to create a DZI from a TIF.
Windows
Download the latest binaries. At the time of writing vips-dev-w64-web-8.12.2-static.zip is the latest. Extract the zip to your C: drive and rename to vips.
Next you need to tell Windows where vips.exe is by adding it to PATH. Press the Windows key and type environment and select Edit the system environment variables.
Edit the system environment variables.
Select the Environment Variables... button at the bottom of the window.
At the bottom under System variables, find PATH, select it, and press the Edit button.
Select the New button and a blank entry will be added to the bottom of hte list. Enter C:\vips\bin. This adds this directory to the PATH system variable. Now when you type vips in the command line, Windows will search C:\vips\bin for an executable named vips.exe.
Add vips directory to PATH
Open a command line and type vips and you should see the built-in help.
Vips is found and runs
Linux (Ubuntu)
Libvips is available through apt.
1
sudo apt install libvips-tools
Creating the DZI
In PixInsight export your completed mosaic as an 8-bit TIF. 16-bit will work but the images that make up the DZI are 8-bit JPG so the extra file size will take longer to convert.
Export as 8-bit TIF
Open a command line and navigate to where you exported your image and convert the TIF to a DZI.
1
vips dzsave "Heart and Soul Mosaic Watermarked For Web.tiff" heart_soul
By default the tiles are JPG with 75% quality. You can increase the quality (and size) of the tiles with the following command:
1
vips dzsave "Heart and Soul Mosaic Watermarked For Web.tiff" heart_soul --suffix .jpg[Q=90]
You should now have a file named heart_soul.dzi and a directory named heart_soul_files. These two items together are the mosaic. The dzi is metadata about the image and the directory contains the image tiles.
Using OpenSeadragon
OpenSeadragon can view many kinds of large images and the viewer can be heavily customized. I will show a simple example on how to view your dzi locally.
Create a new directory and move heart_soul.dzi and heart_soul_files into the new directory.
Download the latest openseadragon and extract it into the new directory. Rename the openseadragon-bin-x.x.x directory to simply openseadragon.
Create viewer.html with the following:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<style>
#openseadragon1 {
width: 800px;
height: 600px;
}
</style>
<script src="openseadragon/openseadragon.min.js"></script>
</head>
<body>
<div id="openseadragon1"></div>
<script type="text/javascript">
OpenSeadragon({
id: "openseadragon1",
prefixUrl: "openseadragon/images/",
tileSources: "heart_soul.dzi"
});
</script>
</body>
</html>
Due to security implications, modern browsers will no longer load local files. You can read more about this here. In order to get around this you must run a local webserver. The simplest way to do this is to install python and run python -m http.server from the directory that contains viewer.html. Then you can browse to http://localhost:8000/viewer.html and see your image!
I have done additional customization to the viewer for alexhelms.com, but your viewer will be similar. Check out the openseadragon documentation to see what kind of customizations you can do.