maxresdefault.jpg

I. 主理人序

Pagespeed.png

本博客于2019年中旬开始支持WebP,在保持肉眼可见的清晰度条件下对JPEG/JPG/PNG/进行了极致压缩(PNG可达到90%的压缩率,JPG/JPEG可达25%-40%的压缩率);现在就网站优化,总结经验分享给大家。BTW,优化过后的图片加载速度是非常可观的。

II. Webp 是什么

Web的新图像格式

WebP是一种现代图像格式,可为Web上的图像提供出色的无损和有损压缩。使用WebP,网站管理员和Web开发人员可以创建更小,更丰富的图像,从而使Web更快。

与PNG相比,WebP无损图像的尺寸要小26%。在同等的SSIM质量指数下,WebP有损图像比同类JPEG图像 小25-34%

无损WebP支持透明性(也称为Alpha通道),仅增加22%的额外字节。对于可以接受有损RGB压缩的情况,有损WebP还支持透明性,与PNG相比,文件大小通常小3倍。

什么浏览器支持 WebP?

WebP image format.png

via https://caniuse.com/webp

在Google Chrome,Firefox,Edge,Opera浏览器以及许多其他工具和软件库中都原生支持WebP 。开发人员还增加了对各种图像编辑工具的支持。

WebP包括轻量级的编码和解码库libwebp 以及命令行工具,cwebp以及dwebp用于将图像与WebP格式相互转换的工具,以及用于查看,合并和动画化WebP图像的工具。完整的源代码可在 下载页面上找到。

最新版的 Safari 已部分支持 Webp,Nice Job;

III. WebP Converter 下载与安装

通过下载 cwebp适用于Linux,Windows或Mac OS X的预编译转换工具,将您喜欢的收藏从PNG和JPEG转换为WebP 。

在项目的邮件列表中告诉我们您的经验。

安装Webp编码/解码工具

libweb:适用于 Linux、Windows 和 macOS 的预编译 WebP 实用程序和库。 Via https://developers.google.com/speed/webp/download?hl=zh-cn

下载地址webp 官网;(点击官网查看并下载最新版本),本教程安装示例为 libwebp-1.1.0 版本,发布时间为 2020-01-06T23:53:54Z;

安装说明webp 官网

libwebp-1.1.0 版本安装示例

安装必要的依赖

sudo apt-get install libjpeg-dev libpng-dev libtiff-dev libgif-dev

下载 libwebp 压缩包、解压、编译、安装

wget https://storage.googleapis.com/downloads.webmproject.org/releases/webp/libwebp-1.1.0.tar.gz
tar xvzf libwebp-1.1.0.tar.gz
cd libwebp-1.1.0
./configure
make
sudo make install

1.这将构建和安装cwebpdwebp命令行工具,以及libwebp库(动态和静态)。
2.这些工具通常/usr/local/bin/默认情况下安装。本地版本在examples/目录下构建。
3.该库通常将安装在该/usr/local/lib/ 目录下。为避免运行时错误,请确保您的 LD_LIBRARY_PATH环境变量包含此位置。C头文件通常安装在下/usr/local/include/webp

CWebP 命令行工具的使用

使用cwebp将图像转换为WebP的格式

cwebp在命令行上使用可以将PNG或JPEG图像文件转换为WebP格式。您可以使用以下命令将PNG图像文件转换为质量范围为80的WebP图像:

cwebp -q 80 image.png -o image.webp #其中80所在参数区间为1-100,代表压缩质量,一般选择75;

cwebp 高阶使用参数

名称

cwebp -将图像文件压缩为WebP文件

概要

cwebp [options] input_file -o output_file.webp

描述

cwebp使用WebP格式压缩图像。输入格式可以是PNG,JPEG,TIFF,WebP或原始Y'CbCr样本。注意:不支持动画PNG和WebP文件。

选件

基本选项是:

-o string 指定输出WebP文件的名称。如果省略,cwebp将执行压缩,但仅报告统计信息。使用“-”作为输出名称会将输出定向到“ stdout”。

