WordPress图片压缩优化全攻略：插件深度对比TinyPNG、ShortPixel

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

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

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

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

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

什么是WebP，Avif图片格式？

目前减少图片体积又不降低清晰度的最好办法是把图片从Jpg/Png格式转成WebP/Avif格式，极大缩小体积，可是清晰度却基本没变化，非常清晰。

WebP和Avif格式是新一代图片格式，WebP比JPG体积减少30%-60%左右，清晰度却更好！Avif比WebP体积减少25%左右，清晰度却更好！我们遇到有些图片无论怎么压缩体积都降不下来，转WebP/Avif后清晰度没下降，体积却小很多！现在优化图片体积肯定要用上WebP/Avif格式。

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

Avif格式更先进，体积比WebP格式平均减少25%左右可是清晰度却更高！非常有必要使用Avif格式！目前QQ和IE浏览器不支持(下图)，很多浏览器已经支持。ShortPixel和Optimole等少数插件支持转Avif，而且一般需要付费。WebP效果已经很不错，等Avif流行后再用Avif也行，当然直接一步到位最好。

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

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

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

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

常规图片应选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)，可以极大减小图片体积。其次也应该使用RGB格式而不是CMYK，后者只对打印有用处对网页显示没帮助可是体积大些。

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

WordPress图片压缩插件对比推荐

先说结论，没有最好的图片压缩插件，只有最合适的。要根据自己网站情况和图片数量/质量选择合适的方法。图片最重要的是显示清晰！而不是小体积加载快。清晰的图片能提高转化率，让浏览者心情愉悦。

TinyPNG

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

我们不推荐使用它，因为它有几个缺点：1）不可调整压缩质量；2）不可恢复原图；3）只有500张压缩额度/每月。推荐使用EWWW Image Optimizer或者Robin Image Optimizer pro，刚才提到的3个缺点被这2个插件完美解决。

TinyPNG在论坛说插件以后会支持WebP，时间未定。等它支持WebP后竞争力会极大上升，到时候再用它。

安装设置TinyPNG插件

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

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

ShortPixel

ShortPixel是目前WordPress图片压缩插件中效果最好，最受欢迎，支持WebP和Avif格式，图片压缩率和清晰度都很不错。我们经常浏览国外网站，看到非常多大V推荐以及使用它。

ShortPixel的功能齐全，例如把PNG转化成JPG，CMYK转RGB，转换成AVIF格式，可单独调整每张图片压缩等级以及恢复原图，压缩效果也很不错。唯一缺点是要花钱，免费账户每个月有100个压缩额度，算上缩略图之类实际上也只能压缩不到10张图片。

注意：这个压缩额度是按照压缩以及生成的图片计算的，包含缩略图，非常容易用完。例如一张jpg图片生成了3个尺寸的缩略图，就相当于有4张询盘。每张询盘压缩以及生成WebP和Avif格式都会计算在内。也就是说压缩一张图片就需要花掉12个额度！

一定要使用付费套餐额度才够用，ShortPixel最低一个月9.9美金，这个价格让很多人望而止步。为了回馈本站VIP会员，迪亚莫从ShortPixel 官网购买了不限制压缩额度和站点数量API(激活码)。凡是本站付费包年、VIP会员皆可免费使用！！！

Imagify

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

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

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

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

设置很简单，网上到处是教程，请大家移步百度。

EWWW Image Optimizer

EWWW Image Optimizer插件免费版也不错，只可以压缩JPG（不支持压缩PNG, 支持PNG转JPG），支持转WebP格式。不限制压缩额度，可以调整压缩后的图片质量以及恢复原图。而且转WebP后图片质量高，显示跟原图基本无差异，缺点是不支持压缩PNG图片。推荐使用

使用教程请自行网上搜索，注意：下图功能如果启用，前端需要优化的图片会显示蓝色虚线边框（仅登录者可见），用于检测那些图片要压缩。关闭这个选项虚线消失。

Smush(不推荐)

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

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

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

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

它的压缩率和压缩质量也不是很好

其它图片压缩插件

WebP Express和Converter for Media之类插件主要是把图片转Webp，却没怎么压缩，体积还是偏大。不推荐使用

先压缩图片再上传

建站交流群有几个人说喜欢压缩好图片再上传到媒体库使用，这也是个不错的方法。有很多免费、不限制额度的在线压缩图片/转WebP工具，大家找下。不过我还是喜欢使用插件，方便同时可以生成Avif格式，遇到不合适的设备会回退显示Jpg/Png格式。

进一步优化图片加载速度

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

延迟加载图片

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

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

使用合适图片尺寸

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

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

响应式图片

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

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

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

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

例如查看图片的源代码，带“srcset”属性。Srcset属性里面有1000w, 706w等数字，这些是这张图片生成的几种尺寸。当显示器尺寸≥1000px，就会显示1000px的相片。当≥ 788px可是小于1000px就会显示788px尺寸，以此类推。

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

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

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

图片压缩插件对比到此结束，如有疑问或者推荐，欢迎下方评论交流。优化图片加载速度除了上面提到的压缩体积外，还需使用CDN、开启浏览器缓存等才能发挥最大效果。

!

也想出现在这里？ 联系我们吧