个人中心

终极WordPress图片压缩优化教程, 含插件对比, TinyPNG、ShortPixel

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

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

根据HTTP Archive的数据,平均而言图像约占普通网站页面大小的一半,优化图片成为减少网站大小、提升页面加载速度的关键之一。

 

为什么WordPress网站一定要压缩图片?

我们迪亚莫看过很多网站相片体积巨大,没有经过压缩优化。页面加载缓慢,图片很久才加载出来。这样的网站客户体验极差,给访客第一印象很不好,大部分客户会选择跳出。

一般情况下页面体积有60%(甚至更多)是图片,通过压缩图片可以在不损失图片质量的情况下大大减小页面体积。从而极大缩短加载时间和缩减带宽、CDN成本,也能提高提高用户体验、SEO效果和转化率,非常有必要。

 

什么是WebP, Avif图片格式?

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

WebPAvif体积对比

 

WebP格式是谷歌推出的新一代图片格式,比常规JPG格式体积平均减少30%左右,使用WebP格式是目前减小图片体积最合适的方法,Avif支持的浏览器还不是很全。

下图是支持WebP格式的浏览器版本,绿色代表支持,棕色是部分支持,红色表示不支持。从下图可以看出除了IE浏览器外其它浏览器都支持,而IE浏览器已经被Edge浏览器代替,所以大家可以大胆放心使用WebP。

image

 

Avif格式更先进,体积比WebP格式平均减少25%左右可是清晰度却更高!非常有必要使用Avif格式!Edge浏览器目前还不支持Avif(下图),不过官方已经在筹划,可能2024年会支持。

目前仅有ShortPixel和Optimole等少数插件支持转Avif,而且一般需要付费。建议现在先用插件转WebP效果已经很不错,等Avif流行后相应图片优化插件应该增加转Avif功能。

image 1

 

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

不要直接把Avif格式图片上传到网站使用(WebP可以直接上传),有些设备不支持Avif,会导致图片显示异常。建议上传Jpg、Png、WebP格式,再使用插件生成Avif格式。遇到不支持这种格式设备自动回退显示原来格式。

转换图片格式可以使用Convertio等在线转换工具,有很多免费的,自己百度下。选择好原图片和目标图片格式后上传图片点“转换”。

Pasted 23

 

选择正确的图片格式、尺寸、分辨率(DPI)

提示:不要不要不要先转成WebP再上传到媒体库!WebP图片使用插件压缩后可能出错导致图片显示错误、模糊等。

常规图片应选Jpg格式,显示效果不错,体积最小。事实上绝大部分图片都应该优先使用jpg格式。

PNG是无损格式,更加清晰,体积一般也更大。透明背景图或者一些高清图标等应该选择PNG格式。文字截图等颜色比较单一色彩不多的图片也应该选择PNG格式,体积反而比JPG小。知识点:WebP格式支持透明背景。

图标、Logo、卡通插画之类尽量选SVG格式,无论放大缩小都非常清晰,体积最小。如果一个页面SVG图标多达十几个体积去到几十KB,改用woff之类图标字体会减小体积。

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

制图也要注意尺寸,按实际显示出来的尺寸去制作图片这样显示最清晰,体积最小。例如显示出来的尺寸是600px, 制作600px的图片显示出来最清晰,体积最小。

制作的相片如果大于600px,图片显示出来清晰度可能会有所下降,体积大加载速度也会相对变慢。如果是响应式网页,要同时考虑图片在手机端尺寸,可能一张图在手机端显示出来的尺寸会比电脑端大。

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

图片分辨率(DPI)也是影响图片体积的一个重要因素,DPI越高图片体积越大。你是否遇到过图片无论怎么压缩体积都很大?那是因为图片的DPI设置的太高,有些美工考虑打印质量会把图片做成300DPI。

DPI只对打印有用,数值越高打印出来越清晰。可是网页显示不会用到DPI,无论设为300还是72,图片在网页显示出来的尺寸和清晰度是一样的,可是300DPI图片的体积是72DPI的好几倍!

所以制图时一定要把DPI设置为72,或者图片输出保存成“网页常用格式” (会自动设置72DPI),可以极大减小图片体积。

