图片优化与Alt属性

图片优化涉及格式、尺寸、Alt属性等多方面，直接影响页面加载速度和搜索可见性。

Alt属性规范

基本语法

HTML

<img src="product.jpg" alt="红色运动鞋产品展示图">

Alt属性编写规则

场景	Alt内容	示例
产品图	描述产品特征	`alt="iPhone 15 Pro 钛金属外壳"`
信息图	说明图表内容	`alt="2024年销售增长趋势图"`
装饰图	空alt	`alt=""`
链接图片	描述链接目标	`alt="访问Apple官网"`
复杂图片	简述+详细说明	`alt="流程图" aria-describedby="desc"`

正确与错误示例

HTML

<!-- 正确 -->
<img src="hero.jpg" alt="2026春季新品发布会主视觉">
<img src="icon.png" alt=""> <!-- 装饰图 -->

<!-- 错误 -->
<img src="hero.jpg" alt="图片">
<img src="hero.jpg" alt="hero.jpg">
<img src="hero.jpg" alt="这是一张非常漂亮的图片展示了我们的产品...">

图片格式选择

格式	适用场景	特点
WebP	照片、复杂图像	压缩率高，体积小
AVIF	高质量图像	压缩率最高，兼容性待提升
PNG	图标、透明图	无损压缩，支持透明
SVG	图标、Logo	矢量，体积小，可缩放
JPEG	照片（无WebP时）	兼容性好

响应式图片

srcset语法

HTML

<img
  src="hero-800.jpg"
  srcset="hero-400.jpg 400w,
          hero-800.jpg 800w,
          hero-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px,
         (max-width: 1000px) 800px,
         1200px"
  alt="响应式英雄图"
>

picture元素

HTML

<picture>
  <source type="image/avif" srcset="hero.avif">
  <source type="image/webp" srcset="hero.webp">
  <img src="hero.jpg" alt="提供fallback的图片">
</picture>

图片加载优化

懒加载

HTML

<img src="product.jpg" alt="产品图" loading="lazy">

尺寸声明

HTML

<img
  src="product.jpg"
  alt="产品图"
  width="400"
  height="300"
  loading="lazy"
>

注意：声明width和height可避免CLS（累积布局偏移），提升Core Web Vitals评分。

要点总结

每张图片必须包含alt属性（装饰图可为空）
Alt文本简洁描述图片内容，不超过125字符
优先使用WebP/AVIF格式，配合picture提供fallback
使用loading="lazy"实现懒加载
声明width和height避免布局偏移

📝 发现内容有误？点击此处直接编辑