middleman-automatic-clowncar is an extension for Middleman that makes it really easy to use responsive images on your site. It generates multiple sizes of your images and provides an easy helper method for placing reponsive images on a page. Depending on the size of the image on the page, the browser will inteligently download the appropriate image.

The extension uses the Clown Car Technique invented by Estelle Weyl to display the right image. She explains that the technique is named "clown car" because "it includes many large images (the clowns) in a single tiny SVG image file (the car)".

Installation

Add this to your Gemfile:

gem 'middleman-automatic-clowncar'

And then run:

$ bundle

Or install it directly with:

$ gem install middleman-automatic-clowncar

Usage

Activate the module in config.rb and pass in config options.

activate :automatic_clowncar,
  :sizes => {
    :small => 200,
    :medium => 400,
    :large => 600
  },
  :namespace_directory => %w(photos)

At build time the extension will look in source/photos and will create thumbnails for each image it finds there.

For example, let's say you have an image at source/photos/my-photo.jpg. With the configuration above the extension will generate the following files:

build/photos/my-photo.svg
build/photos/my-photo/my-photo-small.jpg
build/photos/my-photo/my-photo-medium.jpg
build/photos/my-photo/my-photo-large.jpg
build/photos/my-photo/timestamp.txt

The timestamp file is used to allow the extension to skip regenerating the thumbnails if the modified timestamp of the source image has not changed.

Then in a template you can use the automatic_clowncar_tag to display a responsive image.

<%= automatic_clowncar_tag 'photos/my-photo.jpg' %>

You can find the code on GitHub.