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. I personally use this plugin in combination with Jekyll to generate images for my website emilio.photography.
Installation
You need to install imagemagick command line as a prerequisite for the generator to work.
For manual installation you can just:
gem install jekyll-imagemagick
Alternatively you should add jekyll-imagemagick
to your Gemfile
and to Jekyll's _config.yml
(see below for the configuration).
Then install it and run Jekyll:
bundle install --path vendor/bundle
bundle exec jekyll serve
And you should see the generator running 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
andassets/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
Feel free to submit pull requests for adding new features, I'll be more than happy to review them. Please run the tests and the codestyle checks before doing that:
bundle install --path vendor/bundle
bundle exec rake test
bundle exec rake codestyle
These tests are also executed automatically by Gitlab CI/CD (configured with .gitlab-ci.yml
).
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