Jekyll Resize 🖼 🤏 🔬

Simple image resizing filter for Jekyll 3 and 4

Sample usage

Add the plugin gem to your Gemfile as below, then install it with Bundler.

group :jekyll_plugins do
  gem "jekyll-resize", git: "https://github.com/UCSD-E4E/jekyll-resize"
end

The resize filter will be available in Liquid (in your Markdown and HTML) so you can use it for a JPEG or PNG file.

Here we resize an image to max width and max height of 800 pixels and converting it to webp with an image quality of 80:

{{ "my-image.png" | resize: "800x800>,webp,80" }}

Here we resize an image to max width and max height of 800 pixels with an image quality of 80:

{{ "my-image.png" | resize: "800x800>,,80" }}

Here we resize an image to max width and max height of 800 pixels and converting it to webp:

{{ "my-image.png" | resize: "800x800>,webp" }}

Here we resize an image to max width and max height of 800 pixels:

{{ "my-image.png" | resize: "800x800>" }}

Here we crop the image to only show the frist 50% (see geomgery for imagemagick for all possible options):

{{ "my-image.png" | resize: "800x800>,webp,80,50%X100%" }}

Note crop occurs before resizing. The reason crop is the last parameter is to keep it compatible with previous fork

That takes care of:

• generating the reduced image.
• providing a link to the file.

See the docs linked below for a more detailed example using the filter with an HTML img tag.

Documentation

Why you should use this plugin and how to install and use it in a Jekyll project

Contributing

See Contributing doc.

License

Released under MIT by @UCSD-E4E.

Original license - MIT.

See Fork notes for more details and a list of improvements this fork provides.