I recently finished the Responsive Images Course on Udacity. I'd recommend giving it a go as I learned a lot about images and techniques for optimizing and serving them on the web. It's a self paced course, plus it's free. You can't beat that price.

A useful tool I found through the course was GraphicsMagick. GraphicsMagick is an image processing system. It can be used to edit images such as resizing and compressing. Once you've downloaded and installed it, you can use it with the Grunt plugin grunt-responsive-images.

Grunt is a task runner that automates repetitive tasks such as compiling files, minifying JavaScript and CSS files, running tests and so on. It makes life a lot simpler and allows a developer to use their time more efficiently.

With the grunt-responsive-images plugin, you can automate creating different size of images. Why would you want to do this? To use it with the picture element. The picture element allows you to change the source of an image depending on different circumstances such as screen size or screen resolution. It's useful so that you don't serve a large image file for a small device and waste data or to swap an image if the device has a retina display, which requires a larger image so it doesn't look pixelated.   

There are other options for the plugin such as applying filters or lowering the quality to lessen the file size, which can be found here: https://github.com/andismith/grunt-responsive-images.       

Since support for these nifty picture element features isn't quite there yet, you'll need to use Picturefill, a polyfill that uses JavaScript to get the functionality to work across several browsers.   

Automating this task is a life safer. Imagine having 25 images for your site. Now imagine opening each image in an image editor like Photoshop or GIMP, then having to resize them into 3 different sizes. Then you have to save them using the Save for Web option. I’ve been there. It’s not fun, a bit mind numbing even. With Grunt, you only need to set up the Gruntfile.js file once with the options you want and type in a single line on the command line. That’s it. You’re done. If you get more images down the road you need to put up on a site, it’s got you covered.

I highly recommend taking the Udacity course if you want to learn more about responsive images. Even if you know plenty, you might pick up a thing or two. 

List of Links

Responsive Images Course

GraphicsMagick

Grunt

grunt-responsive-images

This is important because:

Picturefill was a great solution already, and this brings it into the future encouraging the use of the future proper syntax.

You not only can use <picture> but <img srcset> too, which is a close cousin and useful when swapping sources with media queries alone would suck.

Direct Link to Article — Permalink

Picturefill 2 is a post from CSS-Tricks

CSS-Tricks