loveduckie/silverstripe-webp-image

Automatically generate and serve .webp images from existing .jpeg, .png, and .gif files.

5.x-dev 2024-11-21 15:53 UTC

Requires

• silverstripe/framework: ^4.10 | ^5.0

Requires (Dev)

• phpunit/phpunit: ^9.5
• silverstripe/frameworktest: 1.x-dev

BSD-3-Clause

• Luc Shelton

• image
• silverstripe
• Webp

README

silverstripe-webp-image

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

• ✅ Automatically generates .webp versions of resized JPEG, PNG, and GIF images.
• ✅ Significantly improves page load times with minimal configuration, making it SEO friendly.
• ✅ Designed for seamless integration with NGINX.
• ✅ 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.

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
• 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.