Something I’ve been grappling with for a while is a good solid approach to loading the correct image at the correct screen size in a responsive design. This is hard one lots of people have been working on. Mainly because using an image tag means unrequired images are loaded before you have a change to change the src attribute, and there isn’t a semantic alternative available to the img tag (yet).
So what we need is a clean easy to use approach, that is semantic and can be progressively enhanced, is responsive, and that works across all browsers on all types of devices. Here’s the approach I will be following in the next few posts:
1. Consistently detect the contents of noscript tag
2. Append an appropriate img tag to the markup for script-enabled browsers
3. Change the image based on a call to matchMedia and the resulting MediaQueryList
4. Bonus: add support for Google’s webP format