Pasted 100

如果图片已经制作好,直接使用PS等修改DPI会导致图片尺寸变小。建议使用免费在线照片分辨率(DPI)修改工具修改图片DPI改为72,图片尺寸会保存不变。

 

WordPress图片压缩插件对比推荐

先说结论,没有最好的图片压缩插件,只有最合适的。要根据自己图片情况和对图片质量的要求选择合适的插件。

不要过度追求图片压缩率,应该优先考虑图片显示质量,清晰的相片提供更好的客户体验和转化率。一张相片多或者少十几KB对速度的影响基本可以忽略不计,而且还可以使用延迟加载、预加载等方法优化图片加载。

1) 如果网站服务器在国外(国内网站别用)并且每月访客人数(按IP算)少于5千,推荐优先使用Optimole。免费、支持WebP/Avif、不限制图片数量,支持CDN,效果好,无敌。

如果是外贸网站,图片不多前期基本也没有流量。建议使用Optimole,效果好使用简单。等流量涨起来赚到钱后再改用ShortPixel,切换过去也很简单,费用不高。

2) 如果Optimole不合适,又舍得花钱直接使用ShortPixel,功能全效果好、支持Avif、省事。花9.9美金买个永久压缩套餐可压缩1万张相片,扣除缩略图尺寸和WebP、Avif额度实际上可压缩1,000~2,000张相片,中小网站够用。

3) 如果Optimole不合适,又不想花一分钱,图片不多的话推荐使用Imagify,省事+免费+效果不错。免费账户有20M/月压缩额度,可以注册多个免费账户切换使用,中小网站够用。舍得花钱也可以花$4.99买500M压缩额度(可压缩300-500张相片,有效期一个月),$9.99无限压缩额度(有效期一个月)。

4) 如果上面的方案都不合适,不想花钱、又嫌注册多账户切换使用麻烦,推荐使用TinyPNG + Performance Lab (PL) ,免费账户一个月可以压缩500张相片(完全够用,还可以注册多账号切换使用),图片压缩质量最好。

注意:方案4)无法把安装插件之前已经上传到媒体库的相片转成WebP格式,这个方案比较适合新网站。

5) 如果使用SiteGround Optimizer、LiteSpeed Cache之类插件,建议使用插件自带的图片压缩功能,没有额度限制、简单省事、也能转WebP。

你在本教程页面看到的所有相片,都使用Easy Watermark插件加水印后使用TinyPNG压缩。

Optimole,ShortPixel,Imagify,TinyPNG (2022.12) 详细对比表格

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

$5.4 - 1100张

WebP格式
Avif格式
图片CDN
自动调整图像大小
Retina支持
延迟加载
调整压缩等级
压缩方式线上压缩线上压缩线上压缩本地压缩
Png转Jpg
压缩Gif
优势免费、功能齐全效果好、带CDN功能、支持AVIF功能齐全、效果好、省事、支持AVIF免费、设置简单,功能齐全支持WebP免费+额度多;压缩质量/速度最好;对服务器负担最小
缺点不适合大陆网站,限制5,000访客/月得花钱不支持AVIF,得花钱或者注册多账号使用不支持AVIF,无法恢复原图

 

Optimole

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

它还带有CDN功能可以把图片、CSS、JS放到亚马逊CDN加速,用了这个插件甚至可以不使用其它CDN服务!还有云端存储图片功能,如果你的图片特别多服务器硬盘容量不够就可以把图片全部移到云端(媒体库不存放图片)。

Optimole优点:

  1. 能延迟加载背景图片,可以排除延迟加载选定图片;
  2. 移动端自动调整图片尺寸提升加载速度;
  3. 把图片转换成WebP/AVIF格式;
  4. 免费!不限制图片压缩/转换次数!
  5. 根据访问者屏幕尺寸自动调整图片尺寸;
  6. 检测到较慢的网络时自动降低图像质量;
  7. 使用亚马逊CloudFront CDN;
  8. 支持Retina,智能裁剪;
  9. 没有 jQuery 的图片延迟加载(更好);
  10. 图片水印功能;

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

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

