Exploring reading SZI files from endpoints using ranged fetch requests.
This is a prototype to help understand reading SZI files with OpenSeaDragon. It's written in SvelteKit but really, if you understand HTML/CSS/JS, you are in a good place. /src/routes/+page.svelte contains most of the front-end; src/lib/szi_reader.ts contains the SZI parsing code.
Node 22+, pnpm
pnpm installStart a development server:
pnpm run dev
# or start the server and open the app in a new browser tab
pnpm run dev -- --openIt's a single-file variant of a Deep-Zoom Image (DZI) file - a way of turning large images into tiles, much like slippymaps. It takes the DZI directory structure, and wraps it in an uncompressed zip. It's very important it's uncompressed.
Then, because we can request a range of bytes in a file over HTTP, we can read those individual files in the client.
Tools using libvips can create these files easily, if you specify an output format with the extension .zip when you tile them. For instance, using the [sharp][sharp] library:
await largeImage.jpeg().tile({ size: tile_size }).toFile('output.szi');(You can also use a .zip extension to trigger the compression inside sharp/libvips)
The file can have any name or extension you like.
Right now, it's important that the place you host your szi file returns an accurate content-length header when asked for a HEAD request. S3 and compatible hosts do this, for instance. In future, it'd be good to be able to manually override this.