How to Optimize Images for Jekyll and other web applications

2 minute read

Unfortunately my blog was loading only slowly in the past. The reason for this was that I have not optimized my photos for the web. They were just like they come from my cameras or my image manipulation program (gimp). I researched about this and found some solutions. A few solution suggested to add a plugin to jekyll which optimizes the images. But unfortunately every post with photos has to be optimized to use this new feature. And I was looking for a simpler approach.
In this post I will describe how I solved this problem with a self written script which is also on github.

The idea

Most jekyll themes assume that all the images are in an images folder. Thus a minimal example for this folder could be:

images
|---background-image.jpg
|---post-about-topic-a
    |---image-1.jpg
    |---image-2.jpg
|---post-about-topic-b
    |---image-1.jpg
    |---image-2.jpg

Pictures can then be included via markdown

![alt text for image 1](/images/post-about-topic-a/image-1.jpg)

or if more control is required e.g. a fixed image size

<img src="/images/post-about-topic-a/image-1.jpg" width="400">

in the case of jekyll (my jekyll theme) this means

<img src="\{\{ site.url \}\}/images/anki/main-window.jpg" width="400">

The problem with most of the solution is that either all the paths to the images have to be adjusted or even worse that the images have to be included in another way. For an existing blog with a lot of posts and images this is a lot of work. And you will leave the standard way of doing things. Perhaps this will interfere with other functionalities of your website.

My solution

I wrote the script image-optimizer.sh which compresses and resizes all images in a original folder into a images folder and converts all images to jpg images.

This means the existing images folder can be moved to the original folder and then the script can be executed.

cd /path/to/website/source
mv images original
./image-optimizer.sh

After that all the images have been optimized and best of all: no posts or other files have to be edited. And it just takes a few moments.

Demonstration

The left image before… The first image is 1.7 MB in size and the second is 170KB in size. Can you spot any differences?

Installation and usage

There is no installation. Just download my script from my repository. The repository contains also example images and a more detailed explanation.

This script uses convert from the ImageMagic suite to convert the images. It can be installed on GNU/Linux systems with the following command

sudo apt-get install imagemagick imagemagick-doc 

Navigate to the parent folder of the images: E.g.

cd /path/to/images

Copy the image-optimizer.sh script to this directory:

wget https://raw.githubusercontent.com/finn-christiansen/image-optimizer/master/image-optimizer.sh

Make the script executable:

chmod +x image-optimizer.sh

Run the script

./image-optimizer.sh

My experience

This optimization have boosted my blog in speed! It is so less effort for like 90% shorter loading time.

Leave a Comment