最新WordPress图片压缩优化教程(Webp, Avif),优化速度必看

WordPress图片压缩
文章目录
文章目录

图片能更形象直观地描述内容,让内容更具吸引力从而提高转化率,是页面必不可少的元素。图片太多/太大会增加页面体积导致加载速度缓慢,增加服务器负担以及CDN流量成本。

根据迪亚莫多个站点优化经验,网站缓慢主要是因为图片的尺寸和体积太大。在尽量不影响图片显示效果的前提下,最大化压缩图片体积对WordPress优化速度以及谷歌SEO效果提升有重大帮助。

 

什么是WebP, Avif图片格式?

WebP格式是谷歌推出的新一代图片格式,比常规JPG格式体积减少30%左右,目前绝大多数浏览器/软件都支持这个格式。Avif格式更先进,体积比WebP格式减少25%左右可是清晰度却更高,非常有必要使用Avif格式!不过目前比较多设备不支持。据Caniuse统计,如今有95%用户设备支持WebP,有67%的用户设备支持Avif。

要减少图片体积又不降低清晰度的其中一个很好的办法就是使用插件把图片从Jpg/Png转成WebP/Avif,如果浏览器不支持Avif/WebP格式会自动切换显示Jpg/Png格式。

WebPAvif体积对比

WordPress图片压缩优化最好的方法是通过安装压缩插件实现。迪亚莫根据使用体验挑选对比4款优秀图片优化插件供大家选择。

不要直接把WebP、Avif格式相片上传到网站使用!有些设备不支持这2种格式,会导致图片显示异常。建议上传Jpg, Png相片,在使用插件生成WebP、Avif格式会启用回退功能,遇到不支持这2种格式设备会显示原图(Jpg,Png)。如果想把WebP、Avif转成Jpg、Png,使用Convertio,选择好原图片和目标图片格式后上传图片点“转换”。

Pasted 23

 

图片格式、尺寸选择

常规相片选Jpeg,这是最常用的图片格式,体积最小,默认情况下应该优先使用jpeg格式。

截图、透明背景图或者一些颜色比较鲜艳的相片选PNG格式,清晰度更好。应该只有在Jpeg不够清晰或者图片背景透明的情况下选择Png格式, 毕竟它的体积比Jpeg大不少。

图标、Logo、卡通插画之类尽量选SVG格式,无论放大缩小都非常清晰,体积最小。

动画如果只有1-3秒时间用Gif格式访问体验好些,时间比较长的话转成视频格式体积会减小,还可以延迟加载对速度有帮助。

Jpeg和Png图片要注意上传的图片尺寸,按实际显示出来的尺寸去制作图片这样显示最清晰,体积最小。例如600px(长)的图片如果显示出来的尺寸是600px是最清晰的。如果显示出来大于或者小于600px,图片都会被缩放,清晰度会下降。

如果是产品详情图会带有放大镜效果,图片尺寸反而要制作的大一点。手机端的图片显示尺寸比电脑端小,使用elementor之类单独制作页面要单独把手机端图片显示尺寸设置的小一点,或者直接使用小一点尺寸的图片。

 

WordPress图片压缩插件推荐对比

先说建议:Optimole > TinyPNG > ShortPixel > Imagify > Smush

如果网站服务器在国外并且每月访客人数(按IP算)少于5千,优先使用Optimole。
第二推荐的是TinyPNG,需要搭配WebP Converter For Media之类转WebP/Avif插件,或者使用带转WebP/Avif功能的CDN。

如果Optimole和TinyPNG都不符合你的情况,建议使用ShortPixel。
ShortPixel支持Avif格式、PNG转JPEG、图片压缩效果好,价格也比Imagify低。Imagify设置使用比较方便,图片压缩速度比ShortPixel快占用服务器资源比较少,确定是暂时不支持Avif。

Optimole,ShortPixel,Imagify,TinyPNG详细对比表格

Diiamo Logo white Optimole ShortPixel Imagify TinyPNG
安装量 8万+ 30万+ 60万+ 20万+
用户评价 5星 4.5星 4.5星 4.5星
免费账户额度 5千访客量 100张 20M 500张
最低付费套餐 $20.04/月- 2万5访客量/月 $4.99/月 - 7千次 (可只买一个月)
$9.99 - 1万次
$4.99/月 - 500M  (可只买一个月)
$9.99/月 - 无限

