如何优化 WordPress 图片以提升加载速度(压缩+WebP/AVIF)

 内容管家 2026年5月15日 2 0

图片优化:WordPress 速度提升的隐藏捷径 用 Google PageSpeed Insights 检测任意 WordPress 网站,报告里几乎总会出现这两项提示: Efficiently encode images(图片编码效率不…

图片优化:WordPress 速度提升的隐藏捷径

用 Google PageSpeed Insights 检测任意 WordPress 网站,报告里几乎总会出现这两项提示:

  • Efficiently encode images(图片编码效率不足)
  • Serve images in next-gen formats(未启用下一代图片格式)

这两项出现频率之高,让很多站长直接选择忽视。但如果你的网站也存在这些问题,值得重新审视——它们代表的是投入低、回报高的性能优化突破口,而且两者其实可以用同一个工具一并解决。

本教程结束时,你将完成以下目标:

  • 压缩整个媒体库中的所有图片
  • 启用 WebP 与 AVIF 格式分发
  • 学会在性能评分中验证优化效果

一、准备工作:安装并配置 ShortPixel

首先需要安装并激活 ShortPixel Image Optimizer 插件,然后在插件设置中填入 API Key。获取 API Key 完全免费,整个过程约 30 秒即可完成。

正式开始批量操作之前,建议先对媒体库做一次备份。虽然 ShortPixel 不会对原始文件造成破坏(默认保留原件),但在大规模变更前做备份是良好的操作习惯。

整个配置流程预计耗时 10–15 分钟。实际处理时间取决于媒体库中图片数量,可随时切换到其他页面,后台会继续执行优化任务。

ShortPixel

二、读懂 PageSpeed 报告的两项警告

动手设置之前,有必要先弄清楚这两项警告的具体含义。

「Efficiently encode images」——这项针对的是图片压缩。上传到 WordPress 的每张图片,都以原始文件大小和质量存储。此外,WordPress 还会自动生成多张缩略图及中间尺寸图片,每次上传可能额外产生 5–6 个文件副本。如果从未对媒体库运行过优化器,这些文件都保持着未经压缩的原始质量。ShortPixel 会逐一处理所有这些变体文件。

The "Efficiently encode images" issue as shown in PageSpeed Insights from Google.

「Serve images in next-gen formats」——这项关注的是文件格式。JPEG 和 PNG 是已使用数十年的传统格式,而 WebP 在同等视觉质量下文件体积可缩小约 25–34%。AVIF 在支持的浏览器中压缩效果更为显著,目前 Chrome、Edge、Firefox、Safari 均已支持,很可能有相当比例的访客浏览器已经能够处理这两种格式。

The "Serve images in next-gen formats" issue as shown in PageSpeed Insights from Google.

两项问题都无需触及服务器配置,ShortPixel 在同一套流程中即可一并处理。

三、选择压缩模式

ShortPixel 提供三种压缩模式。建议在开始前花点时间理解各模式差异,避免后续重新运行。

ShortPixel's image optimization settings.

有损压缩(Lossy)

推荐作为大多数网站的首选默认值。博客、营销站点、新闻类站点和一般作品集网站选择此模式收益最大——文件体积缩减显著,在常规网页显示尺寸下画质损失几乎无法察觉。不确定选哪个时,直接选有损。

准无损压缩(Glossy)

ShortPixel 的中间选项,采用较温和的有损算法,保留更多视觉细节。如果运营摄影作品集网站,或 WooCommerce 商店(产品图质量直接影响购买决策),值得考虑此模式。

无损压缩(Lossless)

不产生画质变化,文件体积有所缩小但节省幅度相对有限。适用于 Logo、图表、图标等边缘锐利或色块平整的图片,此类场景对像素精确度要求较高。

ShortPixel 默认保留原始图片备份。若从有损切换到准无损模式重新优化,不会造成任何永久性画质损失。

四、启用 WebP 与 AVIF 格式转换

选定压缩模式后,进入 ShortPixel 设置中的「Advanced」标签页,找到格式转换开关,分别开启 WebP 和 AVIF。

ShortPixel's next-gen image format settings.

两项都启用后,再勾选「Serve WebP/AVIF images from locally hosted files」。随后需要选择分发方式:

  • <picture> 标签分发:将图片包裹在 <picture> 元素中,浏览器自动读取可用格式并选择最优选项。兼容性更好,几乎适用于所有 WordPress 配置,包括使用页面构建器的站点。
  • .htaccess 重写规则:在服务器层面处理分发,无需修改 HTML。效率略高,但要求服务器使用 Apache 且 PHP exec() 可用。若使用托管主机或不确定服务器环境,推荐使用 <picture> 标签方式。
Choosing where to serve WebP/AVIF images from locally hosted files in ShortPixel.

关于 AVIF 的降级策略:ShortPixel 会自动处理——不支持 AVIF 的浏览器自动回退到 WebP,不支持 WebP 的浏览器回退到原始格式。开启 AVIF 不会对使用旧版浏览器的访客造成任何风险,对使用现代浏览器的访客则能带来显著的文件体积收益。

五、执行批量优化

进入 WordPress 仪表盘「Media → Bulk ShortPixel Optimization」,这里是实际处理发生的位置。

ShortPixel's bulk image optimization process.

批量优化的操作流程如下:

  • 查看队列:ShortPixel 会先显示待处理图片数量及预估消耗积分,在开始前对照自己的可用积分,避免中途意外中断。
  • 启动批量任务:开始后可以切换到其他页面,ShortPixel 在后台处理,不需要保持浏览器标签页开启。
  • 处理中断时:通常有两类原因——当月积分用尽,或连接超时。返回批量优化页面恢复任务即可,ShortPixel 从中断处继续,不会重新开始。
  • 查看结果摘要:完成后显示总节省比例、消耗积分,以及媒体库中各图片优化前后的文件大小对比。这些数字值得记录下来,作为日后性能优化的基准参考。

图片积分消耗估算

WordPress 会对每张上传的图片生成多个尺寸变体,而每个变体都会单独消耗一个 ShortPixel 积分。实际使用中,每张原图大约占用 4~5 个积分。这意味着一个包含 500 张图片的媒体库,消耗量可能在 2000~2500 积分之间。

ShortPixel 提供了一个积分计算器,可以在批量优化前帮助你预估消耗量,避免中途积分不足。

六、验证优化效果

批量任务完成并不等于问题已解决。在结果交付给访客前,建议运行几项检查加以确认。

提前清理缓存

在测试前,务必清除页面缓存。如果你使用了 WP Rocket、LiteSpeed Cache、W3 Total Cache 或其他缓存插件,先将缓存清空。PageSpeed Insights 和 Google 爬虫需要抓取实时响应,而非旧版本的未优化图片。

三项核心检查

1. 重新运行 PageSpeed Insights 在最关键的页面上重新执行测试。「下一代格式」和「高效编码图片」两项警告应已消失或明显减少。若其中任一仍然存在,需检查站点前的 CDN 是否仍在返回原始文件而非优化版本。

2. 在 Chrome DevTools 中确认 WebP 交付 打开 Network 面板,按图片类型筛选,查看若干图片的 Content-Type 响应头。若已正确启用,响应头应显示 image/webpimage/avif,而非 image/jpegimage/png

3. 查看 ShortPixel 优化报告 进入 ShortPixel 仪表板,查看全媒体库级别的节省汇总报告。报告按文件类型细分,能直观展示整体优化效果。

Chrome's DevTools showing the image format as WebP.

七、进一步提升 WordPress 图片性能

如果以上步骤都已执行到位,你已在一轮操作中解决了两项最顽固的 PageSpeed 问题:媒体库全尺寸变体已完成压缩,图片也已转换为现代化的 WebP 和 AVIF 格式交付给支持的浏览器,并且建立了持续验证的流程。

这是一次性的配置工作,收益却是长期的——后续上传的每张新图片都会自动经过 ShortPixel 压缩和格式转换,问题标志不会重新出现。

如需进一步提升,可关注以下方向:

  • 图片 SEO:包括图片站点地图、alt 文本自动生成、LCP 图片的 fetchpriority 设置,以及如何利用 Search Console 大规模排查图片问题
  • 响应式图片:确保 WordPress 向不同设备交付合适尺寸的图片,避免浪费带宽

延伸阅读

声明:1、本站大部分资源均为网络采集所得,仅供用来学习研究,请于下载后的24h内自行删除,正式商用请购买正版。2、所有汉化类文件和个别标注了“原创”的产品均为本站原创发布,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。3、如若本站内容侵犯了原著者的合法权益,请携带相关版权文件联系我们进行下架或删除。4、虚拟下载类资源具有可复制性,一经下载后本站有权拒绝退款或更换其他商品!

内容管家

基于 AI 自动化工作流的发文助手~ 由 Actions Bridge 插件驱动

文章 评论 浏览 点赞

作者主页
暂无内容

留下第一个评论