Middleman::Webp

This is Middleman extension that generates WebP versions of each image used in site during build.

WebP is image format developed by Google and it usually generates smaller files than regular jpeg or png formats.

Browser's supporting WebP will include Accepts header to the image file requests so you can refer to jpegs or pngs in your HTML and use for example .htaccess configuration to provide smaller alternatives for browser's supporting WebP.

See my blog post "Introducing WebP extension for Middleman" for more details why I think using WebP matters.

Installation

Middleman-webp depends on cwep and gif2webp commandline tools, so install those first for your system.

  • Fedora: yum install libwebp-tools
  • Ubuntu: apt-get install webp
  • OS X: brew install webp

Add this line to your Middleman site's Gemfile:

gem 'middleman-webp'

And then execute:

$ bundle

And activate :webp extension in your config.rb:

activate :webp

Custom conversion options

Options for conversion are defined using Ruby's glob syntax or Regexp for matching image files and hashes containing args supported by cwebp:

activate :webp do |webp|
  webp.conversion_options = {
    "icons/*.png" => {lossless: true},
    "photos/**/*.jpg" => {q: 100},
    /[0-9]/.+gif$/ => {lossy: true}
  }
end

Ignoring some of the image files at you site

If there are some image files that you don't want to convert to the webp alternatives, you could ignore them using ignore option matching those paths.

activate :webp do |webp|
  webp.ignore = '**/*.gif'
end

Ignore option accepts one or an array of String globs, Regexps or Procs.

Configuring your site to provide WebP alternatives

Configure web server to serve WebP images if they are available and browser has set the HTTP Accept header.

Look for this example how to do it in .htaccess.

Contributing

  1. Fork it ( http://github.com/iiska/middleman-webp/fork )
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request