Compressive Images Demo

This is a demo of the technique known as Compressive Images, mentioned in my blog post Image optimization: Lossy, lossless and other techniques. It consists of generating a large high-compressed image as opposed to multiple images to accomplish images that are flexible enough to be shown in different resolutions and pixel densities.

This demo uses Drag&Drop, canvas and File API. Drag and drop your image to see it in action, or scroll down to see a sample image. Try to use an image with at least 1024x768 pixels.

Drop your image here

Example

Here you can see two images. The first one has a size of 400x300 and has been saved with a compression quality of 90% (261kB). The second one has a size of 1024x768 and compression quality of 0 (258kB).

You will see these images scaled to different dimensions, so you can see how they look like.

400px wide

600px wide

800px wide