RWD Podcast Episode 9: Responsive Images | Responsive Web Design
RWD Podcast Logo

RWD Podcast Episode 9: Responsive Images

  • Episode

    RWD Podcast Episode 9: Responsive Images

  • Length

    32:48

Description

Getting familiar with responsive image solutions

Download MP3 Subscribe on iTunes


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.

  1. Do nothing approach
  2. Polyfill a developing standard
  3. Serve it server side

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/

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.