特别值得说明的是Optimole支持移动端自动调整图片大小,这是其它图片优化插件没有的。电脑端banner图一般尺寸是1920px,体积通常100kb以上,而移动端通常显示尺寸不超过500px,体积50kb以内。

Pasted 93

移动端能自动根据屏幕尺寸调整图片大小的话,单是banner图的体积至少能降低60kb这样,一整个页面体积至少能降低120kb以上。这对提升手机端速度非常有帮助,也能提高谷歌测速手机端分数!

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

如果不想付费,Optimole只适合月访客少于5千的网站,例如外贸B2B网站。点击查看访问次数统计方法和详细内容。强制使用CloudFront CDN无法关闭。

CloudFront CDN在中国有这些节点:上海 (1);深圳 (1);中卫 (1);北京 (1);香港 (4)。我们没测试过,不知道国内速度怎样,如果你测试过欢迎给我们反馈。

使用过程发现这5千额度很耐用,不会计算已知爬虫/机器人浏览次数,重复访问不计算次数,绝大多数B2B外贸独立站和小型博客不会超额。如果流量多超过额度,建议改用ShortPixel之类插件。

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

Pasted 3

如果网站多于5,000访客每月,会发送邮箱给你提示购买付费套餐,在插件设置页面以及媒体库也会有提示↓。不会自动扣费,下个月恢复额度。超过额度可能会导致网站某些图片显示错误,要及时处理。

Pasted 89

Pasted 90

 

Optimole设置教程

进入设置界面

Pasted 11

输入邮箱↓,点击“Creat & conect your account”即可。它会发送一封邮件给你激活邮箱,其实不用管也行,插件照常使用。

Pasted 72

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

注意:同样功能只能在一个插件/主题里启用,如果在Optimole启用了延迟加载等功能,就不要在其它插件启用!

Pasted 94

启用图片替换:打开,启用后才会压缩转WebP等。

缩放图片和延迟加载:打开,可以延迟加载图片以及在小尺寸屏幕(手机+平板端)会根据屏幕显示相应尺寸图片,大大减小图片体积、提升页面加载速度。

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

Enable Optimole badge:打开后会在前端页面右下角显示下图图标,为Optimole做广告。作为回报免费套餐的访问额度会从5千增加到2万5,非常香!

请根据个人情况选择是否打开。从营销角度来说等用户数达到一定数量,官方应该会取消该活动,迫使一部分用户购买套餐,既能引流又能增加销售额。

Pasted 95 

Pasted 96

 

接下来点击进入“高级”>“压缩”设置版块↓,看清楚功能解释,按需开启。

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):建议打开,会根据每张图片的情况调整压缩等级。这是个趋势,不同相片需要不同的压缩等级才能显示最好效果,统一压缩等级反而对某些相片不好。

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

提示:经测试有些网站启用“Enable Auto Quality powered by ML”后某些图片压缩太厉害变模糊,遇到这种情况请关闭这个模式,改用手动选择压缩等级,选高档。如果还是不行就排除该图片被压缩。

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

Pasted 98

启用智能裁剪:打开,这个功能会在图片超出显示框后自动调整以显示图像主体部分,而不是固定显示图片上部分。此功能用到的地方不多,而且可能和其它插件的图片功能(例如延迟加载,自动缩放等)冲突。

启用视网膜图像:打开后如果访客使用Retina高清视网膜设备,会向访客提供视网膜清晰度图像。Retina要求图片尺寸比实际显示出来的尺寸大2倍,如果你的图片是按照显示出来的尺寸制作的,关闭这个功能。

如果你的图片尺寸比实际显示出来尺寸大2倍以上(例如显示出来600*600,图片尺寸至少要1200*1200),又想在高清设备显示清晰图片,打开这个功能。注意:启用这个功能会增加图片体积减从而慢网站速度。

Limit Image Dimensions with max width/height:打开,为Optimole提供的图像设置自定义最大宽度或高度。启用此设置后,视网膜图像选项将被禁用,以确保图像之间的一致性。

