网站建设完成后一定要用webp优化整站图片

很多企业网站和个人站长在网站建设完成后都没有对网站进行有效的优化,作为网站优化必不可少的一个简单环节是压缩网站整体图片体积可以使网站加载更快,网站加载快在SEO中也是一个加分项。

对于wordpress来说有很多插件可以实现自动的将图片转换为webp格式,但对于其他基于cms建站的企业网站来说可能没有合适的插件来完成这个步骤,因此本教程主要是告诉大家如何使用谷歌libwebp来手动的将其他图片格式压缩为webp格式。在教程正式开始之前简单介绍一下webp背景。

web由谷歌公司开发

Google在2010年推出的一种现代图片格式:WebP(发音为“weppy”),你可以把它理解为谷歌为了让网页加载得更快而精心调制的一道“压缩菜”。

下载安装

你可以点击download进入libwebp库的下载页面。

这里以windows为例,如图所示,点击下载“windows版本“

谷歌webp库下载页面

下载完成后将他解压出来

解压谷歌webp

然后我们为它设置一个系统环境变量,以便于直接可以在cmd中使用它。

在用户变量窗口下方双击Path

为libwebp设置环境变量.jpg

在弹出的“编辑环境变量”窗口中,点击新建,将libwebp的绝对路径包含bin目录添加其中。

图片[4]-网站建设完成后一定要用webp优化整站图片-搞定建站

安装使用

安装完成后现在我们可以来使用了。

首先打开CMD(快捷键WINDOS+R)输入cmd,在弹出的窗口中输入:

cwebp - version

回车后,输出如下图所示信息表示安装成功

在cmd窗口中检查libwebp是否安装成功.jpg

接下来我们开始压缩图片

输入如下指令:

cwebp -q 85 -m 6 -mt -af 网站建设599起600X270.png -o 网站建设599起.webp

这条指令的含义是,以较高的质量(85)和最大压缩努力,将名为 网站建设599起600X270.png 的 PNG 图片,转换成同名的 WebP 格式图片 网站建设599起.webp。

转换成功将输出如下图所示信息

将png成功转换webp.jpg

🔧 cwebp 转换输出信息详解

Saving file '网站建设599起.webp'
File:      网站建设599起.png
Dimension: 1529 x 688
Output:    56058 bytes Y-U-V-All-PSNR 45.29 47.17 47.52   45.87 dB
           (0.43 bpp)
block count:  intra4:       2269  (54.97%)
              intra16:      1859  (45.03%)
              skipped:        41  (0.99%)
bytes used:  header:            314  (0.6%)
             mode-partition:  10229  (18.2%)
 Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
    macroblocks:  |       1%|       5%|      21%|      73%|    4128
      quantizer:  |      20 |      19 |      17 |      12 |
   filter level:  |      23 |      13 |      14 |       6 |

📊 输出信息解读

输出项数值含义解读
文件保存网站建设599起.webp✅ 转换成功,文件已保存
原始文件网站建设599起.png输入的原图文件名
图片尺寸1529 x 688 像素宽1529px,高688px,中等偏大的横幅图片
输出大小56058 字节 (~54.7 KB)压缩后文件体积,非常适合网页使用
PSNR值平均 45.87 dB画质极好 (>45dB人眼难辨差异)
bpp值0.43每像素位数,压缩效率良好

🎯 技术细节分析

项目数值技术含义
intra4/intra1654.97% / 45.03%预测模式分布均衡,编码质量高
skipped0.99%跳过宏块极少,内容充分编码
header/mode0.6% / 18.2%文件头部开销小,结构紧凑
quantizer20 → 12量化器逐段降低,智能分级压缩
filter level23 → 6滤波强度递减,边缘细节保留好

更多webp转换指令

接下来我把常用的webp转换指令列出

基础有损压缩(默认质量)

cwebp 网站建设599起.png -o 网站建设599起.webp

功能作用:使用默认质量(75)进行有损压缩。这是最简单的转换方式,适合快速测试,但压缩效果和画质平衡可能不是最优。

指定质量压缩(75-95常见范围)

cwebp -q 90 网站建设599起.png -o 网站建设599起_q90.webp

功能作用:使用质量90进行压缩。-q 值越高画质越好,文件越大。常用范围:

  • -q 75:默认值,良好平衡
  • -q 85:高质量(你之前用的)
  • -q 90:接近无损视觉
  • -q 95:极高画质,文件明显增大

无损压缩(完美保留画质)

cwebp -lossless 网站建设599起.png -o 网站建设599起_lossless.webp