-- string 明确指定输入文件。例如,如果输入文件以“-”开头,则此选项很有用。此选项必须出现last。此后任何其他选项将被忽略。

-h, -help 简短的使用摘要。

-H, -longhelp 所有可能选项的摘要。

-version 打印版本号(作为major.minor.revision)并退出。

-lossless 对图像进行编码,不会造成任何损失。对于具有完全透明区域的图像,仅当使用该-exact选项时,才会保留不可见像素值(R / G / B或Y / U / V) 。

-near_lossless int 指定近乎无损的图像预处理级别。此选项调整像素值以帮助压缩,但对视觉质量的影响最小。它会自动触发无损压缩模式。范围是0(最大预处理)到100(不进行预处理,默认)。典型值在左右60。请注意,-q 100 有时可能会产生更好的结果。

-q float0和之间指定RGB通道的压缩系数100。默认值为75。如果有损压缩(默认),则较小的因数会产生质量较低的较小文件。通过使用值可获得最佳质量 100。在无损压缩(由-lossless选项指定)的情况下,较小的因数可以加快压缩速度,但会产生较大的文件。通过使用值可实现最大压缩100

-z int lossless以0到9之间的指定级别打开压缩模式,级别0是最快的,级别9是最慢的。快速模式比慢速模式产生更大的文件大小。一个很好的默认值是-z 6。实际上,此选项是某些有关质量和方法的预定义设置的快捷方式。如果随后使用-q 或选项-m,它们将使该选项的效果无效。

-alpha_q int0和 之间指定alpha压缩的压缩因子100。使用值可实现alpha的无损压缩100,而较低的值会导致有损压缩。默认值为 100

-preset string 指定一组预定义参数以适合特定类型的源材料。可能的值有:defaultphotopicturedrawingicontext。由于将-preset覆盖其他参数的值(-q 一个参数除外),因此此选项最好应按参数的顺序首先出现。

-m int 指定要使用的压缩方法。此参数控制编码速度与压缩文件大小和质量之间的权衡。可能的值从06。默认值为4。当使用更高的值时,编码器将花费更多的时间检查其他编码可能性,并决定质量增益。较低的值可能导致处理时间更快,但文件大小较大且压缩质量较低。

-resize width height 将源调整为大小为widthx的矩形height。如果width或height参数中的任何一个(但不是全部)均为0,则将计算该值,并保留宽高比。

-crop x_position y_position width height 将源裁剪为在坐标(x_positiony_position)处具有左上角且大小为widthx的矩形height。此裁剪区域必须完全包含在源矩形内。

-mt 如果可能,请使用多线程进行编码。

-low_memory 通过节省四倍于压缩大小(通常)来减少有损编码的内存使用。这将使编码变慢,并且输出的大小和失真会稍有不同。该标志仅对方法3及更高版本有效,并且默认情况下处于禁用状态。请注意,保留此标志将对比特流产生一些副作用:它将强制执行某些比特流功能,例如分区数(强制为1)。请注意,cwebp使用此选项时,将打印有关位流大小的更详细的报告。

有损期权

这些选项仅在进行有损编码(默认设置,带有或不带有alpha)时才有效。

-size int 指定目标大小(以字节为单位)以尝试达到压缩输出。压缩程序将通过几次部分编码,以便尽可能接近此目标。如果同时使用-size和, -psnr则以-size价值为准。

有关编码器,其标准和高级选件的说明,请查阅cwebp 文档

IV. Webp 批量压缩图片Shell脚本

假设该脚本命名为 cwebp.sh

脚本说明:使用 find 命令 查找(递归查找)某个文件夹下的所有以 JPEG/PNG 为后缀的文件,然后再利用 for...in 循环,对 find 命令的执行结果执行压缩操作,一旦找到就对其执行压缩命令,此处为压缩50%;
#!/bin/bash

