4 ms·

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 of

by est 3y ago

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.

CGamesPlay 3y ago
What problem does this solve?
- est 3y ago
  s3 storage cost, html size and CDN traffic cost? Cache one file to serve image of multiple sizes.
  - rokkamokka 3y ago
    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 3y ago
      > everyone fetches every size Nah, by using the Content-Range header, you can download partition of the file and render lower resolution image.
lobsterthief 3y ago
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.
youngtaff 3y ago
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/ 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-comparison.htm 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

by est 3y ago

CGamesPlay 3y ago

What problem does this solve?

est 3y ago
s3 storage cost, html size and CDN traffic cost? Cache one file to serve image of multiple sizes.
- rokkamokka 3y ago
  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 3y ago
    > everyone fetches every size Nah, by using the Content-Range header, you can download partition of the file and render lower resolution image.

lobsterthief 3y ago

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.

youngtaff 3y ago

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/ 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-comparison.htm 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