1100张 - $5.4

WebP格式
Avif格式
图片CDN
自动调整图像大小
Retina支持
延迟加载
调整压缩等级
压缩方式 线上云压缩 服务器压缩 服务器压缩 服务器压缩
Png转Jpg
压缩Gif
优势 自动加水印, 网络慢时自动降低图像质量,gif图片转视频,线上压缩 PNG转JPG,压缩PDF文档   免费额度最多,压缩质量/压缩速度最好,对服务器负担最小

 

Optimole

后起之秀,知道的人还不是很多,目前只有8万+安装量。我在海外速度优化博主Tom那里看到它的介绍于是抱着试一下的心态安装。经过一段时间使用发现Optimole真香,是目前为止我们使用过最好的图片优化插件!迪亚莫已经在所有B2B外贸建站客户网站安装使用。

Optimole优点:

  1. 线上云压缩/转换格式,不占用服务器资源;
  2. 把图片转换成WebP/AVIF格式;
  3. 免费!不限制图片压缩/转换次数!
  4. 根据访问者屏幕尺寸自动调整图片尺寸;
  5. 检测到较慢的网络时自动降低图像质量;
  6. 使用亚马逊CloudFront CDN;
  7. 支持Retina,智能裁剪;
  8. 没有 jQuery 的图片延迟加载(更好);
  9. 图片水印功能;

这么多超前、强大的功能+免费+不限制压缩/转换次数 + CloudFront CDN(全球200多个节点,速度不比Cloudfalre慢)+ SVG、GIF压缩 + 图片排除功能。我就问一句:还有谁!!!

%E8%BF%98%E6%9C%89%E8%B0%81

天底下没有这么好的免费午餐,免费账户只对网站每个月前5,000个访问者(按ip/浏览设备算,重复访客只计算一次)有加速效果,第5,001个访客开始会显示未压缩的原始格式图片(相当于这个插件被禁用),下个月恢复额度。

如果不想付费,Optimole只适合月访客少于5千的网站,例如外贸B2B网站。点击查看访问次数统计方法和详细内容。强制使用CloudFront CDN无法关闭,CloudFront(亚马逊)国内加速效果不好,国内网站不要使用Optimole。使用过程发现这5千额度很耐用,不会计算已知爬虫/机器人浏览次数,重复访问不计算次数,绝大多数B2B外贸独立站和小型博客不会超额。

如果流量多超过额度,建议改用ShortPixel之类插件。

Optimole设置界面有显示已用访客量。例如下图显示总共5千额度,已用14(0.28%)。

Pasted 3

如果网站多于5,000访客每月,会发送邮箱给你提示购买付费套餐,忽略就行,不会自动扣费,下个月恢复额度。

 

Optimole设置教程

进入设置界面

Pasted 11

输入邮箱,点击发送密匙,进入邮箱把邮件中间那串斜体的密匙复制下来。如果收不到邮件就查下垃圾邮箱或者换个QQ邮箱注册。

Pasted 12

拿到密匙点击上图的“我已有API密匙”,进入下图界面,输入api点Connect。

Pasted 13

进入“设置”>“通用”版块。

Pasted 16

启用图片替换:打开,会自动转WebP格式以及存放到亚马逊CDN,不需要因此启用WP Rocket之类插件的CDN功能。注意:默认情况下通过CSS加载的背景图片不会被优化,需要先打开下面的通过Optimole服务CSS和JS功能才会自动压缩优化背景图片。建议先使用TinyJPG在线压缩背景图片后再上传到网站使用。

缩放图片和延迟加载:建议关闭,因为实际效果不好。我在几个站点试过,首页banner会被延迟加载导致感知时间加长,就算排除延迟加载也不生效。而且其它图片的延迟加载不够灵敏,总是很迟才显示出来。建议使用Perfmatters的延迟加载功能代替,可指定CSS延迟加载背景图片,预加载靠前的关键图片。

Enable error diagnosis tool:关闭。提供故障排除机制,可帮助使用Optimole识别站点可能存在的问题。启用会增加服务器负担,如果网站出问题再打开这个选项查看原因,我们目前为止没遇到过问题。

 

接下来点击“高级”>“压缩”,按图启用功能。

