loveduckie / silverstripe-webp-image
Automatically generate and serve .webp images from existing .jpeg, .png, and .gif files.
Installs: 577
Dependents: 0
Suggesters: 0
Security: 0
Stars: 3
Watchers: 1
Forks: 14
Type:silverstripe-vendormodule
Requires
- silverstripe/framework: ^4.10 | ^5.0
Requires (Dev)
- phpunit/phpunit: ^5.7
This package is auto-updated.
Last update: 2024-10-22 16:59:21 UTC
README
Overview
This module automatically optimizes image assets by converting them to .webp
format on request. Learn more about the WebP image format here. Details about the modifications made to this fork, along with the rationale, can be found at the link below.
Tips for Optimizing Page Speeds
Integration with NGINX
I've modified this add-on so that .webp
that are created possess the file name of file_name_goes_here.<original extension>.webp
. The reason for this is so that the images created can be automatically served in place of their original image assets by using a NGINX configuration such as the one below.
map $http_accept $webp_suffix { default ""; "~*webp" ".webp"; } location ~* /assets/.+\.(?<extension>jpe?g|png|gif|webp)$ { # more_set_headers 'Content-Type: image/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; }
The variable webp_suffix
will be populated with the .webp
extension if the requesting web client has webp
defined as part of its Accept
header. NGINX will then attempt to find the .webp
version of the asset, and failing that, it will serve the original instead.
Introduction
This module creates webp images from resized jpeg and png images. More Information about webp images https://developers.google.com/speed/webp/
Requirements
- Silverstripe > 4.2
- GDLib with webp Extension
Installation
composer require loveduckie/silverstripe-webp-image
Usage
-
run
dev/build?flush=1
-
force Browser to load webp image // Example 1 (default) edit
.htaccess
in yourroot
directory, and addwebp
forwarding in compatible browsers -
force Browser to load webp image // Example 2 for information on usage of webp image in html see css-tricks.com
Quick Testfile for checking if webp is available
Below you will find the code to quickly check if webp is available with the installed GD Library. Simply copy this code into a .php
file in your root
folder and open the file in a browser.
<?php if (function_exists(imagewebp)) { echo "WebP is available"; } else { echo "WebP is not available"; }
TODO
- documentation
- IMagick Support
- PHP test to check support
- Delete Webp Image
- Flush Webp Image