Resize large images original source:设置可以上传到媒体库的最大相片尺寸,超过尺寸会自动裁剪。建议设置为设置为1920 x 1200,绝大多数网站页面的最大尺寸是1920px,不会超过这个尺寸。

可以利用这个功能自动裁剪图片,如果你有很多不同尺寸的正方形产品图片,想统一上传800*800px的尺寸。可以在这里设置成800*800px,上传的图片就会自动裁剪。上传完后再设置成1920*1200px。

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

 

“排除”版块设置↓。

Pasted 97

启用通用的延迟加载占位符:打开后被延迟加载的图片一开始会显示模糊版本,从而提升页面加载速度,可能会降低一点客户体验。建议打开后测试下显示效果,不满意再关闭这个功能。

Exclude the first X images from lazyload:打开,从延迟加载中排除每个页面前 X 个图像,根据页面首屏图片内容设置,一般设置为3或4。

使用本机延迟加载:使用浏览器的延迟下载功能,如果启用会禁用智能裁剪功能,建议关闭。

缩放图像:在延迟加载时缩放图像。

为背景图像启用延迟加载:打开。默认情况下,延迟加载不适用于背景图像。启用后通过添加图片CSS可以实现背景图片延迟加载。

Enable lazyload for embedded videos and iframes:打开,为嵌入式视频和 iframe启用延迟加载。

启用 noscript 标记:打开。默认情况下,此选项对于新用户将关闭,而对于已连接的用户将打开。这将帮助无法处理基于 Optimole 的功能的浏览器加载后备图像。

选择器的延迟加载背景图像:输入需要延迟加载的背景图片的ID或者Class。

 

“排除”版块设置↓。

Pasted 19

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

注意:被排除压缩的相片也会取消延迟加载等。

 

Pasted 20

Enable cloud library browsing:不建议启用。启用无需登录网站后台媒体库。可以直接在线上访问存放在云端的媒体里面的相片。这个功能对绝大多数人来说没用。

Cloud Integration:不建议启用。启用后媒体库里面的所有相片会被移动到Optimole云端,并且从网站媒体库里删除。这个功能可以利用Optimole云端存放相片从而减轻服务器负担以及释放硬盘容量。

除非是有非常多的图片并且购买Optimole会员套餐,不然不建议使用这个功能。把图片存放在自己服务器才最安全、有保障。这个对提升速度没帮助,只是管理相片。容易操作失误出错,还是别开启。

注意:有些图片通过css代码加载(例如背景图片),Optimole可能出现无法压缩的情况。先使用TinyJPG在线图片压缩工具压缩图片后再上传到网站媒体库使用。

到此插件设置完毕,之前以及之后上传的相片会自动压缩处理,无需其它操作。 如果还有不懂可以查看官方设置教程,查漏补缺。有安装Elementor插件的话,需要按下图操作重新生成CSS和数据。

Pasted 22

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

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

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

Pasted 25

 

Optimole常见问题

1- 图片变得非常模糊:

把“压缩”选项卡里面的“Enable Auto Quality powered by ML(Machine Learning)”功能关闭,改为手动选择压缩等级,选最高档试下有没有恢复。如果还是没有恢复就排除模糊相片被压缩。

2- SVG图片/图标颜色改变:

有些SVG图片/图标被压缩后颜色会改变,排除被压缩就行。

3- 免费额度使用完后图片不显示:

压缩后的图片网址会发生改变,超出额度后图片网址会回复成默认网址,可是elementor代码里依然显示的是压缩后的图片网址,所以导致图片不显示。

image 5

解决方法:进入Elementor“工具” 

image 6

点击“重新生成文件和数据”按钮,等生产性文件完成后点击“保存更改”然后清理网站所有缓存即可。

image 7

 

TinyPNG + Performance Lab

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

TinyPNG插件优点:

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

TinyPNG的压缩效果是最好的,我们迪亚莫亲测发现它压缩出来的相片有很多比其它插件转WebP后的体积更小、更清晰!本站使用TinyPNG压缩图片。

TinyPNG也有缺点,压缩之后不能恢复原始图像,也不能单独调整某张图片的压缩等级。不过它的压缩效果很好,基本不需要调整和恢复相片。

Pasted 56

