Website performance is one of the most critical things that affect both user experience and search engine result placement in today’s digital marketplace. Images can have a big influence on how a website loads. In this post, we will talk about why you should optimise images and introduce ImageMagick which is an excellent free tool. We will also provide a more comprehensive and easier to understand script for optimising photographs on many different types of servers.
The Significance of Image Optimisation
Your website’s load speed may be reduced significantly by large and non optimised images, which can cause it to bounce more and rank poorer in search engines. Image optimisation is the process of reducing image sizes by compressing the image without affecting quality, leading to faster loading times, improved user experience and also better SEO.
Enter ImageMagick.
ImageMagick, an open source software package, is a powerful tool for image generation, editing, and optimisation. ImageMagick is a fantastic solution for image optimisation on many server types since it has a command-line interface (CLI) and is compatible with a wide range of operating systems.
Improved script for user friendly image optimisation.
To make the image optimisation process more efficient and user friendly, we improved a bash script that uses ImageMagick. The software enables users to resize photographs, convert them to WebP format, and speed up the optimisation process. Here’s an overview of the script’s enhancements:
1. Color Coded Output
To improve visibility and user engagement, the script now has color coded outputs. Green signifies successful operations, however red warns of future problems.
2. Overwrite Confirmation
Before overwriting existing WebP files, the script now displays a warning and requests approval from the user. This avoids unintentional data loss and ensures a safer optimisation procedure.
3. Informative Messages
Throughout the script, we’ve included relevant messages to keep users up to date on the current activities. This allows for a more clear and user friendly experience.
Using the Image Optimisation Script
To use the latest version of the script, follow these instructions:
## Using the Image Optimisation Script
To use the latest version of the script, follow these instructions:
1. Create a new file named `optimise_image.sh` using the following command:
```bash
touch optimise_image.sh
- Open the newly created script file in your preferred text editor. You can use nano, for example:
nano optimise_image.sh
- Copy the enhanced bash script provided below and paste it into the
optimise_image.sh
file:
#!/bin/bash
# Colors for better output
GREEN='\033[0;32m'
RED='\033[0;31m'
NC='\033[0m' # No Color
# Function to display usage instructions
usage() {
echo "Usage: $0 [-s size] [-d directory | -i image]"
echo " -s size : Resize image to specified size (e.g., 1200x900)"
echo " -d directory : Directory containing images to be converted"
echo " -i image : Single image file to be converted"
exit 1
}
# Default values
QUALITY=70
SIZE=""
IMAGE=""
DIRECTORY=""
OUTPUT_DIR="/path/to/output/images"
# Parse command line options
while getopts 's:d:i:' flag; do
case "${flag}" in
s) SIZE="${OPTARG}" ;;
d) DIRECTORY="${OPTARG}" ;;
i) IMAGE="${OPTARG}" ;;
*) usage ;;
esac
done
# Check if no options were provided
if [ -z "$SIZE" ] && [ -z "$DIRECTORY" ] && [ -z "$IMAGE" ]; then
usage
fi
# Function to convert image
convert_image() {
local image=$1
local size=$2
# Extract filename without extension
filename=$(basename -- "$image")
filename="${filename%.*}"
# Check if WebP file already exists
if [ -f "$OUTPUT_DIR/$filename.webp" ]; then
read -p "${RED}Warning: ${filename}.webp already exists. Overwrite? (y/n): ${NC}" overwrite
if [ "$overwrite" != "y" ]; then
echo "Skipped $image."
return
fi
fi
# Convert to WebP, resize, strip metadata, and save
echo "Converting ${filename} to WebP format..."
magick convert "$image" -resize "$size" -quality $QUALITY -strip "$OUTPUT_DIR/$filename.webp"
echo "${GREEN}Conversion of ${filename} complete.${NC}"
}
# Create output directory if it doesn't exist
mkdir -p "$OUTPUT_DIR"
# Process images
if [ ! -z "$DIRECTORY" ]; then
for image in "$DIRECTORY"/*.{jpg,png,jpeg}; do
if [ -f "$image" ]; then
convert_image "$image" "$SIZE"
fi
done
elif [ ! -z "$IMAGE" ]; then
if [ -f "$IMAGE" ]; then
convert_image "$IMAGE" "$SIZE"
else
echo "${RED}Error: File $IMAGE does not exist.${NC}"
exit 1
fi
fi
echo "${GREEN}Conversion complete.${NC}"
- Save the changes and exit the text editor.
- Make the script executable with the following command:
chmod +x optimise_image.sh
- You are now ready to use the script for optimising your images. Run the script with appropriate options to optimise images according to your preferences.
./optimise_images.sh -s size -d directory
- `
-s size
`: Resize image to the specified dimensions (e.g., 1200×900). - `
-d directory
`: Directory containing images to be converted.
Additionally, you may optimise a single image with the following command:
./optimise_images.sh -s size -i image
`-i image
`: Single image file to be converted.
Optimising images is a crucial step in ensuring optimal website performance. ImageMagick, coupled with our user-friendly script, empowers website administrators to efficiently enhance loading speed and user experience across different server types. By investing time in image optimisation today, you pave the way for a faster, more responsive, and user-friendly website tomorrow.
Explore more DevOps insights and tools in our dedicated category for comprehensive web optimisation strategies.