Optimizing images for the web is a common step in website design and development, but it can also be one of the most tedious. With all the steps like resizing, compressing, stripping metadata, and exporting multiple formats, it can eat chunks of time that rack up quickly when you’re just trying to work your blog, portfolio, or even a small business website.
This lab exercises will show you how to not only make that process easier, but automate it in a way that can be replicated on your own system or even a Linux server.
🎯 The goal
For this Linux Lab project, we'll be building a simple, fully automated image processing pipeline that does the following:
- Watches a specific folder for new images
- Automatically optimizes them using ImageMagick
- (Optionally) Generates web-friendly WebP copies
- (Optionally) Moves images into section-specific folders like
optimized/blog/img/for rapid reference and deployment - (Preferably) Runs the automation as a systemd user service
By the time we're finished, you’ll have a reusable automation that you can implement on your desktop or server, with minimal overhead, no need for configuration, and no need for Docker or any external services.
Prerequisites
Before you dive in, there are a few dependencies that should be taken care of first. The details may differ slightly for your distro, so please be aware that you may need to consult your distro's documentation where necessary to install the correct packages. Once this stage is done, however, you should be able to follow everything just the same on most distributions.
You'll need to install:
- ImageMagick: for resizing and compressing images in common formats
- inotify-tools: for watching the target folder for any new files
- (optionally) webp: for converting images to the WebP format
On Ubuntu systems, you can run:
sudo apt update
sudo apt install -y imagemagick inotify-tools webpOn Fedora, you can use:
sudo dnf -y install ImageMagick inotify-tools libwebp-toolsimagemagick in your distro repository. Be sure to check before attempting to install on other distros, as package names are typically case-sensitive.Once you've installed these packages, you're ready to move on to setting up the project folders.
Building out the project folders
For this endeavor, we'll build a single parent folder with three sub-directories. Technically, you can place the three sub-directories anywhere you like, but for keeping things organized, we'll keep them in a dedicated folder for this tutorial.
The structure we'll use looks something like this:
~/image-lab:the parent folder/incoming:where you'll drop original images for optimization/optimized:where optimized images will be saved/logs:for storing a simple log file with timestamps and actions
To create these folders, you just need to run the following command:
mkdir -p ~/image-lab/{incoming,optimized,logs}This will automatically create the sub-directories with ~/image-lab for you.
