Responsive Images are here!

The browser vendors have decided!

The picture element is the winner!

Now all you have to do is implement responsive images on your site. And generate hundreds of images at small, medium and large resolutions.

Never fear! This site will help you with both!

Installation

This plugin requires Grunt ~0.4.0.

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install grunt-responsive-images --save-dev

You also need to install either GraphicsMagick or Imagemagick CLI tools.

Installing GraphicsMagick (Recommended)

If you're a Mac user and have Homebrew installed, simply type:

brew install GraphicsMagick

Otherwise, please visit the GraphicsMagick downloads page.

Or installing ImageMagick

If you're a Mac user and have Homebrew installed, simply type:

brew install ImageMagick

Otherwise, please visit the ImageMagick downloads page.

Once both the plugin and graphics engine have been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-responsive-images');

Documentation

Please see the project readme file for information on how to use the plugin.

Screencast

Need a walkthrough?

Examples

Using the Picture element

The <picture> element loads an image based on the matched viewport. The element should contain a series of <source> elements with media queries followed by an <img> element, which will be the fallback for browsers that cannot load the source images.

At the time of writing, the <picture> element is only implemented in Chrome Canary, with support in Chrome, Firefox, Safari and Opera to follow. For browsers that do not support <picture>, we can include a picturefill polyfill.

<picture> can be implemented with the following:

<picture>
    <!--[if IE 9]><video style="display: none;"><![endif]-->
    <source srcset="wedding-large.jpg" media="(min-width: 820px)" />
    <source srcset="wedding-medium.jpg" media="(min-width: 640px)" />
    <source srcset="wedding-small.jpg" />
    <!--[if IE 9]></video><![endif]-->
    <img src="wedding-small.jpg" alt="Wedding Day" />
</picture>

The conditional comments are required to support the <picture> element in Internet Explorer 9.

The code above would create the following output:

There is also a Grunt task available for converting your Markdown images in to Responsive Images.