README

Kirby 3 CMS 插件，用于将 JPG、JPEG 和 PNG 转换为更小的 WEBP 格式 – 加速您的网站！ 🚀🔥

...并实现您梦寐以求的 Lighthouse 统计数据！ 😍

🥁 安装

Composer

composer require felixhaeberle/kirby3-webp

Git 子模块

git submodule add https://github.com/felixhaeberle/kirby3-webp.git site/plugins/kirby3-webp

克隆或下载

克隆或下载此存储库。
解压/将文件夹移动到site/plugins。

1️⃣ 激活插件

在site/config/config.php文件中通过kirby3-webp => true激活插件。

return [
  'kirby3-webp' => true
]

2️⃣ 开始使用

安装并激活插件后，您需要通过您的服务器配置将 webp 文件 提供给前端。

Apache

将以下内容添加到您的.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

对于 NGINX，使用以下虚拟主机配置

// 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;
  }
}

⚙️ 选项

当使用 kirby3-webp 时，您有多种选项来配置它以满足您的需求

👏 致谢

🤩 插件的工作原理

🤯 值得了解的事情

有时，如果图片真的很大（多个 MB），转换过程自然会花费更长的时间，但肯定会完成。.webp 被生成，但未选择，因为如果客户端可以接受 .webp，则 .webp 会发送给客户端，而不是 .png、.jpeg 或 .jpg。因此，您需要 Apache/nginx 配置。

felixhaeberle / kirby3-webp

维护者

详细信息