21–30 of 47 posts
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.
So, the question remains: how do I supply various dynamic densities in different formats?
Well-written. Will def come back to this.
Well done! Having read the source documents a few times, I wish that your article existed before. It took me a while to wrap my head around the concepts and to get them to work properly.
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.
Very helpful! I will come back to read more deeply. But in general, what approach would you recommend?
1. decide if I want to use any of the newer image formats. If so, each needs its own `` in a `` 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.
So, the question remains: how do I supply various dynamic densities in different formats?
I haven’t explicitly mentioned it in the article, but `srcset` + `sizes` is a way to provide dynamic densities for one image format, then multiply that with one ` ` for each image format: 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 :)
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.
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…
You might enjoy https://addons.mozilla.org/en-US/firefox/addon/load-reddit-i...
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, an…