You might enjoy https://addons.mozilla.org/en-US/firefox/addon/load-reddit-i...
Of course, I sometimes end up with a zoom mess where the page is zoomed, and then pinch zoomed.
Remember when Google used to be cool and was basically just making simple tools that were on the web? I have not seen that philosophy of engineering come from Big Tech in many many years.
[1] https://ashleemboyer.com/blog/why-you-should-use-px-units-fo...
How does it know where to get the CSS or picture element from to manage that? Maybe it keeps it from the other page. Does this happen in all browsers? I don't think I've seen this in Firefox.
When you navigate to https://i.redd.it/dl34o62azctc1.jpeg, Chrome sends (I'm doing this on Chrome because I think I've made some hacks in Firefox to fix this)
GET https://i.redd.it/dl34o62azctc1.jpeg
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
and Reddit responds with a redirect to https://www.reddit.com/media?url=https://i.redd.it/dl34o62az....But when the browser loads the same image from an <img src="..."> tag, Chrome sends
GET https://i.redd.it/dl34o62azctc1.jpeg
Accept: image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8
and Reddit responds with the actual image.This article clarifies a lot of things for me so thx for that.
People often just dont understand srcset/sizes and try to do too much and make some kind of media queries logic instead of leaving all to browser.
Optimizing images programmatically is easy. Converting them between PNG and JPG programmatically, along with determining when such a conversion should happen, is very difficult.
It's a huge language. There are so... many... properties.
Would love to know the rationale.
[1] https://datatracker.ietf.org/doc/html/draft-ietf-httpbis-cli... [2] https://wicg.github.io/responsive-image-client-hints/#sec-ch...
Let me load the page quickly if the doggo is just being used as an aside to the main content. Let me click on it to get the full raw image if I'm so enticed by that over the shoulder glance.
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.
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
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.
Cache one file to serve image of multiple sizes.
It has the `Accept` header as a guide to what image formats the client supports, and with Responsive Image Client Hints[1], it can opt into more info from the client (device pixel ratio, image layout width, viewport width).
Without relying on server features, `<picture>` with `<source type='…'>` is the way to serve images in newer formats without breaking in less capable browsers.
It’s interesting that `image-set()`, the CSS sort-of counterpart to `<picture>`, bakes in the media type along with the resolution in a single syntax [2]. Which you could potentially see happening in `srcset`, but it makes the descriptive/prescriptive boundary a bit blurry, so it would complicate things IMO.
[1]: https://wicg.github.io/responsive-image-client-hints/ [2]: https://developer.mozilla.org/en-US/docs/Web/CSS/image/image...
<picture>
<source srcset='…' sizes='…' type='image/avif'>
<source srcset='…' sizes='…' type='image/webp'>
<img srcset='…' sizes='…'>
</picture>
If this is what you mean, maybe it would be better to include in the article?If it's not too much work, I think it would be good to add to the article for completeness :)
1. decide if I want to use any of the newer image formats. If so, each needs its own `<source type=''>` in a `<picture>` element, front-loading the most efficient formats. 2. decide if I want to serve different densities for the image.
For specifying densities, width descriptors + `sizes` attribute will always compute to a more useful effective density than density descriptors, if you can get `sizes` in the ballpark of how the image is actually laid out.
For lazily-loaded images, `sizes=auto` will do that for you, when it becomes universally supported.