Using #Firebase Hosting with Open SeaDragon

Open SeaDragon is an open source, web-based viewer for high resolution,
zoomable images implemented in pure javascript. It comes with a number of tools for preparing your images to use zooming. It makes for a perfect scenario to demonstrate how powerful and easy using Firebase Hosting is for building a web site, too!

So, consider this image. It’s 10,000 x 10,000 pixels — or 100 mega pixels in all. That takes a lot of time to download, and it won’t fit on your screen.

Now look at it here. You instantly see the image because you aren’t downloading all 100 million pixels. Open SeaDragon is rendering it at the appropriate zoom level for your browser. Before uploading to that site I sliced the image into thousands of tiles at various zoom levels using the deepzoom.py tool.

Using this you can then create a set of tiles for the image using a simple python script like this:

 

This will generate a set of subfolders with the image sliced into tiles at different zoom levels. Something like this:

The script also creates a dzi file, where dzi is ‘Deep Zoom Index’, basically the file that you points the open seadragon libraries atm and from there it figured out the correct tiles based on your current zoom level and where you’re panning around the image.

Now all you need is an HTML file to embed that in!

When you create a new project in Firebase Hosting, you’ll have an index.html created for you. To see the steps, check out this video:

Your HTML file will look like this when done:

And that’s all you need! Put the tiles and the DZI in your Firebase folder, and then use the ‘firebase deploy’ command — everything will be uploaded and you should be serving zoomable images right away. For a bit of fun, if you’re using my image — you can see just how resolution the picture is by zooming in on the girl’s eye…you can even see a reflection of what was behind the virtual camera that was used to render this scene!