HTML 图片

<img> 是一个空元素，用于在页面中嵌入图片：

html 
<img src="photo.jpg" alt="一只橘猫趴在窗台上晒太阳">

核心属性

属性说明
src图片路径（相对或绝对 URL）
alt替代文本——图片无法显示时显示的文字
width / height图片尺寸（像素或百分比）

alt 属性

alt 是必需属性。它有三个作用：

  1. 图片加载失败时，显示替代文字
  2. 屏幕阅读器会朗读 alt 内容，帮助视障用户
  3. 搜索引擎通过 alt 理解图片内容
html 
<!-- ✅ 有意义 alt -->
<img src="chart.png" alt="2026 年第一季度销售增长柱状图，同比增长 25%">

<!-- ✅ 纯装饰图片可以留空 alt -->
<img src="decorative-line.png" alt="">

<!-- ❌ 不要写无意义的 alt -->
<img src="logo.png" alt="logo">

不要用 alt 来塞关键词做 SEO——这会被搜索引擎判定为作弊。alt 应该像在跟一个看不见图的人描述图片内容一样自然。

图片格式

格式特点适用场景
JPEG有损压缩，不支持透明照片
PNG无损，支持透明Logo、图标、截图
GIF256 色，支持动画简单动图
SVG矢量，无限缩放图标、插图
WebP压缩率高，支持透明+动画几乎所有场景
AVIF最新格式，压缩率最高现代浏览器

响应式图片

srcset + sizes

让浏览器根据屏幕宽度自动选择合适的图片资源：

html 
<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="描述文字"
/>

<picture> 元素

根据不同条件（格式支持、屏幕宽度）提供不同图片源：

html 
<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="描述文字">
</picture>

浏览器按顺序检查，使用第一个支持的格式。img 是最后的回退方案。

始终为 <img> 设置 width 和 height 属性，浏览器可以提前预留空间，防止图片加载时页面内容跳动（CLS 问题）。