How to include image scaling in the build pipeline

Hi. I have a similar situation to you which I solved.

The idea is to keep large files in version control and then make a copy at say 800px wide without losing the original. And to make say a 200px version easily.

Firstly you want to avoid resizing the images by hand. You can use a shell tool but there’s an easier way to handle this in Jekyll.

Secondly you want to avoid adding the resized images to version control. They have no purpose there. You only need to track changes to the full sized files such as higher contrast. The resized images can be thrown away and recreated at each build. No need for history there

I can recomend using the jekyll-resize plugin.

It works with Jekyll 3 and 4.

This is my fork. The original only works on Jekyll 3.

The plugin is used to reference an image in version control by path and the size you want e.g. 800x800. This won’t make a square but it will set max height and max width at 800px when performing the resize.

Then when you run Jekyll build or sevre, the plugin will resize only the images you told it to and add them to a cache directory. No need to run any shell commands besides Jekyll.

This directory must be ignored from version control but persisted in the build so your HTML page can request it.

The plugin also generates a link to the resized image for you, for use in img tag.

All the instructions are in the docs. :slight_smile: There’s a demo I linked there which you can see on Netlify or you can clone locally to see how the tag is used and works.

If you want you can see the Jekyll image tag plugin which I linked in the doc. That serves the same purpose but has features you and configuration you may not needed. It is more widely used.

1 Like