felixhaeberle / kirby3-webp
Kirby 3 CMS plugin for converting JPG, JPEG and PNG into much smaller WEBP – speed up your website!
Installs: 6 220
Dependents: 0
Suggesters: 0
Security: 0
Stars: 39
Watchers: 8
Forks: 7
Open Issues: 2
Type:kirby-plugin
Requires
This package is auto-updated.
Last update: 2024-12-10 13:16:28 UTC
README
Kirby 3 CMS plugin for converting JPG, JPEG and PNG into much smaller WEBP – speed up your website! 🚀🔥
🥁 Installation
Composer
composer require felixhaeberle/kirby3-webp
Git Submodule
git submodule add https://github.com/felixhaeberle/kirby3-webp.git site/plugins/kirby3-webp
Clone or download
1️⃣ Activate the plugin
Activate the plugin in the site/config/config.php file with kirby3-webp => true.
return [
'kirby3-webp' => true
]
2️⃣ Getting started
After installing and activating the plugin, you need to serve webp files to the frontend with your server configuration.
Apache
Add the following to your .htaccess:
<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
For NGINX, use the following virtual host configuration:
// 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
You have multiple options when using kirby3-webp to configure it to your needs:
👏 Credit
🤩 How this plugin works
🤯 Good to know
Sometimes, if the pictures are really big (multiple MB's) the converting process takes naturally longer, but does complete for sure. The .webp gets generated, but not selected, because if the client can accept .webp, the .webp is sent to the client instead of the .png, .jpeg or .jpg. Therefore, you are in need of the Apache/nginx configuration.