src 与 alt 属性

src 和 alt 是 <img> 标签中最重要的两个属性。src 告诉浏览器去哪里找到图片，alt 提供了图片的替代文本描述。本节将深入探讨这两个属性的各种用法、路径类型以及无障碍与 SEO 的重要性。

前置知识

阅读本节前，建议先了解：img 标签基础

基础概念

src（Source）属性指定图片资源的 URL，浏览器根据这个地址去获取图片数据并渲染。alt（Alternative Text）属性则提供了图片的文字替代描述，当图片无法显示时展示这段文字，同时帮助屏幕阅读器和搜索引擎理解图片内容。

这两个属性分别解决了"图片在哪里"和"图片是什么"两个核心问题，它们是 <img> 标签发挥价值的基础。

语法

src 属性的基本用法

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>src 属性</title>
</head>
<body>
  <h1>src 属性的用法</h1>

  <!-- 相对路径：同一目录 -->
  <img src="photo.jpg" alt="风景照片">

  <br>

  <!-- 相对路径：子目录 -->
  <img src="images/photo.jpg" alt="风景照片">

  <br>

  <!-- 相对路径：上级目录 -->
  <img src="../images/photo.jpg" alt="风景照片">

  <br>

  <!-- 绝对路径：完整 URL -->
  <img src="https://www.example.com/images/photo.jpg" alt="风景照片">

  <br>

  <!-- 根相对路径 -->
  <img src="/images/photo.jpg" alt="风景照片">
</body>
</html>

alt 属性的基本用法

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>alt 属性</title>
</head>
<body>
  <h1>alt 属性的用法</h1>

  <!-- 信息性图片：详细描述内容 -->
  <img src="chart.png" alt="2024年各季度销售额柱状图，Q1 为 120 万，Q4 增长至 180 万">

  <br>

  <!-- 功能性图片：描述其功能而非外观 -->
  <img src="search-icon.png" alt="搜索">
  <img src="close-btn.png" alt="关闭">

  <br>

  <!-- 装饰性图片：空 alt 值 -->
  <img src="decorative-border.png" alt="">

  <br>

  <!-- 复杂图片：简要描述并在周围文字中补充 -->
  <figure>
    <img src="infographic.png" alt="全球互联网用户增长趋势信息图">
    <figcaption>图 1：根据国际电信联盟数据，全球互联网用户从 2010 年的 20 亿增长到 2024 年的 55 亿。</figcaption>
  </figure>
</body>
</html>

详细说明

src 的路径类型

src 支持多种路径类型，适用于不同场景：

路径类型	示例	适用场景
相对路径（同级）	`src="photo.jpg"`	图片与 HTML 文件在同一目录
相对路径（子目录）	`src="images/photo.jpg"`	图片在子文件夹中
相对路径（上级）	`src="../img/photo.jpg"`	图片在上级目录的子文件夹中
根相对路径	`src="/assets/photo.jpg"`	从网站根目录开始的路径
绝对路径	`src="https://cdn.example.com/photo.jpg"`	外部资源、CDN
Data URI	`src="data:image/png;base64,..."`	小型内嵌图片

相对路径详解

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>相对路径详解</title>
</head>
<body>
  <h1>相对路径详解</h1>

  <!--
    项目结构：
    website/
    ├── index.html          ← 当前文件
    ├── about/
    │   └── team.html       ← 子目录中的页面
    ├── images/
    │   ├── logo.png
    │   └── photos/
    │       └── hero.jpg    ← 嵌套子目录中的图片
    └── css/
        └── style.css

    从 index.html 引用：
  -->

  <!-- 引用同目录文件（如果有同目录图片） -->
  <img src="favicon.ico" alt="网站图标">

  <!-- 引用 images 子目录中的图片 -->
  <img src="images/logo.png" alt="网站 Logo">

  <!-- 引用 images/photos 嵌套子目录中的图片 -->
  <img src="images/photos/hero.jpg" alt="首页大图">

  <!--
    从 about/team.html 引用：
  -->

  <!-- 引用上级目录 images 中的图片 -->
  <!-- <img src="../images/logo.png" alt="网站 Logo"> -->

  <!-- 引用上级目录的上一级中的文件 -->
  <!-- <img src="../../favicon.ico" alt="网站图标"> -->