Pasted 17

Enable network based optimizations:打开,检测到较慢的网络时自动降低图像质量,缩短加载时间。

通过Optimole服务CSS和JS:关闭,使用Cloudflare之类CDN比较好。毕竟超过5000访客Optimole会失效,CSS和JS CDN加速就芭比Q了,而且它不支持HTML、字体加速。

开启Gif到视频的转换:打开,视频体积至少比Gif小1/3,而且视频可以延迟加载缩短加载时间。如果你的动图是类似于表情包那种尺寸小,时间又短(体积小)不建议转成视频,Gif的用户体验好些。

Enable avif conversion:打开,大大减小图片体积,清晰度基本不变。

Enable Auto Quality powered by ML(Machine Learning):建议打开,会根据每张图片的情况调整压缩等级。这是个趋势,不同相片需要不同的压缩等级才能显示最好效果,统一压缩等级反而对某些相片不好。

如果不打开的话可以手动选择所有图片统一压缩等级,一般选中档最合适。如果是摄影类网站需要图片显示超级清晰,选高档。

 

进入“调整大小”版块,按图设置。

Pasted 18

启用智能裁剪:打开。图片超出显示框后会自动调整图片的位置,显示图像主体部分,而不是直接显示图片上部分。

启用视网膜图像:打开。如果访客使用Retina高清视网膜设备,会向访客提供视网膜清晰度图像。

Resize large images original source:打开,设置为1920 x 1920。设置网站相片可以显示的最大尺寸,绝大多数网站页面的最大尺寸是1920px,不会超过这个尺寸。

有些客户找我们优化网站速度,我们发现他们根本没有优化过图片,尺寸超级大体积去到2M。页面的总体积去到8M左右!常规页面体积应该在300k~1M,打开这个功能可以极大减少大尺寸相片体积。

 

“排除”版块设置。

Pasted 19

如果有些相片压缩后你觉得变模糊了,在这里输入相片名字可以排除掉,不压缩。只要输入图片名字中包含的部分文字/英文单词就可以,也可以输入完整图片名字。还可以排除具体某个页面的所有相片或者某种后缀(png, svg)的图片被压缩。

 

Pasted 20

Cloud Integration:不建议启用。这个对速度没帮助,只是管理相片。容易操作失误出错,还是别开启。

到此插件设置完毕,之前以及之后上传的相片会自动压缩处理,无需其它操作。如果有安装Elementor插件,需要按下图操作重新生成CSS和数据。

Pasted 22

如果安装了Wp Rocket,可能会提醒禁用掉Wp Rocket的图片延迟加载避免冲突。如果你在Optimole没有开启延迟加载图片,就不需要管这个提示。使用Wp Rocket清除缓存后提示应该会消失。

如果在其它插件启用了跟Optimole相同的功能,请关掉,不然会有冲突。设置好后可能网站一开始图片显示错误,那是因为图片还在压缩转化格式中。大概等20分钟后刷新页面图片正常显示,如果图片特别多等待的时间会更长。

现在用谷歌浏览器打开页面,按F12进入开发者工具可以看到图片的网址已经替换成Optimole.com网址,代表图片压缩和CDN加速已经生效。现在可以使用GTmetrix之类测试工具查看页面体积和加载速度的变化。

Pasted 25

 

TinyPNG

TinyPNG是大名鼎鼎的免费在线图片压缩网站,能保留清晰度的情况下最大限度压缩图片体积。后来推出TinyPNG – JPEG, PNG & WebP image compression这款图片压缩插件。免费!每个月可以压缩500张图片,图片压缩效果比ShortPixel、Imagify好,本站图片使用TinyPNG插件压缩图片,使用WebP Converter For Mediacch转WebP。

TinyPNG插件优点:

  1. 免费账户额度500张/月,还可注册多账号切换登录压缩;
  2. 图片压缩质量最好,压缩速度最快;
  3. 插件体积最小,对服务器负担最小;

该插件缺点是暂时无法生成WebP、Avif格式,不过可以和带图片转WebP、Avif功能的CDN(例如腾讯云,火山引擎,阿里云等)一起使用弥补这个缺点。也可以安装WebP Converter For Mediacch之类的插件把图片转化成WebP、Avif格式(具体配置看下方)。

 

TinyPNG设置教程

