PHPackages                             loveduckie/silverstripe-webp-image - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Image & Media](/categories/media)
4. /
5. loveduckie/silverstripe-webp-image

ActiveSilverstripe-vendormodule[Image & Media](/categories/media)

loveduckie/silverstripe-webp-image
==================================

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

5.x-dev(1y ago)36603[1 PRs](https://github.com/LoveDuckie/silverstripe-webp-image/pulls)BSD-3-ClausePHP

Since Sep 16Pushed 1y agoCompare

[ Source](https://github.com/LoveDuckie/silverstripe-webp-image)[ Packagist](https://packagist.org/packages/loveduckie/silverstripe-webp-image)[ Docs](https://lucshelton.com/projects/personal/silverstripe-module-automatic-webp-image-conversion/)[ RSS](/packages/loveduckie-silverstripe-webp-image/feed)WikiDiscussions 5 Synced 2d ago

READMEChangelogDependencies (3)Versions (2)Used By (0)

silverstripe-webp-image
=======================

[](#silverstripe-webp-image)

[![Build Status](https://camo.githubusercontent.com/229a4df8a604cd411355fd3e790f76b43b8fad4ee2c7e847f635c0370bc423b6/68747470733a2f2f7472617669732d63692e6f72672f4c6f76654475636b69652f73696c7665727374726970652d776562702d696d6167652e7376673f6272616e63683d6d6173746572)](https://travis-ci.org/loveduckie/silverstripe-webp-image)[![License](https://camo.githubusercontent.com/c43483f271d6b35bea34e50a8858970ef0773b15060af3d23a8e5e04cd417cf7/68747470733a2f2f706f7365722e707567782e6f72672f6c6f76656475636b69652f73696c7665727374726970652d776562702d696d6167652f6c6963656e7365)](https://packagist.org/packages/loveduckie/silverstripe-webp-image)

Overview
--------

[](#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](https://developers.google.com/speed/webp). For additional details and insights, check out [Tips for Optimizing Page Speeds](https://lucshelton.com/blog/tips-for-optimizing-page-speeds/).

Thanks
------

[](#thanks)

Thanks to [nomidi/silverstripe-webp-image](https://github.com/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
--------

[](#features)

- ✅ Automatically generates `.webp` versions of resized JPEG, PNG, and GIF images.
- ✅ Significantly improves page load times with minimal configuration, [making it SEO friendly](https://web.dev/articles/choose-the-right-image-format?hl=en#:~:text=WebP%20and%20AVIF%20will%20generally%20provide%20better%20compression%20than%20older%20formats%2C%20and%20should%20be%20used%20where%20possible.%20You%20can%20use%20WebP%20or%20AVIF%20images%20along%20with%20a%20JPEG%20or%20PNG%20image%20as%20a%20fallback.%20See%20Use%20WebP%20images%20for%20more%20details.).
- ✅ Designed for seamless integration with [NGINX](https://nginx.org/).
- ✅ Native support for [Imagick](https://www.php.net/manual/en/book.imagick.php).

How does it work?
-----------------

[](#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](https://docs.silverstripe.org/en/5/developer_guides/files/images/#manipulating-images-in-templates) 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](https://www.php.net/manual/en/book.imagick.php).

Requirements
------------

[](#requirements)

- SilverStripe `>= 4.2`
- GD Library with WebP support enabled
- Imagick

Installation
------------

[](#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
------------------------

[](#web-server-configuration)

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

### NGINX Configuration

[](#nginx-configuration)

Add the following to your NGINX configuration:

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

location ~* /assets/.+\.(?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

[](#apache-htaccess-configuration)

For Apache users, add rules to prioritize `.webp` files in your `.htaccess`. For detailed instructions, see [CSS-Tricks' guide](https://css-tricks.com/using-webp-images/).

Testing WebP Support
--------------------

[](#testing-webp-support)

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

```