Responsive Images - Just an Idea

The basic idea is to extend progressive JPEGs with an APPn marker, which contains the byte offsets for 1/2 resolution, 1/4 resolution, 1/8 resolution, and so forth.

With that information at hand, a browser could easily stop when it got enough bytes to display the image at the desired size. If the image needs to be displayed at a bigger size at a later point, the browser can resume the download instead of starting all over again. (If the server supports range requests, that is.)

An extension like this would be completely backward compatible. A browser which doesn't know about this extension would simply download the complete image.

For the sake of simplicity, the JPEG file was simply chopped up with a hex editor. I didn't do this correctly. Surprisingly, it still works fairly well.

Complete File (73,315 Bytes) at 100% size

Comparison Between Full Size and Truncated Files

full file at 50% size (73,315 Bytes) ~50% of the file (35,600 Bytes)
full file at 25% size
(73,315 Bytes)
~25% of the file
(18,048 Bytes)
full file at 12.5% size
(73,315 Bytes)
~12.5% of the file
(8,512 Bytes))

Truncated @ Actual Size

Complete File (73,315 Bytes) - for Reference

~50% of the File (35,600 Bytes)

~25% of the File (18,048 Bytes)

~12.5% of the File (8,512 Bytes)

[Image CC by-sa]