WordPress图片优化指南：格式、尺寸、压缩、懒加载与图片SEO

WordPress图片优化，可以归结为一个流程：上传前选对格式、缩到合适的尺寸并压缩；上传后让WordPress自动生成多种尺寸、输出响应式图片和懒加载；最后单独处理首屏的大图，并写好替代文本和文件名。WordPress近几个版本已经自动完成了很多工作，比如生成多种尺寸、添加srcset、懒加载、给最可能是LCP的图片加fetchpriority，但前提是你上传的原图本身合理。

这篇文章按“上传前、上传时、页面上”的顺序，讲清WordPress对图片做了什么、你还需要做什么，以及图片怎样同时照顾速度和Google图片搜索。网站整体的速度排查，可以先看WordPress网站速度慢怎么办。

对比哪些WordPress已经自动完成，哪些还要你来做

WordPress自动完成

为上传的图片生成多种尺寸

添加srcset和sizes，输出响应式图片

图片默认懒加载

给最可能是LCP的图片加fetchpriority

还需要你来做

上传前选对格式

把图片缩到合适的尺寸并压缩

单独检查首屏的大图

写好替代文本和文件名

先选对格式：JPEG、PNG、WebP、AVIF、SVG

格式	特点	适合用在	WordPress支持
JPEG	有损压缩，照片类图片体积小	产品实拍、工厂和车间照片	一直支持
PNG	无损压缩，支持真彩色（每通道8位或16位）和透明通道，照片体积大	需要透明背景的图标、截图、线条图	一直支持
WebP	同时支持有损和无损压缩，体积通常更小	可以替代大部分JPEG和PNG	WordPress 5.8起支持上传，需要服务器支持
AVIF	压缩效率更高	对体积要求高的大图	WordPress 6.5起支持上传，需要服务器支持
SVG	矢量格式，任意缩放不失真	Logo、图标	默认不允许上传，有安全风险，需要谨慎处理

关于体积，Google官方给出的数据是：WebP无损图片比PNG小26%，WebP有损图片在同等SSIM画质指标下比JPEG小25%到34%；WordPress在6.5版的说明中提到，AVIF图片最多可以比JPEG小50%。目前主流浏览器都已支持WebP和AVIF，Google搜索也支持这两种格式的图片。

SVG的安全问题和处理方法，见WordPress上传SVG。

上传前：尺寸和压缩

先把尺寸缩到合理范围

相机和手机拍出的照片，宽度常在4000像素以上，而网页上的产品图通常不需要这么大。上传前，可以把图片缩到页面上最大显示宽度的两倍左右，兼顾高分辨率屏幕。WordPress也有一道保险：从5.3版起，上传宽或高超过2560像素的图片时，会自动生成一张缩小到2560像素的版本（文件名带“-scaled”）作为网站使用的“原图”，阈值可以通过big_image_size_threshold过滤器调整。

再压缩，但别重复压缩

WordPress生成各种尺寸时，会按默认质量重新压缩：JPEG默认质量为82，WebP为86，可以通过wp_editor_set_quality过滤器修改。所以，上传前没必要把原图压缩得过狠，否则经过两次有损压缩，产品细节会明显变差。比较稳妥的做法是：原图用较高质量导出，交给WordPress或图片优化插件统一压缩，再抽查几张产品细节图是否清晰。

文件名要有意义

Google的图片SEO指南建议使用描述性的文件名，例如stainless-steel-ball-valve.jpg，就比IMG00023.JPG更好。上传前统一重命名，比上传后再改要省事。

上传时：WordPress自动做了什么

• 生成多种尺寸：默认生成缩略图（150×150裁剪）、中等（最大300×300）、中大（宽768，不限高）、大（最大1024×1024），以及WordPress 5.3加入的1536×1536和2048×2048，主题和插件还可能注册更多尺寸；
• 响应式图片：从4.4版起，WordPress会为内容中的图片自动添加srcset和sizes属性，让浏览器按屏幕大小选择合适的尺寸；
• 懒加载：从5.5版起，图片默认使用原生的loading=”lazy”；之后的版本会跳过页面最前面的几张内容图片，不对它们懒加载；
• LCP图片优先加载：从6.3版起，WordPress会自动给最可能成为最大内容绘制（LCP）元素的图片加上fetchpriority=”high”。