echo "===== Converting images into WebP .webp ====="
for x in $(find /typecho/usr/uploads/* -type f \( -iname \*.jpeg -o -iname \*.jpg -o -iname \*.png \)); do
    cwebp -quiet -q 50 ${x} -o ${x}.webp
    echo "Converted $x to ${x}.webp"
done

延伸

假设该脚本命名为 cwebp_daybyday.sh

需求说明:每日定时执行,压缩本日新增的图片文件;其中,图片大小大于 3000000 bytes(约3MB),压缩至原大小的 30%;大于 2000000 bytes(约2MB)的图片,压缩至原大小的 35%;大小大于 1000000 bytes(约1MB)的图片,压缩至原大小的 40%;其他,压缩至原大小的 50%;
#!/bin/bash

echo "===== Converting images into WebP .webp ====="
years=$(date "+%Y")
month=$(date "+%m")
day=$(date "+%d")

for x in $(find /typecho/usr/uploads/$years/$month/$day/* -type f \( -iname \*.jpeg -o -iname \*.jpg -o -iname \*.png \)); do
    if [ $(ls -l ${x} | awk '{ print $5 }') -gt 3000000 ]; then
        cwebp -quiet -q 30 ${x} -o ${x}.webp
        echo "Converted $x to ${x}.webp"
    elif [ $(ls -l ${x} | awk '{ print $5 }') -gt 2000000 ]; then
        cwebp -quiet -q 35 ${x} -o ${x}.webp
        echo "Converted $x to ${x}.webp"
    elif [ $(ls -l ${x} | awk '{ print $5 }') -gt 1000000 ]; then
        cwebp -quiet -q 40 ${x} -o ${x}.webp
        echo "Converted $x to ${x}.webp"
    else
        cwebp -quiet -q 50 ${x} -o ${x}.webp
        echo "Converted $x to ${x}.webp"
    fi
done

V. lnmp 配置 vhost 配置文件(nginx)

图片压缩好后就可以在 nginx 配置上做适配了;找到你的站点配置文件,如博主的是 /usr/local/nginx/vhost/limbopro.com.conflocation (用以配置静态文件)段复制粘贴如下配置段;参考:一文理清 nginx 中的 location 配置(系列一)

配置文件在哪?

输入如下命令行:

nginx -t

即可查到:

julia@localhost:/home$ nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

P.S. 修改配置文件之前记得备份!

cp /etc/nginx/nginx.conf /etc/nginx/nginx.conf.bak

配置如下:

http配置段

## 配置在配置文件中 server配置段 的上方,也就是 server {} 上方;http配置段;
map $http_accept $webp_suffix {
   default "";
   "~*webp" ".webp";
}

location 配置段

## 配置在配置文件中 location 配置段
## Webp 图片切换
location ~ .*\.(gif|jpg|jpeg|png)$ {
add_header Cache-Control "public, no-transform";
add_header Vary "Accept-Encoding";
try_files $uri$webp_suffix $uri =404;
expires max;
access_log off;
}

然后,保存!重启 nginx 即可!

VI. Chrome 开发者工具查看压缩效果

cwebp 压缩效果.png

via 谷歌开发者工具

VII. 设置 Crontab 自动化脚本

crontab -e #打开 crontab 配置文件
55 23 * * * /home/cwebp.sh; #每日晚11点55分压缩JPEG/PNG图片至WEBP以保持网页打开畅快

参考:Linux crontab 命令

VIII. gif2webp?GIF转换webp

如果你已按上述教程安装 libwebp ,参阅 gif2webp命令使用教程即可 :https://developers.google.com/speed/webp/download?hl=zh-cn

IX. Faq

1.为什么不生效?
如果你使用了 CDN,务必清理一次 CDN 缓存或无痕模式打开;

X. 参考资料

1.官网:A new image format for the Web
2.PageSpeed Insights 规则
3.使用命令行创建 WebP 图片
4.cwebp 使用文档

最后修改:2023 年 09 月 18 日 01 : 57 PM