Scalable images for progressive web

Preview settings:

What are scalable images ? - these are images that can adapt itself to different situations. What is progressive image loading ? - it is when an image quality grandually enhances as more of the image data is being loaded. Our image format codes mutliple dimetions in a single image file with higher dimetions based on the lower dimetions that is the image file does not exibit redundancy having at the same time many versions of the image and these versions can be loaded and displayed progressively. Moreoever our scalable images are decoded in JavaScript which means you have all the control over what is loaded and how it is displayed.

Interested ? - let's upload an image to see how it works

Drag and drop your image - our app will convert it to a fully scalable responsive web image.


What can you do with scalable images

Examples of scalable images uses

Thumbnail and full image from a single file

Here is a thumbnail generated out of the scalable image

And here is the same image displayed in full resolution

Click to enlarge demo

Progressive vs single display mode

Here the images are loaded slowly simulating slow connection for you to clearly see the difference

Click here to load scalable image progressively

Click here to load scalable image in final display mode

How to control scalable images

Scalable images can be fully controlled by a few parametres set either as attributes in html markup or as properties in JavaScript.

ParametreDescriptionDefault value/behavior
srcSource of the image.None
levelLevel to decode scalable image to with zero indicating the lowest quality versionHighest level i.e. full decoding
progressiveWhether to display image progressively when data comes in1
partsArray of sizes of the scalable image levels. This is how the image element knows how much data to load for each levelNone
levelhqBy default every level is optimized if displayed ( i.e. in progressive mode ) which needs some resources. By setting this to the highest level you can trade between intermidiate display quality of the image and decoding complexity0

More scalable examples ( click to zoom in )

Fully scalable video

And where there is an image, another one there comes video. Check out our Fully Scalable Video project based on the same technology.