讲解

<img> 用 src 指定图片地址，用 alt 提供替代文本。alt 是图片章节最重要、也最容易被敷衍的属性：图片加载失败时它显示在原地；屏幕阅读器把它念给视障用户；搜索引擎靠它理解图片内容。写 alt 的原则是「想象你在电话里向人描述这张图」——alt="一只橘猫趴在键盘上" 远好于 alt="图片"。纯装饰性图片（分割线、背景花纹）应写空 alt（alt=""），告诉辅助技术「可以跳过」，而不是省略属性。

width 和 height 属性建议始终写上：浏览器据此提前算出图片占位，加载过程中页面不会跳动（CLS，布局偏移，是 Google 核心网页指标之一）。loading="lazy" 让首屏之外的图片滚动到附近才加载，一行属性换来明显的性能收益；decoding="async" 则让图片解码不阻塞渲染。

响应式场景下有两件武器：srcset + sizes 提供多档分辨率让浏览器按屏幕宽度与像素密度自动选择，避免手机下载桌面级大图；<picture> 元素则能做「艺术指导」——宽屏显示横版、手机显示方版，或优先提供 AVIF/WebP 格式、旧浏览器回退 JPEG。需要配图说明文字时，用 <figure> 包住图片、<figcaption> 写说明，两者形成语义关联。

示例

<!-- 基础：alt 描述内容，尺寸防跳动，懒加载提速 -->
<img src="cat.jpg" alt="一只橘猫趴在机械键盘上睡觉" width="800" height="600" loading="lazy" />

<!-- 装饰图：空 alt -->
<img src="divider.svg" alt="" width="600" height="20" />

<!-- 响应式：浏览器按屏幕自动选档 -->
<img
  src="hero-800.jpg"
  srcset="hero-800.jpg 800w, hero-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="城市夜景全景"
  width="800"
  height="450"
/>

<!-- picture：格式回退 + 移动端换构图 -->
<picture>
  <source srcset="banner.avif" type="image/avif" />
  <source srcset="banner.webp" type="image/webp" />
  <img src="banner.jpg" alt="夏季促销主视觉" width="1200" height="400" />
</picture>

<!-- 图 + 说明文字 -->
<figure>
  <img src="chart.png" alt="2025 年各季度销售额柱状图，Q4 最高" width="640" height="360" />
  <figcaption>图 1：2025 年季度销售额</figcaption>
</figure>

常见坑

  • 省略 alt 或写 alt="图片"：前者让读屏软件念出一串文件名，后者等于没写。要么认真描述，要么装饰图给空 alt。
  • 不写宽高导致页面跳动：图片加载完成瞬间把正文顶下去，用户点错位置。写上原始宽高，CSS 里用 max-width: 100% 适配缩放。
  • 全站图片不加 loading="lazy"：首屏外几十张图同时请求，首屏速度被拖垮。注意首屏主图反而不要懒加载。
  • 用 CSS 背景图代替内容图片：有内容含义的图（商品、新闻配图）必须是 <img>，否则失去 alt，对 SEO 和无障碍都是损失。

小结

img 三件套：src、有意义的 alt、width/height；loading="lazy" 加速首屏外的图；srcset/picture 解决响应式与格式回退；figure/figcaption 关联图与说明。下一章学习三类列表。