Your website looks like it's from '06. Your images look blurry when those kids pull up your site on their fancy new Retina MacBooks and iPad Airs. What do?

  1. Wait for srcset to come out
  2. Implement srcset-polyfill with code that isn't production-ready
  3. Send your users images at 2X resolution, even if they're on mobile
  4. Use BBC News' imager.js

You should be using imager.js. Here's why:

  • It's production-ready—the BBC uses this on their sites
  • It's documented very, very well.
  • It's smart—it lazy loads specific images based on the viewport properties, saving your mobile users time and bandwidth
  • Your users will love you for having a fast-loading site (with pretty Retina images, if they're into that).

Go check out some examples and get started!

Appendix: OK, I'm using imager.js. Now what?

Start generating your images automatically from source. Ain't nobody got time for doing that by hand.

grunt-responsive-images will do the heavy lifting for you. Yay for automation!