先去https://tinyjpg.com注册一个账号,注册后进入https://tinify.com/dashboard/api复制中间位置的api然后填入插件设置页面(位置: "设置" > "TinyPNG-...") 链接账户。

链接账户后会显示剩余可用额度,按图选择红色框Compress new images in the background (Recommended)。

Pasted 10

TinyPNG不可以设置压缩等级之类,功能非常很少。是因为它技术很成熟已经默认是最优设置,无需手动调整。每一张图片上传后会自动分析其最优压缩效果,所以无需调整压缩等级。颜色配置文件会自动转换为标准 RGB 颜色,自动将 CMYK 转换为 RGB 以节省更多空间并增加兼容性,使用渐进式 JPEG 编码更快地显示 JPEG 图像。

唯一的遗憾是暂时不支持WebP格式,作者说已经将WebP功能添加到更新计划中。我使用转WebP插件时发现有很多已压缩图片转成WebP后体积比原图还大!可见TinyPNG的压缩能力很牛逼,本身压缩效果很接近WebP效果。

无需转成WebP格式之类已经可以把图片体积压缩到最小,同时清晰度最好。

下图是勾选需要压缩哪些尺寸的图片。压缩缩略图也会计算额度,所以不需要压缩的尺寸不要勾选!原图肯定要勾选的,文章以及产品页大图尺寸如果有的话勾选一下,产品封面缩略图尺寸如果有的话也勾选一下。其它尺寸如果不确定有没有用在网站上,建议不勾选。

Pasted 9

Original image:Resize the original image 建议勾选

下面3项如果勾选会加大图片体积,建议不勾选,请根据自己情况决定。
Preserve creation date and time in the original image
在原始图像中保留创建日期和时间
Preserve copyright information in the original image
在原始图像中保留版权信息
Preserve GPS location in the original image (JPEG only)
在原始图像中保留GPS位置(仅限JPEG)

到此设置完毕,以后上传到媒体库的相片会自动压缩。之前已经存在的相片需要进入媒体库手动压缩一下。在这里也能看到已经压缩和未压缩的图片数量。

Pasted 7   Pasted 39

 

下面是安装WebP Converter For Mediacch插件教程,可以把压缩后的相片转WebebP格式。这个很有必要,本网站有几张PNG图片无论是压缩还是转Jpg体积都在 30-40kb 左右,使用此插件转WebP后体积直接降到10多kb。

进入插件安装页面搜“WebP”,找到下图插件,点击“立即安装”后启用。

Pasted 35

安装后进入插件设置页面,如果是Nginx服务器顶部会弹出提示,需要安装代码才能激活功能。进入宝塔面板 > “网站”,找到相应网站点击进入设置页面,点击“配置文件”,把下面代码复制粘贴到 server { ... }块里面最开始的位置(看下图)。详情查看插件官方文档FAQ版块里面的Configuration for Nginx。

# BEGIN WebP Converter for Media
set $ext_avif ".avif";
if ($http_accept !~* "image/avif") {
set $ext_avif "";
}

set $ext_webp ".webp";
if ($http_accept !~* "image/webp") {
set $ext_webp "";
}

location ~ /wp-content/(?<path>.+)\.(?<ext>jpe?g|png|gif|webp)$ {
add_header Vary Accept;
add_header Cache-Control "private" always;
expires 365d;
try_files
/wp-content/uploads-webpc/$path.$ext$ext_avif
/wp-content/uploads-webpc/$path.$ext$ext_webp
$uri =404;
}
# END WebP Converter for Media

Pasted 40

安装完代码后重启Nginx,刷新页面后应该生效,安装代码的提示消失。官方文档说还需要在另外一个文件安装2行代码,不过默认情况下那个文件已经存在那2行代码,所以这里不写安装教程,有疑问请评论留言。

Pasted 42

 

下面是WebP Converter for Media插件设置教程,按图设置。Avif功能仅在Pro版本可用,它的Pro版本可以线上转换格式+使用图片CDN之类所以有点贵,按月付款,不建议购买。如果很在意Avif格式建议使用ShortPixel插件。

Pasted 41

下图图片质量默认是85%,我喜欢清晰一点设为90%,看自己喜欢吧。设置后记得点保存。

Pasted 43

