RWD Podcast Episode 9: Responsive Images
Listen to episode
This week we’re covering two articles relating to responsive images so I thought it would be a good time to take a bit more of a deep dive look into what is current possible.
The articles themselves in this weeks newsletter are great. First we’ve got a great interview with Yoav Weiss and Marcos Caceres hosted by Responsive Images Community Group (RICG) member Mat Marquis.
Secondly there’s an IndieGoGo campaign on at the moment allowing you to pick up a RICG t-shirt designed by @hellogeri.
Responsive Image Approaches
There are a few options you have when approaching responsive images for your site. Each of them are valid in their own right, it’s up to you to look at your current implementation, resources, hosting situation, customers etc etc and decide which one is right for you.
Even within each of these options/techniques there are a few implementation options as well. We’re full of options today.
Nothing at all
Nothing at all is what you’re doing now, so is it so bad to continue to do so? (the answer to that question is YES, it is so bad to do that).
But while you might not want to look at changing your approach to the html markup or how you’re going to be serving your images from the server, you can at least improve upon the image file itself.
Optimise all your images for a mid size
For this approach lets pick a random number of 600px. We’re now going to batch process all of the images on our site to be 600px wide. There are many batch processing methods and the one I use most frequently comes with photoshop but there’s other tools available.
* you should note that this approach is done to avoid serving up 3000px images to people that are only going to see them on small screens.
As part of the batch resize approach you should also set the quality of the image to somewhere between 60-80. This will depend on how chrisp you need your images and it is very much a personal taste.
Once you’ve got all your images to a reasonable size it’s time to run them through a lossless compression tool. My favourite tool is Image Optim
Optimise all you images for Retina.
This is almost an opposite approach to the one above. Rather than physically resizing your images down you want to get the
Research. Super large images.
Blurr images
Polyfill
- Take a proposal. Implement that but pollyfill it with JS.
- Already do this with html5shiv, respond.js
Picture Fill
https://github.com/scottjehl/picturefill (scott Jehl) <span> tags.
SRCSET
Wikipedia: https://github.com/borismus/srcset-polyfill – downside is the first image is still loaded.
Retina.js
Serves up small file first, replaces it with apples prescribed @2x modifier file name. Files need to be named appropriately.
http://jquerypicture.com/
same as above, but works on a Figure tag and with <picture> and <source> tags but not really recommended.
Server Side
Adaptive Images (Matt Wilcox)
ReSRC.it
http://www.resrc.it/
Responsive.io
https://responsive.io/
