{"id":209,"date":"2024-02-02T00:10:00","date_gmt":"2024-02-02T00:10:00","guid":{"rendered":"https:\/\/davagordon.co.uk\/blog\/?p=209"},"modified":"2024-05-12T02:31:18","modified_gmt":"2024-05-12T01:31:18","slug":"unlocking-lightning-fast-websites-harness-the-power-of-image-optimisation-with-this-free-tool","status":"publish","type":"post","link":"https:\/\/davagordon.co.uk\/blog\/unlocking-lightning-fast-websites-harness-the-power-of-image-optimisation-with-this-free-tool\/","title":{"rendered":"Revolutionise Your Website Speed: Boost Speed with the Ultimate Free Image Optimisation Tool!"},"content":{"rendered":"\n

Website performance is one of the most critical things that affect both user experience and search engine result placement in today\u2019s 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.<\/p>\n\n\n\n

The Significance of Image Optimisation<\/h2>\n\n\n\n

Your website\u2019s 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.<\/p>\n\n\n\n

Enter ImageMagick.<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

Improved script for user friendly image optimisation.<\/h2>\n\n\n\n

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:<\/p>\n\n\n\n

1. Color Coded Output<\/p>\n\n\n\n

To improve visibility and user engagement, the script now has color coded outputs. Green signifies successful operations, however red warns of future problems.<\/p>\n\n\n\n

2. Overwrite Confirmation<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

3. Informative Messages<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Using the Image Optimisation Script<\/h2>\n\n\n\n

To use the latest version of the script, follow these instructions:<\/p>\n\n\n

\n## Using the Image Optimisation Script\n\nTo use the latest version of the script, follow these instructions:\n\n1. Create a new file named `optimise_image.sh` using the following command:\n\n   ```bash\n   touch optimise_image.sh\n<\/pre><\/div>\n\n\n
    \n
  1. Open the newly created script file in your preferred text editor. You can use nano, for example:<\/li>\n<\/ol>\n\n\n
    \nnano optimise_image.sh\n<\/pre><\/div>\n\n\n
      \n
    1. Copy the enhanced bash script provided below and paste it into the <\/span>optimise_image.sh<\/code> file:<\/span><\/li>\n<\/ol>\n\n\n
      \n#!\/bin\/bash\n\n# Colors for better output\nGREEN='\\033[0;32m'\nRED='\\033[0;31m'\nNC='\\033[0m' # No Color\n\n# Function to display usage instructions\nusage() {\n    echo "Usage: $0 [-s size] [-d directory | -i image]"\n    echo "  -s size       : Resize image to specified size (e.g., 1200x900)"\n    echo "  -d directory  : Directory containing images to be converted"\n    echo "  -i image      : Single image file to be converted"\n    exit 1\n}\n\n# Default values\nQUALITY=70\nSIZE=""\nIMAGE=""\nDIRECTORY=""\nOUTPUT_DIR="\/path\/to\/output\/images"\n\n# Parse command line options\nwhile getopts 's:d:i:' flag; do\n    case "${flag}" in\n        s) SIZE="${OPTARG}" ;;\n        d) DIRECTORY="${OPTARG}" ;;\n        i) IMAGE="${OPTARG}" ;;\n        *) usage ;;\n    esac\ndone\n\n# Check if no options were provided\nif [ -z "$SIZE" ] && [ -z "$DIRECTORY" ] && [ -z "$IMAGE" ]; then\n    usage\nfi\n\n# Function to convert image\nconvert_image() {\n    local image=$1\n    local size=$2\n\n    # Extract filename without extension\n    filename=$(basename -- "$image")\n    filename="${filename%.*}"\n\n    # Check if WebP file already exists\n    if [ -f "$OUTPUT_DIR\/$filename.webp" ]; then\n        read -p "${RED}Warning: ${filename}.webp already exists. Overwrite? (y\/n): ${NC}" overwrite\n        if [ "$overwrite" != "y" ]; then\n            echo "Skipped $image."\n            return\n        fi\n    fi\n\n    # Convert to WebP, resize, strip metadata, and save\n    echo "Converting ${filename} to WebP format..."\n    magick convert "$image" -resize "$size" -quality $QUALITY -strip "$OUTPUT_DIR\/$filename.webp"\n    echo "${GREEN}Conversion of ${filename} complete.${NC}"\n}\n\n# Create output directory if it doesn't exist\nmkdir -p "$OUTPUT_DIR"\n\n# Process images\nif [ ! -z "$DIRECTORY" ]; then\n    for image in "$DIRECTORY"\/*.{jpg,png,jpeg}; do\n        if [ -f "$image" ]; then\n            convert_image "$image" "$SIZE"\n        fi\n    done\nelif [ ! -z "$IMAGE" ]; then\n    if [ -f "$IMAGE" ]; then\n        convert_image "$IMAGE" "$SIZE"\n    else\n        echo "${RED}Error: File $IMAGE does not exist.${NC}"\n        exit 1\n    fi\nfi\n\necho "${GREEN}Conversion complete.${NC}"\n\n<\/pre><\/div>\n\n\n
        \n
      1. Save the changes and exit the text editor.<\/li>\n\n\n\n
      2. Make the script executable with the following command:<\/li>\n<\/ol>\n\n\n
        \nchmod +x optimise_image.sh\n<\/pre><\/div>\n\n\n
          \n
        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.<\/li>\n<\/ol>\n\n\n
          \n.\/optimise_images.sh -s size -d directory\n<\/pre><\/div>\n\n\n