点击“Force convert all images”按钮变成绿色,再点击“Regenerate All”开始自动压缩媒体库相片。以后上传的相片会自动压缩,无需手动压缩。如果你修改了图片质量,需要在这里重新手动压缩一次。

Pasted 44

Pasted 45

用谷歌浏览器打开页面,按F12进入开发者工具可以看到图片体积已经减小。使用GTmetrix之类测试工具查看页面体积和加载速度的变化。

Pasted 36

 

ShortPixel

ShortPixel也是一款很不错的优化插件, 很多很多很多国外大V在网站宣传它,我也看到很多网站的图片使用它来优化。它也是最早支持Avif格式的优化插件,强烈推荐,目前安装量30万+。ShortPixel的功能比Imagify要多,例如把PNG转化成JPG,CMYK转RGB,转换成AVIF格式,可单独调整每张图片压缩等级等。

免费账户每个月只能压缩100张图片,月付费套餐$4.99/月可压缩7千张,$9.99/月可压缩1万6千张。可以购买一个月,压缩完后取消套餐转成免费套餐。

Pasted 5

也可以单独购买不限时长,不限站点的压缩额度,$4.99 - 1万次额度,$19.99 - 3万次额度。

Pasted 6

注意:压缩体积,转成Webp/Avif 都会计算压缩次数。建议不要压缩用不上的缩略图尺寸。

 

ShortPixel设置教程

安装完插件后台顶部会提示会弹出下面提示框,直接点击红色框进入设置页面。

Pasted 21

如果之前没注册过,在红色框输入邮箱地址,打勾后点击“请求Key”会进入注册界面,打勾点击“SIGN UP”后会直接显示key。

Pasted 15

复制下图红色框的key

Pasted 27

填入设置界面API Key框里点“验证”。

Pasted 29

 

普通版块设置,按图。

Pasted 32

压缩类型:有损”压缩的体积最小,最多人选择,图像质量也最差。建议选择“光泽”,体积和清晰度兼顾。建议根据实际图片压缩情况选择压缩等级,方法:先选择“有损”压缩,保存设置,然后去媒体库点击列表图标进入列表模式。

Pasted 26

选1-2张相片,点击最右侧的“立即优化”开始压缩相片。压缩后清理缓存复制图片网址在浏览器新窗口打开查看和原图对比下清晰度,如果你觉得压缩后不够清晰,把压缩等级设置为“光泽”再测试一遍。

Pasted 28

请同时包括缩略图:打勾,页面中有很多图片是缩略图,必须打勾压缩。

图像备份:打勾,可以随时恢复原图。

移除EXIF:建议打勾。EXIF 是一组在创建时自动嵌入到图像中的各种信息。这可以包括 GPS 位置、相机制造商、日期和时间等。我们建议将其删除以提高压缩率,如果你需要保留这些数据,别打勾。

调整大图像尺寸:打勾。2边都输入1920,选择Contain。页面最大能显示出来的宽度是1920px,所以图片设置最大尺寸为1920px准没错。图片高度可以适当设置高一点,建议不要超过1920px,不然会影响加载速度和客户体验。

 

高级版块设置,按图。

Pasted 30

其他媒体文件夹:忽略。默认情况下只优化Content(媒体库上传的所有图片和文件都在这里)文件夹里面的相片,绝大多数情况下网站也基本只用到这里的相片。如果你想压缩其它地方的相片,在这里添加路径。如果你不了解这个功能,别理它最好。

将PNG图像转换为JPEG图像:PNG比JPG清晰度更好,体积也更大。如果是截图之类PNG不建议转化成JPG,因为清晰度会下降很多,体积差不了多少。如果有些PNG图片体积很大,很有必要打开这个功能,注意清晰度的变化。如果生成的JPEG图像大于原始PNG图像,则不会进行转换。“还可以强制转换具有透明度的图片”不建议勾选。

CMYK转换至RGB:打勾,为电脑和移动屏幕显示调整图像颜色。用于网络的图像只需要RGB格式,将它们从CMYK格式转换为RGB格式会使它们变得更小。

Next Generation Images:创建WebP和Avif都打勾,能大大减小图片体积。

优化视网膜图像:打勾,支持Retina高清显示图片。

优化其他缩略图:打勾,能优化一些在前台显示,可是后台没找到的缩略图。注意:打开此选项会增加压缩额度的消耗。

