Skip to main content

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
  1. Open the newly created script file in your preferred text editor. You can use nano, for example:
nano optimise_image.sh
  1. 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}"

  1. Save the changes and exit the text editor.
  2. Make the script executable with the following command:
chmod +x optimise_image.sh
  1. 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.