图片与响应式图片

约 772 字大约 3 分钟

布欧-Lewyon

2026-05-16

`<img>` 基础

<img src="photo.jpg" alt="风景照片">

必填属性

属性	作用	是否必填
`src`	图片地址	✅ 必填
`alt`	替代文本（图片加载失败时显示）	✅ 必填（无障碍）

尺寸属性

<img src="photo.jpg" alt="风景" width="800" height="600">

width / height 只设置原始尺寸比例。不设置时，图片加载过程中页面会"跳动"（布局偏移）。

`alt` 的写法

<!-- ✅ 有信息量的图片：描述内容 -->
<img src="chart.png" alt="2026年Q1营收柱状图：营收500万">

<!-- ✅ 功能型图片（如链接按钮）：描述功能 -->
<a href="/">
  <img src="logo.png" alt="回到首页">
</a>

<!-- ✅ 装饰性图片：alt 为空（屏幕阅读器跳过） -->
<img src="divider.png" alt="">

<!-- ❌ 不要写无意义的内容 -->
<img src="photo.jpg" alt="图片">
<img src="photo.jpg" alt="12345">

图片格式

格式	场景	特点
JPEG/JPG	照片、复杂图片	有损压缩，不支持透明
PNG	图标、截图、透明图	无损、支持透明、文件较大
GIF	简单动画	仅 256 色，文件小
WebP	现代格式	比 JPEG 小 25-35%，支持透明和动画
AVIF	最新格式	压缩率优于 WebP，兼容性略低
SVG	图标、Logo	矢量，无限缩放，文件极小

懒加载

<img src="photo.jpg" alt="风景" loading="lazy">

loading="lazy" 让图片在即将进入视口时才加载，减少首屏带宽占用。

`<picture>` 响应式图片

根据设备条件加载不同图片：

<picture>
  <!-- 视口宽度 ≥ 1200px 时加载大图 -->
  <source media="(min-width: 1200px)" srcset="hero-large.webp" type="image/webp">
  <source media="(min-width: 1200px)" srcset="hero-large.jpg">

  <!-- 视口宽度 ≥ 768px 时加载中图 -->
  <source media="(min-width: 768px)" srcset="hero-medium.webp" type="image/webp">
  <source media="(min-width: 768px)" srcset="hero-medium.jpg">

  <!-- 默认加载小图 -->
  <img src="hero-small.jpg" alt="横幅" loading="lazy">
</picture>

`srcset` + `sizes`

更精细的响应式选择——按设备像素密度：

<img
  src="photo-800.jpg"
  srcset="
    photo-400.jpg 400w,
    photo-800.jpg 800w,
    photo-1200.jpg 1200w
  "
  sizes="
    (max-width: 600px) 100vw,
    (max-width: 1200px) 50vw,
    800px
  "
  alt="响应式图片"
>

属性	作用
`srcset`	提供多个图片版本及对应宽度（`400w` = 400px 宽）
`sizes`	告诉浏览器图片在不同视口下占多少空间
浏览器	根据视口宽度 + 像素密度自动选择最合适的图片

图片映射 `<map>` + `<area>`

在单张图片上定义多个可点击区域：

<img src="world-map.jpg" alt="世界地图" usemap="#worldmap">

<map name="worldmap">
  <!-- 圆形区域 -->
  <area shape="circle" coords="200,150,30" href="/asia" alt="亚洲">

  <!-- 矩形区域 -->
  <area shape="rect" coords="300,100,400,200" href="/europe" alt="欧洲">

  <!-- 多边形区域 -->
  <area shape="poly" coords="50,50,100,50,80,100,50,80" href="/africa" alt="非洲">

  <!-- 默认区域（以上都不匹配时） -->
  <area shape="default" href="/other" alt="其他地区">
</map>

小结

属性/标签	作用
`alt`	替代文本，无障碍必备
`loading="lazy"`	懒加载
`<picture>` + `<source>`	按条件加载不同格式/尺寸图片
`srcset` + `sizes`	响应式图片（自动选择最佳版本）
`<map>` + `<area>`	图片映射（可点击区域）