要不要把图片自动转成WebP？

WordPress曾计划在6.1版中默认把上传的JPEG转成WebP，但这个改动在正式发布前被撤回，所以目前WordPress不会自动转换格式。想统一使用WebP或AVIF，有两种做法：

• 用代码：通过image_editor_output_format过滤器，让WordPress在生成各尺寸时把JPEG输出为WebP。前提是服务器的图片处理库（GD或Imagick）支持WebP；
• 用插件或CDN：图片优化插件可以批量转换旧图片，部分CDN可以按浏览器自动输出WebP或AVIF。使用CDN转换时，要检查缓存是否按浏览器正确区分，避免把新格式发给不支持的浏览器，或者始终只输出JPEG。

页面上：首屏大图单独处理

外贸网站首页的横幅图、产品页的主图，往往就是页面的LCP元素。web.dev的建议很明确：永远不要对LCP图片懒加载；如果确定某张图片很可能是LCP元素，就给它加上fetchpriority=”high”。WordPress已经自动处理了常见情况，但以下几种需要自己检查：

• 首屏横幅用CSS背景图或滑块插件加载，WordPress识别不到，无法自动优化；
• 页面构建器或主题给所有图片强制加了懒加载；
• 首屏轮播图有五六张大图，全部在页面加载时下载。

用PageSpeed Insights测试页面，查看LCP元素是哪张图片、加载用了多久。LCP的完整优化方法，见Core Web Vitals详解。

图片和SEO：替代文本、文件名和周围的文字

• 使用标准的img元素：Google说明，使用标准HTML图片元素有助于抓取工具发现和处理图片。用CSS背景显示的图片，不会被当作页面内容中的图片收录；
• 写好替代文本（alt）：Google说明，替代文本是为图片提供元数据时最重要的属性。写清图片里是什么，例如“304不锈钢法兰球阀，DN50”，不要堆砌关键词；纯装饰性的图片可以留空；
• 图片放在相关的文字旁边：产品图放在产品说明旁边，Google更容易理解图片的内容；
• 需要时提交图片站点地图：通过JavaScript加载、Google可能发现不了的图片，可以通过图片站点地图告诉Google。

替代文本同时也是无障碍访问的要求，读屏软件依靠它向视障用户描述图片，详见网站可访问性指南。

一份可以照着做的检查清单

环节	检查项
上传前	照片用JPEG、WebP或AVIF，透明图标用PNG或SVG；宽度缩到最大显示宽度的两倍左右；文件名用英文描述
上传时	填写替代文本；确认主题没有注册大量用不到的尺寸
页面上	首屏大图没有懒加载，并带有fetchpriority=”high”；轮播图只优先加载第一张
上线后	用PageSpeed Insights检查LCP元素和“适当调整图片大小”“采用新一代格式”等建议；定期清理媒体库中不用的图片

常见问题

WordPress图片优化插件一定要装吗？

不一定。WordPress已经自动生成多种尺寸、添加srcset和懒加载。如果上传前已经控制好尺寸和格式，很多网站不需要额外插件。需要批量转换旧图片、统一输出WebP或AVIF时，插件会省很多事。

图片压缩会影响清晰度吗？

有损压缩会损失一部分细节，质量设置越低，损失越明显。避免多次重复压缩，并在压缩后抽查产品细节图，就能在体积和清晰度之间找到平衡。

为什么PageSpeed Insights提示“请适当调整图片大小”？

说明页面加载的图片比实际显示的尺寸大很多。常见原因是主题直接输出了原图，或者图片没有正确的srcset和sizes属性，需要检查主题的图片输出代码。

换成WebP后，旧的JPEG图片要删掉吗？

先确认页面和站点地图都已经引用新格式，旧网址不再被使用，再考虑清理。如果旧图片有外部链接或已被Google图片收录，可以保留，避免产生大量404。

让产品图片既清楚又不拖慢网站

图片处理做得好，产品展示清晰、页面加载快，Google图片搜索也能带来额外的曝光。如果你的WordPress网站图片多、加载慢，或者主题输出的图片代码有问题，可以了解Sytech的WordPress定制开发服务，价格方案见价格页。