有些图片像素比较繁杂,怎么压缩体积都降不下去。只有转成WebP/Avif才能进一步减小体积,TinyPNG的例外一个缺点是不支持转WebP,需要搭配转WebP/Avif格式插件或者CDN使用。

插件作者在论坛回复说以后将支持WebP格式,非常期待!一旦这个插件支持WebP,瞬间可以秒掉Imagify。

腾讯云,火山引擎,阿里云这三家CDN都有图片转WebP/Avif功能,和TinyPNG一起使用正好互补。如果CDN没有图片转格式功能,可以把TinyPNG和Performance Lab之类转WebP插件一起使用(具体配置看下方)。

 

安装设置Performance Lab插件

Performance Lab是Perfmatters插件团队又一良心作品,作用是在“工具” > “站点健康”里面增加几项检查项目帮助排查影响网站速度因素。它带有一个转WebP功能,无需额外配置,免费,没有额度限制,开箱即用非常方便!

Performance Lab把JPG转WebP后再用TinyPNG压缩,有时效果比Imafigy还好(亲测),图片体积基本一样可是细节更清晰。缺点是不支持PNG,可是PNG是无损格式,转WebP(有损格式)后会变模糊,不支持PNG也不是坏事。平时尽量使用JPG格式。

注意:Performance Lab插件的WebP功能只对JPG有效,PNG不会转WebP。只有安装插件后上传到媒体库的相片才会自动转WebP,媒体库之前已经存在的相片以及通过FTP方式上传的相片不会转WebP。

提示:如果JPG相片上传前已经压缩过,或者本身体积已经很小,转WebP后可能体积会变大。这种情况下插件会自动删除体积大的WebP相片,保留JPG格式(依然会被TinyPNG压缩)。

接下来安装设置插件。点击下载安装Performance Lab插件,启用后点击下图“Perfmance”进入插件设置。

Pasted 83

只打开下面2项即可,点“保存更改”。其它选项不要打开,尤其是“SQLite Integration”绝对不要打开!

Pasted 84

在“设置” > “媒体”里面也会新增下图设置。启用后可以提高兼容性,不过会导致图片体积翻倍占用更多硬盘空间。

Pasted 92

设置完后,在上传JPG时会马上自动把相片转成Web格式。进入媒体库查看,图片后缀变成.webp。

Pasted 85

如果要调整WebP图片压缩质量,把下面代码复制粘贴到functions.php最下面,压缩质量根据网站情况调整。注意:不要设置得太高,不然转WebP后图片体积有可能会比原图大,导致转WebP失败。

//把WebP压缩质量调整为85(默认82),最高100,越高越清晰。
function set_webp_quality( $quality, $mime_type ) {
  if ( 'image/webp' === $mime_type ) {
   return 85;
  }
return $quality;
}
add_filter( 'wp_editor_set_quality', 'set_webp_quality', 10, 2 );

 

安装设置TinyPNG插件

接下来下载安装TinyPNG插件,启用后插件顶部会提示下图内容,点击红色框蓝色字进入插件设置页面。

Pasted 73

如果以前注册过已经有API,直接输入右边框点“保存”。如果没有API,左边框↓输入名字和邮箱地址点击“Register Account”会发送一封邮件到邮箱。QQ邮箱无法注册,用其它邮箱

Pasted 74

查收标题为“Activate your Tinify integration”的邮件(可能在垃圾邮箱),点击“Activate your account”进入TinyPNG网站个人中心。如果收不到邮件,进入https://tinypng.com,点右上角“LOGIN”,输入邮箱重新发送链接。

Pasted 75

点击旁边三个点的符号,再点击弹出菜单的“Enable key”启用API。把API KEY复制下来填入到网站插件设置页面点“保存”即可。

Pasted 79

点“Change API key”↓。

Pasted 80

输入API点“保存”,如果自动输入了API直接点“保存”。

Pasted 81

 

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

如果上面网址注册不成功,改进入https://tinypng.com/developers注册,输入名字、邮箱↓点击“Get your API key”。查收邮件点击里面按钮登录后台,按下图点“Enable key”启用api,复制粘贴到插件使用即可。

