One more thing thats nice with <picture> and <source> and <img> over <img> with srcset is the former can responsively change images, while some browsers (Chromium based IIRC) will assume srcset corresponds to the “same looking” image.
IIRC Chromium based srcset will never “downsize” to a smaller image, whereas <source>’s media is like a real media query.
I wish both srcset and <source> elements wouldn't be so redundantly verbose by forcing you to specify the full (relative) URL for each image when they usually only differ by a small part specifying the resolution or format. Sure, transfer-encoding will mostly nullify the overhead but it's still annoying when editing the HTML manually.
[−]theandrewbailey · 2026-08-21 Fri 15:05 UTC ·
link
Ah, don't edit the HTML manually. Name your images brain-dead predictably, and use a script with some regex.
My blog has some code that searches for <img> tags just after markdown conversion, then uses the src to find similarly named images (image×1.jpg, image×2.jpg, etc.) to use in <source> tags.
IIRC Chromium based srcset will never “downsize” to a smaller image, whereas <source>’s media is like a real media query.
Use if you want jumpscares at specific sizes lol
My blog has some code that searches for <img> tags just after markdown conversion, then uses the src to find similarly named images (image×1.jpg, image×2.jpg, etc.) to use in <source> tags.
https://github.com/theandrewbailey/gram/blob/master/gram/src...
https://github.com/theandrewbailey/gram/blob/master/gram/src...