What if one nice big image could be uploaded and, when viewed at any size, only the necessary bytes get downloaded?
Created 2010 October 6. Updated 2011 October 15.
Say a single 3600×2400 px 1 MB imaginary One Web image is uploaded. A browser when encountering <img src="one-web.img" width="60" height="60" /> could theoretically download 3 KB to display it. Then later encountering <img src="one-web.img" width="480" height="320" /> the browser could download an additional 30 KB to display. Altogether only 33 KB of a 1 MB image would have been downloaded, and displayed in two sizes.
Pretty much the same as before with a nice big One Web image being uploaded. The image is displayed:
<img src="one-web.img" style="max-width:100%;height:auto;" width="600" height="200" />.
On a nice large screen the containing column is 600 px wide and as such the browser downloads 40 KB to display. On a nice small screen the column is only 280 px wide and the browser downloads only 20 KB. The small screen is rotated to landscape and the column increases to 400px; the browser could download an additional 8 KB and update the image.
To reduce image duplication on the web and save data/bandwidth.
For example, a news article summary with thumbnail, which links to the full article with large version of the photo. The thumbnail data is not used in the large photo. And like-wise if the large image was downloaded first, then its data is not used for the thumbnail. This duplication wastes data.
SVG? A new image format? Is it possible? Half wondered if Progressive JPEGs could bridge the gap but could a browser control how much is downloaded? Is there such a thing as a progressive SVG?
If it could be done for images, what if it could be done for video too?