Code Monkey home page Code Monkey logo

kirby3-webp's Introduction

kirby3-webp

license issues-open tweet

Kirby 3 CMS plugin for converting JPG, JPEG and PNG into much smaller WEBP โ€“ speed up your website! ๐Ÿš€๐Ÿ”ฅ

... and get the Lighthouse statistic you are dreaming of! ๐Ÿ˜

๐Ÿฅ 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. Clone or download this repository.
  2. Unzip / Move the folder to site/plugins.

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:

Option Type Default Description
kirby3-webp.quality Integer 90 See the Auto quality section.
kirby3-webp.maxQuality Integer 85 Only relevant for jpegs and when quality is set to "auto".
kirby3-webp.defaultQuality Integer 85
kirby3-webp.metadata Array "none" Valid values: "all", "none", "exif", "icc", "xmp". Note: Currently only cwebp supports all values.

gd will always remove all metadata. ewww, imagick and gmagick can either strip all, or keep all (they will keep all, unless metadata is set to none)
kirby3-webp.encoding Array "auto" See the Auto selecting between lossless/lossy encoding section.
kirby3-webp.skip Boolean false If true, conversion will be skipped (ie for skipping png conversion for some converters)

๐Ÿ‘ Credit

๐Ÿคฉ How this plugin works

kirby3-webp

๐Ÿคฏ 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.

kirby3-webp's People

Contributors

casderooij avatar felixhaeberle avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.