外贸网站图片优化：速度、可访问性和搜索理解一起做
从图片用途、尺寸、响应式加载、格式、alt、上下文和监测整理外贸网站图片，附 NeoGress 旧内容审计的真实问题样本。
作者：NeoGress SEO 编辑组
审校：依据 Google 图片 SEO 与 W3C 图片替代文本原则审校
本次更新：加入真实审计数据，区分装饰图与信息图，并补充响应式图片和 LCP 验收。
先看核心结论
- 按实际显示尺寸生成响应式版本，不让手机端下载超大桌面图。
- 首屏主图通常不能懒加载，正文和列表下方图片再按需加载。
- alt 描述图片在当前页面承担的信息，不堆关键词。
- 图片附近的标题、说明和产品上下文同样影响理解。
图片优化不是把所有文件压到越小越好。产品细节看不清会伤害询盘，文件过大又会拖慢加载；缺少替代文本会影响使用辅助技术的访客，也减少搜索系统理解图片上下文的线索。
应该先确定图片用途，再决定尺寸、格式、加载优先级和替代文本。主图、规格图、案例照片、图标和装饰背景不能使用同一套规则。
真实问题样本：466 张图片缺少 alt
NeoGress 在 2026-07-22 对 124 篇历史批量文章进行质量审计时，发现 466 张图片缺少 alt。由于这些文章还同时存在无可靠来源和同质化问题，最终整批删除，而不是只批量填入关键词。这个案例说明：图片 SEO 不能脱离页面质量单独修补。
先按用途分类
| 图片 | 优化重点 | alt原则 |
|---|---|---|
| 产品主图 | 清晰、快速、可放大、尺寸稳定 | 产品名称 + 可见关键特征 |
| 规格/流程图 | 文字可读，旁边有 HTML 解释 | 概括图中结论，不复制整张图 |
| 应用案例 | 真实授权、时间和场景说明 | 描述场景及图片作用 |
| 图标/装饰 | 文件小、避免布局位移 | 纯装饰使用空 alt |
| 首屏背景 | 保证 LCP 资源尽早发现 | 重要信息不要只存在 CSS 背景里 |
尺寸、格式和响应式加载
- 统计页面实际显示宽度和设备像素密度，输出有限的合理尺寸。
- 照片比较 JPEG、WebP、AVIF 的质量与体积；透明图和图形按内容选择 PNG、WebP 或 SVG。
- 使用
srcset和sizes提供响应式候选，同时保留src回退。 - 设置 width/height 或 aspect-ratio，防止加载后推开内容。
- 首屏 LCP 图优先加载；视口下方图片再使用懒加载。
Google 的 图片 SEO 指南说明，标准 <img> 和 src 有助于发现图片，响应式图片应保留回退 URL；CSS 背景图片不会以同样方式被索引。
alt 到底怎么写？
- 先问“图片消失后，读者缺少什么信息”。
- 描述可见事实和在当前页面的作用，不塞供应商、厂家、价格等无关词。
- 同一图片在不同上下文中，alt 可以不同。
- 旁边已经完整说明的复杂图，alt 可概括核心，详细内容放正文。
- 链接图片的 alt 要能表达链接目的。
Google 表示会结合 alt、计算机视觉和页面内容理解图片，并警告关键词堆砌会损害体验甚至被视为垃圾。无障碍原则可进一步核对 W3C Images Tutorial。
发布后的验收证据
| 证据 | 检查方法 |
|---|---|
| 网络请求 | 手机视口没有下载不必要的超大版本 |
| LCP | 确认首屏主图的发现和渲染时间 |
| 布局 | 慢速加载时图片区域不突然位移 |
| 可访问性 | 检查 alt、键盘、放大和对比度 |
| 搜索抓取 | 图片 URL 可访问，页面可索引且上下文相关 |
| 业务 | 产品图查看、放大、询盘等动作有真实记录 |
把方法落到官网
把这套方法落到外贸获客官网
从页面结构、海外搜索入口到询盘承接继续完善，让文章流量能够回到清晰的产品、服务与转化路径。
常见问题
每张图片都必须写 alt 吗？
每个 img 元素应有 alt 属性，但纯装饰图片通常使用空 alt；信息图片需要与上下文匹配的替代文本。
WebP 一定比 JPEG 好吗？
不能只看格式名称，要在实际图片上比较质量、体积、浏览器和处理链路，并保留合适回退。
图片文件名能提升排名吗？
描述性文件名只提供很轻的线索，页面质量、上下文、alt、可发现性和图片本身更重要。