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.

Original image

Comparison using small dimensions

Comparison using large dimensions

Now you will see the same images as before, but resized to larger dimensions. Hover the image to switch from the low-compressed image to the down-scaled and highly compressed. Note that this technique works better for certain images, and some differences between images are better perceived on high resolution screens.

Low compression, up-scaled

High compression

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