I have a simple page where I occasionally post links to web things I make. The design couldn't be much simpler: fixed width images (I know, I know) and a short description of what each thing does.
srcset, I don't remember seeing any talk of
source at the time but it was probably being discussed) were still in flux. And, AFAIK, not supported in most browsers so that would have meant I needed a polyfill.
Here we are a couple years later and responsive images are well supported. The JS worked, but, in the context of current browsers it:
- re-implements something the browser does without JS
- relies on JS to run before downloading any images
Both should be avoided but that second bullet is the one that really hurts– you'd always see placeholders where the images should be when visiting the page.
I re-read the Responsive Images in Practice (OK fine, read it for the first time) and this quote:
srcset if you’re lazy, picture if you’re crazy™ –Mat Marquis
summarizes where I ended up.
The new version of my page uses
src attribute derived from the
id, hence the stuttering when the page loaded):
compared with the new:
<img src="images/arctic-ice.png" srcset="firstname.lastname@example.org 2x">
It's more verbose but the trade-off is significant when looking at page load times. With JS hack, the page was taking roughly two seconds to load. Using srcset, that's down closer to one second. Using some fuzzy math, that's a ~50% faster page load!
And here are dev tools screen shots showing the improvements:
Saved an http request, I have less JS to fiddle with and the right DPI image (and only the right DPI image) is always sent.