11–20 of 47 posts
This article clarifies a lot of things for me so thx for that.
I have no idea why browsers moved away from providing the DPR (device pixel ratio) header on media requests so one could continue using the sensible and simple whilst the server could return the correct images on its own. 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...
I have no idea why browsers moved away from providing the DPR (device pixel ratio) header on media requests so one could continue using the sensible and simple whilst the server could return the correct images on its own. Would love to know the rationale.
Looks like the verbose approach would be the most advantageous for backwards and forwards compatibility
Having the server decide the image format based on the accept header is simpler. Services like https://imagekit.io/ (no affiliation) can do that for you.
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, `` with `` 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 ``, 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...
To be honest ... this is IMHO by far one of the most complicated thing in the whole webdev area. I don't get it why ppl complain about how difficult CSS is ... but to foresee how an image behaves and find a good balance between size and file size is a hart thing to juggle with. 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.
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.
One frequent unpleasant side-effect of responsive design, is sites that resize themselves when you try to zoom the page. For images, this sometimes turns bizarre: If you try to zoom the current webpage to more clearly see details of an image, the web page will try to "help" you by resizing the image to continue to fit in your viewport. The net result is, that the image often gets even smaller when you try to zoom (be…
[1] https://ashleemboyer.com/blog/why-you-should-use-px-units-fo...
To be honest ... this is IMHO by far one of the most complicated thing in the whole webdev area. I don't get it why ppl complain about how difficult CSS is ... but to foresee how an image behaves and find a good balance between size and file size is a hart thing to juggle with. This article clarifies a lot of things for me so thx for that.
It's a huge language. There are so... many... properties.