README

Overview

The silverstripe-webp-image module enhances your SilverStripe website's performance by automatically converting image assets to the efficient .webp format on demand. Learn more about WebP's benefits here. For additional details and insights, check out Tips for Optimizing Page Speeds.

Thanks

Thanks to nomidi/silverstripe-webp-image for developing the original version of this extension.

I've since forked it and modified it to use Imagick, added support for .gif, and made other optimizations.

Features

• :white_check_mark: Automatically generates .webp versions of JPEG, PNG, and GIF images – both the originals and every resized variant.
• :white_check_mark: webp-backfill task to create the missing .webp siblings for images that are already in the public asset store.
• :white_check_mark: Significantly improves page load times with minimal configuration, making it SEO friendly.
• :white_check_mark: Designed for seamless integration with NGINX.
• :white_check_mark: Native support for Imagick.

How does it work?

Resized or altered versions of image assets are stored to disk for caching and optimization purposes. This extension intercepts calls for retrieving these cached and resized assets by automatically generating .webp counterparts of the same images. This usually occurs when leveraging Silverstripe's image manipulation features via its templating engine.

Afterwards, and depending on your server's configuration, NGINX will attempt to serve the .webp version of your resized image asset instead of the source version. If the .webp version does not exist, then it will instead serve the original version.

This extension provides conversion support for .jpeg, .png, and .gif assets using Imagick.

Backfilling existing images

Images that were uploaded before the module was installed have no .webp sibling yet. The webp-backfill task writes the missing ones for every image in the public asset store:

vendor/bin/sake tasks:webp-backfill          # --force rewrites existing siblings

The task is idempotent (siblings that are not older than their source file are left alone) and skips animations. Because the generated files belong to the user running the task, run it through the browser (/dev/tasks/webp-backfill) whenever the web server – not the shell user – owns the assets directory; on the command line the task refuses to run in that case unless --ignore-owner is given.

Requirements

• SilverStripe >= 4.2
• GD Library with WebP support enabled
• Imagick

Installation

Install the module using Composer:

composer require loveduckie/silverstripe-webp-image

Run the following to initialize:

vendor/bin/sake dev/build flush=1

Web Server Configuration

This module creates .webp images with filenames structured as file_name.<original_extension>.webp. To serve WebP images when supported, configure your web server as follows:

NGINX Configuration

Add the following to your NGINX configuration:

map $http_accept $webp_suffix {
  default   "";
  "~*webp"  ".webp";
}

location ~* /assets/.+\.(?<extension>jpe?g|png|gif|webp)$ {
    gzip_static on;
    gzip_types image/png image/x-icon image/webp image/svg+xml image/jpeg image/gif;

    add_header Vary Accept;
    expires max;
    sendfile on;
    try_files "${request_uri}${webp_suffix}" $uri =404;
}

This setup detects browsers that support WebP via the Accept header and serves the .webp version if available.

Apache .htaccess Configuration

For Apache users, add rules to prioritize .webp files in your .htaccess. For detailed instructions, see CSS-Tricks' guide.

Testing WebP Support

To verify WebP support in your environment, create a .php file with the following content and open it in your browser:

<?php

if (function_exists('imagewebp')) {
    echo "WebP is available";
} else {
    echo "WebP is not available";
}

Browser Support and Fallbacks

For browsers that don't support WebP, ensure your HTML or server configuration serves alternative formats like JPEG or PNG. Learn more about graceful degradation strategies on CSS-Tricks.

Roadmap

• Enhanced documentation
• ~Imagick support~
• ~Siblings for original files and backfill command~
• PHP tests to validate WebP compatibility
• Automatic cleanup of unused .webp files
• Command-line functionality for flushing .webp files

Contributing

Contributions are welcome! Please feel free to submit issues or pull requests to improve the module.