优化PDF文档:打勾,能减小PDF文档体积。注意查看压缩后PDF里面图片的显示质量,如果下降很多就关闭这个功能。

排除模式:如果有些图片压缩后质量下降厉害,在这里输入图片的名字/路径等排除掉。也可以在媒体库里面单独修改/取消图片的压缩等级(具体方法参考上一个版块压缩等级设置)。

上传时优化媒体:建议打勾,ShortPixel会自动优化所有新上传的图像和PDF文件。如果你想手动压缩图片,不要打勾,转到媒体库(在列表视图中),然后单击右侧的“立即优化”按钮可以手动批量压缩图片。

前端处理:绝大部分网站用不上这个功能。如果你有用户在前端从自定义表单添加图像或PDF文档,请选中此项。如果有很多用户同时连接,这可能会增加服务器的负载。

排除缩略图尺寸:勾选前台页面显示没有用到的缩略图尺寸,大大节省压缩额度。

 

Cloudflare版块设置。
如果已经使用Wp Rocket之类插件链接Cloudflare,这里就不需要链接,忽略它。反之最好链接一下,可以选使用token或者global api key链接。如果恢复图像或者修改压缩等级,记得清理Wp Rocket之类插件缓存。

Pasted 33

 

数据统计版块
显示已用额度,剩余额度,压缩节省空间等数据。

Pasted 34

到此设置完毕,以后上传到媒体库的相片会自动压缩。之前已经存在的相片需要进入媒体库手动压缩一下。

Pasted 37            Pasted 38

 

Imagify

Imagify是Wp Rocket官方团队推出的图片压缩插件,目前安装量60万+ 。它设置简单,使用方便,对服务器资源占用少,功能齐全,可以单独更改每张图片的压缩等级(媒体库打开图片修改)。

缺点是目前不支持Avif格式以及免费账户每个月只有20M的压缩额度(太少了)。建议注册多个免费账户,超过额度后切换不同账户继续压缩图片。或者购买付费套餐(月付),一次性压缩完图片后再取消订阅计划,后续使用免费套餐压缩。

以前Imagify有一个压缩包套餐,9.9美金压缩1万张图片不限制时间,可是后来下架了。

月付$4.99,每月可压缩500M。月付$9.99,可无限压缩

NonsIc7EAAAAASUVORK5CYII=

 

Smush(不推荐)

3年前我还对图片压缩插件了解不多,那时候百度到Smush不错就安装使用。Nginx服务器需要安装代码才能激活WebP功能,我按提示在宝塔安装了相应代码可是依然无法启用功能,果断弃坑。当是还在宝塔论坛发了一篇帖子求助,包括宝塔官方人员在内没有一个人给出解决方法,直到现在还一直有人跟帖说遇到同样问题求答案。

Smuch 2018年获得最佳插件奖,知名度最高,目前安装量100万+。免费版本功能实在太少,无法转化成WebP/Avif,无法调整压缩等级,压缩效果不如其它3款插件,无压缩次数限制可能是它唯一优点。Pro版本5美金/月,不支持Avif,取消套餐WebP格式随之消失。

1百多万安装量估计是捆绑套餐带来的,Smush开发公司总共拥有了11款付费插件,月付$15.83可以在1个网站使用全部插件,月付$82.50可在无数网站使用全部插件。

想想都知道买了无限站点套餐之后大概率会低价转卖,安装量很容易起来。综合来看这插件实在没啥特别优点,这几年推荐它的博主也不多,还不如使用上面几款插件。

图片压缩插件对比到此结束,如有疑问或者推荐,欢迎下方评论交流。图片优化除了压缩体积外,还需要延迟加载图片、移动端缩放图片、开启缓存、使用CDN等才能发挥最大效果。具体请看《WordPress最全速度优化指南》。如需购买延迟加载,缓存插件请移步插件下载页面。

End

文章过时?有更好看法?有疑问?请在下方评论留言,我们会及时跟进。

推荐文章:
评论 :

发表评论

邮箱不会被公开, 评论框内禁止插入网址、邮箱

免注册快速登陆

输入用户名密码登录

没有账号? 忘记密码?
为了更好的用户体验,该网站使用 Cookies 隐私政策
该网站使用 Cookies 隐私政策