</body>
</html>

路径规则速记

./ 表示当前目录（可省略）
../ 表示上一级目录
每多一层嵌套就多一个 ../
根相对路径 / 始终从网站根目录开始

Data URI 嵌入图片

对于极小的图片（如图标、小徽章），可以直接将图片编码为 Base64 嵌入到 HTML 中：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Data URI 示例</title>
</head>
<body>
  <h1>Data URI 嵌入图片</h1>

  <!-- Data URI 格式：data:[媒体类型];base64,[编码数据] -->
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=="
       alt="一个 1x1 像素的占位图片">

  <br>

  <!-- 实际应用：内嵌小型 SVG 图标 -->
  <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23ff0000'/%3E%3C/svg%3E"
       alt="红色圆形标记">
</body>
</html>

Data URI 的优缺点

优点	缺点
减少 HTTP 请求数	增大 HTML 文件体积
可缓存在 HTML 中	无法被浏览器单独缓存
适用于极小图片	编码后体积增大约 33%
无跨域问题	不便于图片管理
HTML 文件可离线使用	内容不易阅读和维护

何时使用 Data URI

Data URI 只适合内嵌非常小的图片（通常小于 2KB），如 1px 透明占位符、小型 SVG 图标等。大图片使用 Data URI 会导致 HTML 文件过大，反而降低性能。

alt 属性的深入理解

alt 属性的核心目标是让无法看到图片的用户能够理解图片的含义：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>alt 属性深入</title>
</head>
<body>
  <h1>alt 属性写作指南</h1>

  <!-- 好：准确描述图片内容 -->
  <img src="team-photo.jpg" alt="公司产品团队 2024 年合影，共 12 名成员站在办公室前">

  <!-- 不推荐：过于简略 -->
  <!-- <img src="team-photo.jpg" alt="照片"> -->

  <!-- 不推荐：冗余信息 -->
  <!-- <img src="team-photo.jpg" alt="图片：团队照片.jpg 图片展示了一张团队照片"> -->

  <!-- 功能性图片：描述按钮/链接的功能 -->
  <a href="/search">
    <img src="magnifier.png" alt="搜索">
  </a>

  <!-- 不推荐：功能性图片描述外观而非功能 -->
  <!-- <a href="/search"><img src="magnifier.png" alt="放大镜图标"></a> -->

  <!-- 装饰性图片：空 alt 表示应被忽略 -->
  <img src="background-pattern.png" alt="">

  <!-- 错误！装饰性图片不应省略 alt -->
  <!-- <img src="background-pattern.png"> -->
</body>
</html>

alt 属性对 SEO 的影响

搜索引擎（如 Google）利用 alt 文本理解图片内容，这是图片 SEO 的核心因素：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>alt 与 SEO</title>
</head>
<body>
  <h1>为 SEO 优化 alt 文本</h1>

  <!-- 好：包含关键词但自然描述 -->
  <img src="red-running-shoes.jpg"
       alt="Nike 红色跑鞋，适合马拉松训练">

  <!-- 不推荐：关键词堆砌 -->
  <!-- <img src="shoes.jpg" alt="跑鞋 马拉松跑鞋 Nike跑鞋 运动鞋 便宜跑鞋"> -->

  <!-- 不推荐：与图片内容不符 -->
  <!-- <img src="blue-hat.jpg" alt="红色跑鞋"> -->

  <!-- 产品图片：包含品牌、颜色、型号 -->
  <img src="iphone-15.jpg"
       alt="Apple iPhone 15 Pro Max 自然钛色 256GB 正面视图">
</body>
</html>

图片加载失败的处理

当 src 指向的图片无法加载时，alt 文本会显示在图片的位置：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>图片加载失败</title>
  <style>
    /* 美化加载失败图片的外观 */
    img {
      border: 1px solid #ddd;
    }
  </style>
