Fun fact: half the modern Web 3.0 or whatever version number it has now.. requires JavaScript.. to show images.

Yeah it's because using the picture tag isn't quite straight forward, but you need that for going with webp or jpg depending on what the browser supports. And the automation for high-res support both in webp and jpg. And the contained img as fallback for browsers without picture/srcset support.

On top of that, responsive images in CSS suck quite a bit because using max-width:100% and height:auto overwrites the static height, and that leads to nasty reflow when the images load.

To deal with that, you need two nested containers and the padding-bottom hack because padding-bottom refers only to the width while ignoring the max-width case.

And the reward is, WOHOOO, that you get what we always used to have using static width/height, before the need for responsivity: no reflow when loading the image!

So yeah, it is possible to have responsive images with no reflow just using HTML and CSS, but it's certainly more convenient to use JS.

@Fast-Nop don't forget about lazy loading ^^

@Wack Good point, especially when combined with endless scroll.

@Fast-Nop I see.. thanks for explaining :)

@theKarlisK the content column shouldn't be more than 65-70 characters width, and it really sucks to have to resize the window to get it legible.

If the layout is done correctly in (r)em instead of px, that works correctly even with zoom.