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 (because neighbour elements like text still grows).
Reddit is one of the sites guilty of this.
Worse, they even do it if you "open image in new tab".
I have surrendered on this, and instead just DOWNLOAD the image to disk, to then reopen it in a separate tab, to finally zoom it.. Sigh.
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.<p>This article clarifies a lot of things for me so thx for that.
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 <img> whilst the server could return the correct images on its own.<p>Would love to know the rationale.
I like the approach of displaying a smaller compressed version and enclosing the img in an a tag to link to the larger image.<p>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.
Is it possible to serve <i>one</i> image file of progressive encoding and display different size on different media conditions?<p>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.<p>For example:<p>filename.1000-120w.3000-240w.5000-360w.jpg<p>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.