</head>
<body>
  <h1>图片加载失败的处理</h1>

  <!-- 有效路径：正常显示 -->
  <img src="valid-photo.jpg" alt="正常显示的图片">

  <hr>

  <!-- 无效路径：显示 alt 文本 -->
  <img src="nonexistent.jpg" alt="这是一张加载失败的图片替代文本">

  <hr>

  <!-- 无效路径且无 alt：显示破碎图标 -->
  <img src="nonexistent.jpg">

  <hr>

  <!-- JavaScript 处理图片加载错误 -->
  <img src="missing.jpg"
       alt="产品图片"
       onerror="this.onerror=null; this.src='placeholder.png'; this.alt='占位图片';">
</body>
</html>

实战示例

产品详情页中的图片

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>产品详情 - 无线蓝牙耳机</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      max-width: 1000px;
      margin: 0 auto;
      padding: 20px;
    }

    .product {
      display: flex;
      gap: 40px;
    }

    .product-image {
      flex: 0 0 400px;
    }

    .product-image img {
      width: 100%;
      height: auto;
      border-radius: 8px;
    }

    .product-info {
      flex: 1;
    }

    .product-info h1 {
      margin-top: 0;
    }

    .price {
      font-size: 28px;
      color: #e74c3c;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="product">
    <!-- 产品主图 -->
    <div class="product-image">
      <figure>
        <img src="images/headphones-main.jpg"
             alt="SoundMax Pro 无线蓝牙耳机，黑色，充电盒中取出两只耳塞"
             width="400" height="400">
        <figcaption>SounMax Pro 耳机实物图</figcaption>
      </figure>
    </div>

    <!-- 产品信息 -->
    <div class="product-info">
      <h1>SoundMax Pro 无线蓝牙耳机</h1>
      <p class="price">￥299</p>
      <p>
        主动降噪，续航 30 小时，IPX5 防水。支持蓝牙 5.3，低延迟游戏模式。
      </p>

      <h3>产品特点</h3>
      <ul>
        <li>主动降噪深度 -35dB</li>
        <li>单次充电续航 8 小时</li>
        <li>充电盒总续航 30 小时</li>
        <li>支持多点连接</li>
      </ul>

      <p>
        <img src="images/5-star.png" alt="五星好评" width="80" height="16">
        4.8 分 / 2,367 条评价
      </p>
    </div>
  </div>
</body>
</html>

注意事项

src 属性是 <img> 唯一必需的属性，缺少 src 图片不会加载
alt 虽然不是严格必需的，但强烈建议始终提供
装饰性图片使用 alt=""，不要省略 alt 属性
Data URI 编码后体积增大约 33%，不适合大图片
Data URI 图片无法被搜索引擎图片搜索收录
相对路径是相对于 HTML 文件本身，而非网站根目录
使用 onerror 事件处理图片加载失败是常见做法

最佳实践

始终提供有意义的 alt 文本，精确描述图片内容
功能性图片（如按钮图标）的 alt 应描述功能，而非外观
项目内图片使用相对路径，外部资源使用绝对路径
小型图标（<2KB）可考虑使用 SVG 内联或 Data URI
为重要图片设置 width 和 height，避免布局偏移
产品图片的 alt 应包含品牌、型号、颜色等关键信息
使用占位图片服务处理开发环境中的图片缺失

继续学习：图片尺寸与响应式图片

src 与 alt 属性 ​

基础概念 ​

语法 ​

src 属性的基本用法 ​

alt 属性的基本用法 ​

详细说明 ​

src 的路径类型 ​

相对路径详解 ​

Data URI 嵌入图片 ​

Data URI 的优缺点 ​

alt 属性的深入理解 ​

alt 属性对 SEO 的影响 ​

图片加载失败的处理 ​

实战示例 ​

产品详情页中的图片 ​

注意事项 ​

最佳实践 ​

参考链接 ​

src 与 alt 属性

基础概念

语法

src 属性的基本用法

alt 属性的基本用法

详细说明

src 的路径类型

相对路径详解

Data URI 嵌入图片

Data URI 的优缺点

alt 属性的深入理解

alt 属性对 SEO 的影响

图片加载失败的处理

实战示例

产品详情页中的图片

注意事项

最佳实践

参考链接