Kirby WebP
, (*1)
This plugin generates WebP images alongside your uploaded JPGs & PNGs - so you don't have to., (*2)
Table of contents
- 1. What is it good for?
- 2. Getting started
- 3. Configuration
- 4. Options
- 5. Troubleshooting
- 6. Credits / License, (*3)
What is it good for?
Absolutely .. smaller image size:, (*4)
WebP is a method of lossy and lossless compression that can be used on a large variety of photographic, translucent and graphical images found on the web. The degree of lossy compression is adjustable so a user can choose the trade-off between file size and image quality. WebP typically achieves an average of 30% more compression than JPEG and JPEG 2000, without loss of image quality (see Comparative Study)., (*5)
Google Developers, (*6)
Current browser support for WebP images is decent (Chrome, Opera & most mobile browsers), although heavily depending on your target region (ranging from North America (60%) & Europe (65%) to over 80% in Africa & South America)., (*7)
For further information, including criticism, check out its Wikipedia article. That being said, another interesting approach gearing towards the replacement of JPEG is Fabrice Bellard's "Better Portable Graphics" (BPG) format., (*8)
Getting started
Use one of the following methods to install & use kirby-webp:, (*9)
Composer
composer require S1SYPHOS/kirby-webp:dev-composer
Git submodule
If you know your way around Git, you can download this plugin as a submodule:, (*10)
git submodule add https://github.com/S1SYPHOS/kirby-webp.git site/plugins/kirby-webp
Clone or download
-
Clone or download this repository.
- Unzip / Move the folder to
site/plugins.
Activate the plugin
Activate the plugin with the following line in your config.php:, (*11)
c::set('plugin.kirby-webp', true);
Configuration
After uploading some images, you are now officially ready to serve their newly generated WebP versions., (*12)
Apache
If you're using Apache as your webserver, add the following lines to your .htaccess:, (*13)
<IfModule mod_rewrite.c>
RewriteEngine On
# Checking for WebP browser support ..
RewriteCond %{HTTP_ACCEPT} image/webp
# .. and if there's a WebP version for the requested image
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
# Well, then go for it & serve WebP instead
RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
<IfModule mod_mime.c>
AddType image/webp .webp
</IfModule>
NGINX
If you're using NGINX as your webserver, add the following lines to your virtual host setup (for more information, go here or there):, (*14)
// First, make sure that NGINX' `mime.types` file includes 'image/webp webp'
include /etc/nginx/mime.types;
// Checking if HTTP's `ACCEPT` header contains 'webp'
map $http_accept $webp_suffix {
default "";
"~*webp" ".webp";
}
server {
// ...
// Checking if there's a WebP version for the requested image ..
location ~* ^.+\.(jpe?g|png)$ {
add_header Vary Accept;
// .. and if so, serving it
try_files $1$webp_ext $uri =404;
}
}
Options
Change kirby-webp options to suit your needs:, (*15)
| Option |
Type |
Default |
Description |
plugin.kirby-webp.hooks |
Array |
['upload'] |
Contains all panel.file.* hooks WebP generation should be applied to (allowed values are upload, update, rename and replace). |
plugin.kirby-webp.quality |
Integer |
90 |
Defines WebP image quality (ranging from 0 to 100). |
plugin.kirby-webp.stripMetadata |
Boolean |
true |
Optionally enables / disables transfer of JPEG metadata onto the WebP image. |
plugin.kirby-webp.convertedImage |
Boolean |
true |
Optionally enables / disables output of converted image (false results in text output about the conversion process). |
plugin.kirby-webp.serveOriginalOnFail |
Boolean |
true |
Defines behavior in case all converters fail - by default, the original image will be served, whereas false will generate an image with the error message. |
plugin.kirby-webp.converters |
Array |
['gd', 'cwebp'] |
Defines the desired order of execution for all supported converters (allowed values are imagick, cwebp, gd and ewww). Note that this only changes their order, but doesn't remove any of them. |
Troubleshooting
Despite stating that An unexpected error occurred, WebP generation after renaming / updating images works - replace doesn't work at all .. PRs are always welcome :champagne:, (*16)
Because of that, only upload is included by default. If you wish to investigate this further and / or don't care too much about the errror, go ahead with c::set('plugin.webp.actions', ['upload', 'update', 'rename', 'replace']); in your config.php., (*17)
Credits / License
kirby-webp is based on Bjørn Rosell's PHP library webp-convert library. It is licensed under the MIT License, but using Kirby in production requires you to buy a license. Are you ready for the next step?, (*18)
Special Thanks
I'd like to thank everybody that's making great software - you people are awesome. Also I'm always thankful for feedback and bug reports :), (*19)
Wallogit.com
