So You Want To Make Your Images Responsive
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?
- Wait for
srcsetto come out
srcset-polyfillwith code that isn't production-ready
- Send your users images at 2X resolution, even if they're on mobile
- Use BBC News'
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!