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.
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
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.
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
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.
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
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.
Copy the image-optimizer.sh script to this directory:
Make the script executable:
chmod +x image-optimizer.sh
Run the script
This optimization have boosted my blog in speed! It is so less effort for like 90% shorter loading time.