[est]

Is it possible to serve one image file of progressive encoding and display different size on different media conditions?

As a hack I would just put the blob offset in the URL as part of file name, and use js to load those images.

For example:

filename.1000-120w.3000-240w.5000-360w.jpg

means the 0-1000 bytes will get you 120w image, 0-3000 bytes will get you the 240w image, 0-5000 bytes will get you the 360w image, and load full will get you the original image. Make an http request with a Content-Range header and render the result with canvas or something.

[youngtaff]

The ideal of an image format the can progessively support different sizes was discussed back when solutions to the responsive image issue were first being sought out e.g. https://blog.yoav.ws/posts/responsive_image_container/

JPEG 2000 already offers the ability to encoded multiple sizes of an image in the same file https://www.verypdf.com/pdfinfoeditor/jpeg-jpeg-2000-compari...

I think there was some hope that JPEG XL might be able to meet this need too

[lobsterthief]

What you’re describing is sort of how sprites used to work. They aren’t used as much anymore.

Basically, a bunch of small images would be combined into a single image (like a grid), and then that single image would be loaded and would use background-size and background-position to display the image in a background-image. One request for a large number of small images. This isn’t used as much now that SVGs are so widely supported and can be themselves inlined.

[CGamesPlay]

What problem does this solve?

[est]

s3 storage cost, html size and CDN traffic cost?

Cache one file to serve image of multiple sizes.

[rokkamokka]

But at that point, since you're not optimizing for filesize (everyone fetches every size), you might as well just provide the highest quality version only

[est]

> everyone fetches every size

Nah, by using the Content-Range header, you can download partition of the file and render lower resolution image.