图片与多媒体优化：alt、WebP、srcset 与防 CLS

图片往往占了页面体积的大头，也最容易被忽视。优化得当，它能同时改善三件事：SEO（图片搜索、内容理解）、性能（加载速度、Core Web Vitals）和无障碍（屏幕阅读器）。这一篇覆盖从 alt 文本、格式选择、压缩与响应式，到懒加载防 CLS 与图片搜索优化的完整做法。

alt 文本#

alt（替代文本）描述图片内容，服务于看不到图片的用户和搜索引擎。原则：

• 简洁准确：描述图片实际内容；
• 自然含词：相关关键词自然融入，不堆砌；
• 装饰图留空：纯装饰图用 alt="" 让辅助技术跳过。

<!-- 好 -->
<img src="keyword-funnel.webp" alt="关键词按搜索意图分组的漏斗图" width="800" height="450">
<!-- 差：无信息/堆砌 -->
<img src="img1.jpg" alt="SEO 关键词 排名 优化 工具 教程">

文件命名与格式#

• 命名：用描述性英文文件名，如 keyword-funnel.webp，而非 IMG_2046.jpg；
• 格式：优先 WebP / AVIF（同画质体积更小）；图标和简单图形用 SVG；
• 回退：用 <picture> 提供多格式，老浏览器降级到 JPEG。

压缩与响应式#

压缩去掉多余字节，srcset 让不同屏幕加载合适尺寸，避免手机下载桌面大图：

<img
  src="hero-800.webp"
  srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  width="800" height="450"
  alt="示意图">

性能与 Core Web Vitals 的整体优化见技术 SEO 栏目的网站速度文章。

懒加载与防 CLS#

• 首屏以下图片用原生 loading="lazy" 懒加载，减少初始负载；
• 首屏关键图（LCP 元素）不要懒加载，否则拖慢首屏；
• 懒加载与尺寸属性配合使用。

图片站点地图与图片搜索#

想从 Google 图片获取流量：

• 确保图片未被 robots.txt 屏蔽、能被抓取；
• 图片放在相关上下文中，配合周围文字与标题；
• 图片量大时可提供图片站点地图或在站点地图中包含图片信息；
• 商品图等可配合 Product 结构化数据。

图片优化清单#

• 每张图有准确的 alt（装饰图用空 alt）
• 描述性文件名
• 现代格式 WebP/AVIF，图标用 SVG
• 已压缩，提供 srcset 响应式
• 显式 width/height 或 aspect-ratio 防 CLS
• 首屏以下懒加载，LCP 图不懒加载
• 图片未被 robots.txt 屏蔽
• 大量图片提供图片站点地图

常见问题#

alt 文本应该怎么写？

alt 文本应简洁、准确地描述图片内容，让看不到图片的人（包括屏幕阅读器用户和搜索引擎）理解它表达什么。自然包含相关关键词即可，不要堆砌。装饰性、无信息的图片可用空 alt（alt=""）让辅助技术跳过。alt 的首要目的是无障碍，SEO 价值是顺带的结果。

图片应该用什么格式？

优先使用现代格式 WebP 或 AVIF，它们在相近画质下体积明显小于 JPEG/PNG，能显著提升加载速度。照片类用 WebP/AVIF 或 JPEG，需要透明背景用 WebP/PNG，简单图形和图标优先用 SVG。可以用 picture 元素提供多格式回退，让不支持新格式的浏览器降级到 JPEG。

怎么防止图片导致 CLS（布局偏移）？

给每张图片显式声明 width 和 height 属性（或用 CSS 的 aspect-ratio），浏览器就能在图片加载前预留出正确空间，避免内容在加载时跳动。CLS 是 Core Web Vitals 的核心指标之一，未设尺寸的图片是常见的 CLS 来源。懒加载也要配合尺寸属性使用。

懒加载会影响 SEO 吗？

正确使用不会，反而有助性能。用原生 loading="lazy" 对首屏以下的图片懒加载，可减少初始加载量、改善 LCP。但首屏关键图片（尤其是 LCP 元素）不要懒加载，否则会拖慢首屏。同时确保懒加载的实现不会让搜索引擎无法发现图片，原生 loading 属性是安全的做法。