Pasted 69

Pasted 70

 

链接账户成功后会显示剩余可用额度,按图选择红色框Compress new images in the background (Recommended)在后台自动压缩;第二个选项是上传时压缩,会导致上传相片很慢很卡;第三个是手动压缩。

注意:必须选择“Compress new images in the background”自动压缩或者“Do not compress new images automatically”手动压缩,这样才能压缩Performance Lab插件转WebP后的相片。

Pasted 10

TinyPNG不可以设置压缩等级之类,功能非常很少。是因为它技术很成熟已经默认是最优设置,无需手动调整。每一张图片上传后会自动分析其最优压缩效果,所以无需调整压缩等级。

颜色配置文件会自动转换为标准 RGB 颜色,自动将 CMYK 转换为 RGB 以节省更多空间并增加兼容性,使用渐进式 JPEG 编码更快地显示 JPEG 图像。

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

Pasted 82

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后体积比原图片大的话会自动恢复成原格式。

(2023.01.31更新)这个插件压缩率不太高,而且压缩PNG格式后图片质量下降厉害。经过我们测试使用上面的Performance Lab插件转WebP后再使用TinyPNG压缩清晰度更好,体积更小。

Pasted 35

 

ShortPixel

ShortPixel是最受大V和高质量网站欢迎的图片优化插件, 很多很多很多国外大V在网站宣传它,我也看到很多优质网站使用它。它也是最早支持Avif格式的优化插件,目前安装量30万+,强烈推荐。

ShortPixel的功能齐全,例如把PNG转化成JPG,CMYK转RGB,转换成AVIF格式,可单独调整每张图片压缩等级等,压缩效果也很不错。唯一确定是要花钱,不过也不贵,可以收这是WordPress最好的图片压缩插件。

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

Pasted 5

也可以单独购买不限时长,不限站点的压缩额度,$9.99可以购买1万次额度 ↓(扣除缩略图尺寸和WebP、Avif额度实际上可压缩1,000~2,000张相片),$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

建议先测试下不同压缩效果的图片清晰度,再选择合适的压缩等级。点击打开测试页面,建议打开2个窗口分别选择不同压缩等级,上传同一张相片进行压缩。压缩好后把2张图片下载到电脑再对比清晰度和大小,选择合适的。

Pasted 46

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

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

移除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官方团队推出的图片压缩插件,目前安装量70万+ 。它设置简单,使用方便,对服务器资源占用少,功能齐全,压缩速度快,可以单独更改每张图片的压缩等级(媒体库打开图片修改)。

在免费插件里面Imagify可以说是综合性最好的,功能也强大,设置方便,因此很受欢迎,安装量比其它几个插件都高。2021年Imagify有一个压缩包套餐,9.9美金压缩1万张图片不限制时间,可是后来下架了(格局小了)。

缺点是目前不支持Avif格式以及免费账户每个月只有20M的压缩额度。不过可以注册多个免费账户,切换不同账户继续压缩图片。还可以花$4.99买一个月套餐有压缩500M压缩额度(有效期一个月),。

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

Pasted 66

设置很简单,我偷个懒不想做教程,请移步百度。

 

Smush(不推荐)

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

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

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

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

 

其它图片压缩插件

EWWW Image Optimizer之类插件虽然免费,可是功能和压缩质量一般,还不如上面提到的几款插件。WebP ExpressConverter for Media之类插件主要是把图片转Webp,却没怎么压缩,体积还是偏大。

 

进一步优化图片加载速度

按照上面WordPress图片压缩优化教程优化后,图片体积应该能减少50%甚至更多,图片加载速度有很大提升。除了压缩体积外,使用下面方法可以进一步极大缩短加载时间↓。

延迟加载图片

大多数情况下图片体积能占到一个页面大小的60%左右,延迟加载图片的加速效果甚至比压缩图片还好,非常重要。默认情况下访问页面浏览器会一次性加载全部相片,速度偏慢。

延迟加载相片后访问页面时浏览器只加载处于页面顶部的少数相片,不加载页面中底部的相片(访客下滑到相应图片位置再开始加载),因此大大减少加载体积,速度快很多。

