Scalable images for progressive web
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
- Firstly you can display different versions of an image in varous places on your website. It is common to have generate image thumbnails of a smaller size to be used as a preview. With scalable images you do not need to generate and store image thumbnails separately - you already have them inside, just specify you want a smaller dimentions here and bigger there and you have it.
- Zoom into image functionality. Often website users can click or hover over an image to see a higher quality version. How it is done - a different separate version of the image is loaded. With the scalable images you can load only the enhancement layer (that is of a much smaller size than the whole image) to produce a better quality image from the same file and so also again you do not need to generate and store separately various image versions.
- Progressive download. Scalable image can be loaded and displayed progressively so that the lower quality version shows up as soon as the image data for this layer is loaded. And you are in a full control, it is your choice to display progressive or to show the final version, or you can let your website users to decide.
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
How to control scalable images
|src||Source of the image.||None|
|level||Level to decode scalable image to with zero indicating the lowest quality version||Highest level i.e. full decoding|
|progressive||Whether to display image progressively when data comes in||1|
|parts||Array of sizes of the scalable image levels. This is how the image element knows how much data to load for each level||None|
|levelhq||By 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 complexity||0|
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.