top | item 14826704

(no title)

kig | 8 years ago

Hi, author here. Wow, this was a while ago, I'd forgotten I wrote that.

There's a version of this using a directory of images and loads in a bigger picture if you zoom in: http://fhtr.org/multires/ (Note that, yes, it'd be better to have a tile map for large resolutions and load in just the visible part of the image. And dump the hi-res tiles when zoomed out.)

SPIF's intention was to throw out a "it'd be cool if browsers supported something like this natively"-proposal, as the browser knows best what pixels of an image are needed for sharp rendering. For the webdev, the experience would be to just put the image on a page, rest assured that it looks good. Like with SVG.

Yes, loading JPEG2000 / progressive JPEG with stream truncation would be nice.

Images don't load on iOS? Probably some silly bug in my code.

Images can't be saved with right-click? That's probably due to using revokeObjectURL after loading the image from a blob.

discuss

order

ktta|8 years ago

How does it compare with FLIF?[1]

[1]: http://flif.info/

kig|8 years ago

The biggest difference is that FLIF is an image encoder, SPIF/Multires is a container format.

So you can cram lossy 20x compression ratio JPEGs into Multires, optimized for each resolution. Or you could put a simplified SVG for low-res use, and detailed one for zoomed-in detail. Or hack it a bit and use Multires for loading the right-resolution video for your page. The format is just a container that tells the browser where to find the assets for each resolution.

FLIF is a lossless bitmap image encoder with progressive resolution enhancement.

TL;DR FLIF is PNG++, Multires is automatic srcset.