jekyll webp
1.0.0
Jekyll 站点的 WebP 图像生成器可以自动为静态站点上的所有图像生成 WebP 图像,并在可能的情况下提供它们。在 rubygems.org 上查看。
在我的博客 blog.sverrrirs.com 上了解有关此工具的更多信息
gem install jekyll-webp
该版本包含运行所需的所有文件,包括 WebP 可再发行可执行文件。
目前该版本包括适用于 Windows、Linux 和 Mac OS X 10.9 (Mountain Lion) 的 WebP 实用程序 v0.6.1 版本。其他版本和发行版可以直接从 Google 页面下载。
将 gem 添加到Gemfile
和 Jekyll 的_config.yml
中,然后再次运行jekyll serve
,您应该会看到生成器在站点生成期间运行。
可以通过包含webp
配置元素在站点的_config.yml
文件中配置该插件
# ###########################################################
# Site configuration for the WebP Generator Plugin
# The values here represent the defaults if nothing is set
webp :
enabled : true
# The quality of the webp conversion 0 to 100 (where 100 is least lossy)
quality : 75
# List of directories containing images to optimize, nested directories will only be checked if `nested` is true
# By default the generator will search for a folder called `/img` under the site root and process all jpg, png and tiff image files found there.
img_dir : ["/img"]
# Whether to search in nested directories or not
nested : false
# add ".gif" to the format list to generate webp for animated gifs as well
formats : [".jpeg", ".jpg", ".png", ".tiff"]
# File extensions for animated gif files
gifs : [".gif"]
# Set to true to always regenerate existing webp files
regenerate : false
# Local path to the WebP utilities to use (relative or absolute)
# Omit or leave as nil to use the utilities shipped with the gem, override only to use your local install
# Eg : "/usr/local/bin/cwebp"
webp_path : nil
# List of files or directories to exclude
# e.g. custom or hand generated webp conversion files
exclude : []
# append '.webp' to filename after original extension rather than replacing it.
# Default transforms `image.png` to `image.webp`, while changing to true transforms `image.png` to `image.png.webp`
append_ext : false
# ###########################################################
如果您无法控制网络服务器,那么使用<picture>
元素并指定所有可用的图像格式是最好的选择。这样浏览器就会根据自己的能力决定使用哪种格式。
< picture >
< source srcset =" /path/to/image.webp " type =" image/webp " >
< img src =" /path/to/image.jpg " alt ="" >
</ picture >
如果可以,那么配置您的网络服务器以将新的.webp文件提供给支持该格式的客户端可能是问题最少的方法。这样,您无需对 HTML 文件进行任何更改,因为当客户端支持 WebP 图像时,您的网络服务器将自动提供 WebP 图像。
下面是 Apache Web 服务器中 .htaccess 配置部分的示例。只要有可能,它就会将用户重定向到 webp 图像。
####################
# Attempt to redirect images to WebP if one exists
# and the client supports the file format
####################
# check if browser accepts webp
RewriteCond %{HTTP_ACCEPT} image/webp
# check if file is jpg or png
RewriteCond %{REQUEST_FILENAME} (.*).(jpe?g|png)$
# check if corresponding webp file exists image.png -> image.webp
RewriteCond %1.webp -f
# serve up webp instead
RewriteRule (.+).(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
AddType image/webp .webp
根据
.htaccess
文件中的其他配置,您可能需要更新ExpiresByType
、ExpiresDefault
和Header set Cache-Control
指令以也包含 webp 格式。