很多插件都有延迟加载图片功能,我们迪亚莫对比发现加速效果和显示效果最好的是Perfmatters插件,点击查看Perfmatters延迟加载图片设置方法。点击下载Perfmatters插件

 

使用合适图片尺寸

图片尺寸=显示尺寸是最好的,最清晰同时体积最小。如果图片尺寸大于显示尺寸,清晰度不一定更好,体积反而更大。图片尺寸小于显示尺寸相片会模糊。

选择合适的图片尺寸能减小图片体积,保证清晰度。下面“响应式图片”↓方法会自动按显示尺寸加载接近尺寸的文章/产品图片。可是如果使用Elementor之类页面构建器搭建的页面,图片显示尺寸可能不是响应式,需要手动选择。

 

例如Elementor小部件背景图片需要根据不同设备选择相应尺寸↓。

Pasted 88

 

响应式相片

电脑、平板、手机屏幕尺寸不一样,同一张图片显示出来的尺寸也不一样。自动根据屏幕尺寸显示相应尺寸的相片可以大大减小相片体积,这就是响应式。

Pasted 65

举个例子:当我们上传一张相片到媒体库的时候,会自动生成其它尺寸缩略图。例如文章首页banner大图左右宽度一般是1920px,体积一般在100~200kb。上传到媒体库后会自动生成350px(体积20kb左右)等尺寸,当在手机查看首页时,如果屏幕像素比≤350px,会自动显示350px尺寸的banner图,而不是1920px,从而大大减小图片体积。

大部分主题都是响应式,不需要进行任何操作。如何查看自己网站图片是否响应式?查看html源代码<img>标签里面是否有srcset属性。或者使用测试工具对手机端进行测试,看下加载的图片尺寸和体积。

“srcset”属性——这个属性向浏览器描述图像应该如何表现。您分配图像宽度,以便浏览器检查与浏览器宽度匹配的图像。

例如本站关于我们页面底部有一张办公室图片,下面是这张图片的源代码,带“srcset”属性。Srcset属性里面有1000w, 706w等数字,这些是这张图片生成的几种尺寸。当显示器尺寸≥1000px,就会显示1000px的相片。当≥ 788px可是小于1000px就会显示788px尺寸,以此类推。

Pasted 67

值得说明的是需要我们自己根据页面图片显示尺寸情况适当调整自动生成的缩略图尺寸,尤其是Woocommerce网站。在后台“设置”>“媒体”里面可以设置3个缩略图尺寸↓。也可以安装缩略图插件设置更多缩略图尺寸,还把以前上传到媒体库的相片按尺寸生成缩略图。

建议媒体库尺寸设置成下图3个尺寸,手机端会显示350或者706px尺寸相片,平板端会显示1023px。手机和平板分辨率高,图片尺寸比屏幕尺寸大些才会显示清晰。

Pasted 71

 

如果你的网站不是使用响应式图片,建议使用ShortPixel Adaptive Images插件实现(付费)。只需一键点击,ShortPixel 自适应图像就会用尺寸合适、经过智能裁剪和优化的图像替换您网站上的所有图片,并将它们上传到 ShortPixel 的全球 CDN。

 

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

End

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

推荐文章:
评论 :

3人评论了“终极WordPress图片压缩优化教程, 含插件对比, TinyPNG、ShortPixel”

  1. 请问站长,为什么我的安装了Performance Lab和TinyPNG之后,JPG还是转不了WebP呢。无论是在媒体库页面上传,在文章编辑器内上传媒体库,还是直接复制图片粘贴在编辑器里,都无法转换……

    1. 因为你的JPG图片上传前已经压缩过,或者说本身体积足够小,这种情况下转WebP后的体积可能更大,所以不转WebP。直接忽略就行,TinyPNG依然会压缩上传的JPG图片。

      1. 好嘞,谢谢您,测试了一下的确如此。这篇文章帮上大忙了,之前用Smush Pro确实压缩率和质量都不太行。

发表评论

邮箱不会被公开,插入网址需去掉https://前缀。

免注册快速登陆

输入用户名密码登录

没有账号? 忘记密码?