功能作用:无损模式,100%保留原始像素信息,画质零损失。适合需要精确还原的图标、线条图、截图等。但文件通常比有损压缩大。

近无损压缩(画质与体积的折中)

cwebp -near_lossless 60 网站建设599起.png -o 网站建设599起_near60.webp

功能作用:近无损模式,参数范围 0-100(推荐 40-60)。在无损基础上轻微调整像素以提升压缩率,肉眼几乎看不出差异,但文件比纯无损小很多。

调整压缩方法(速度与效率权衡)

cwebp -q 85 -m 4 网站建设599起.png -o 网站建设599起_m4.webp

功能作用:-m 0-6 控制编码方法的复杂度。数值越高,压缩效果越好(文件更小),但编码速度越慢:

  • -m 0:最快,文件最大
  • -m 4:默认,良好平衡
  • -m 6:最慢,文件最小(我在示例中使用的是这个)

开启自动滤波器(优化视觉质量)

cwebp -q 80 -af 网站建设599起.png -o 网站建设599起_af.webp

功能作用:-af 让编码器根据图像内容自动调整滤波强度,在低码率下获得更平滑的图像,减少块状失真,提升主观视觉质量。

开启多线程(加快转换速度)

cwebp -q 85 -mt 网站建设599起.png -o 网站建设599起_mt.webp

功能作用:-mt 启用多线程编码,利用CPU多核心加速转换,尤其适合大图片或批量处理,且不影响画质和文件大小。

调整图片尺寸(等比例缩放)

cwebp -q 85 -resize 800 0 网站建设599起.png -o 网站建设599起_800w.webp

功能作用:-resize 宽 高 在转换时等比例调整图片尺寸。将其中一个维度设为0可保持宽高比自动计算。示例中设为宽800px,高自动按比例计算。

裁剪图片(指定区域)

cwebp -q 85 -crop 100 50 1200 600 网站建设599起.png -o 网站建设599起_crop.webp

功能作用:-crop x y 宽 高 从原图中裁剪指定区域。示例中从坐标(100,50)开始,裁剪宽1200px、高600px的区域。

单独控制透明通道质量

cwebp -q 85 -alpha_q 80 网站建设599起.png -o 网站建设599起_alpha80.webp

功能作用:如果图片有透明背景(PNG-24),-alpha_q 0-100 可单独控制透明区域的压缩质量。100为无损,降低数值可减小体积但可能损失透明度细节。

模拟JPEG文件大小(风格适配)

cwebp -q 85 -jpeg_like 网站建设599起.png -o 网站建设599起_jpeglike.webp

功能作用:-jpeg_like 调整内部参数,使输出文件大小更接近同等 -q 值的JPEG文件,同时保持WebP的视觉优势。

无元数据转换(移除EXIF等信息)

cwebp -q 85 -nometadata 网站建设599起.png -o 网站建设599起_nometa.webp

功能作用:-nometadata 移除图片中的EXIF、XMP等元数据(如拍摄参数、GPS信息),可进一步减小文件体积,且不影响画质。

指定输出文件大小(自动调整质量)

cwebp -size 50000 网站建设599起.png -o 网站建设599起_size50k.webp

功能作用:-size 字节数 让编码器自动调整压缩参数,使输出文件大小尽量接近指定值(示例为50KB)。适合有严格文件大小限制的场景。

完整优化组合(兼顾画质与体积)

cwebp -q 85 -m 6 -mt -af -pass 10 -f 50 网站建设599起.png -o 网站建设599起_best.webp

功能作用:最强优化组合:

  • -pass 10:多遍分析编码(1-10),值越高分析越精细
  • -f 50:设置去块滤波强度(0-100),50为平衡值
    适合对图片质量有极致要求的场景。

批量转换(PowerShell命令)

Get-ChildItem *.png | ForEach-Object { 
    $out = $_.BaseName + ".webp"
    cwebp -q 85 -m 6 -mt $_.Name -o $out
}

功能作用:批量转换当前文件夹所有PNG图片,统一使用 -q 85 -m 6 -mt 参数,自动生成对应名称的WebP文件。

日常推荐指令组合

日常网页图片

cwebp -q 85 -m 4 -mt 输入.png -o 输出.webp

高质量摄影作品

cwebp -q 90 -m 6 -mt -af 输入.jpg -o 输出.webp

图标/线条图/截图

cwebp -lossless -m 6 -mt 输入.png -o 输出.webp

极致压缩(小文件优先)

cwebp -q 65 -m 6 -mt -af 输入.png -o 输出.webp

批量处理文件夹

使用上面的PowerShell批量命令

© 版权声明
THE END
喜欢就支持一下吧
点赞6 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容