Image Generator for Jekyll

jekyll-imagemagick is a plugin for Jekyll that can automatically convert images from one format to another.

Typical usecase is having a directory full of original files or RAW images (say in PNG or other lossless formats) and convert them automatically to responsive JPG/WEBP format.

Installation

gem install jekyll-imagemagick

You need to install imagemagick command line for the generator to work.

Add jekyll-imagemagick to your Gemfile and to Jekyll's _config.yml then run jekyll serve again and you should see the generator run during site generation.

Example configuration

The plugin can be configured in the site's _config.yml file, in a imagemagick block:

imagemagick:
  enabled: true
  widths:
    - 1024
    - 512
    - 0
  input_directories:
    - assets/img/blog
    - assets/img/pages
  input_formats:
    - ".png"
    - ".tiff"
  output_formats:
    jpg: "-quality 93% -define jpeg:dct-method=float -strip -interlace Plane"
    webp: "-quality 100%"

This example configuration will:

Recursively search for input images with format PNG/TIFF in the directories assets/img/blog and assets/img/pages.
For each input image it generates a JPG and WEBP output.
Output images will be generated with resolutions 512x, 1024x and "untouched" (meaning it just keep the resolution of the original input image).

Notice that you can specify some fancy options for the imagemagick command line, like -define jpeg:dct-method=float -strip -interlace Plane that is supposed to produce more efficiently progressive-compressed images.

How to use WEBP in HTML

Not all browsers are compatible with WEBP. Using the <picture> element and specifying all image formats available is the best option. This way the browser will decide which format to use based on its own capabilities.

<picture>
  <source srcset="/path/to/image.webp" type="image/webp">
  <img src="/path/to/image.jpg" alt="">
</picture>

Development

bundle install --path vendor/bundle
bundle exec rake test
bundle exec rake codestyle

Known issues

So far so good.

Authors

Emilio Del Tessandoro - Generalized to any image format and passing all options to imagemagick
Sverrir Sigmundarson - Initial work on jekyll-webp