图片和图形：为 Web 添加视觉元素

什么是 HTML 图片?

图片是 Web 内容的重要组成部分。研究表明,人脑处理图像的速度比文字快 60,000 倍,因此图片对于吸引用户注意力、传达信息和提升用户体验至关重要。

为什么图片如此重要?

想象一个没有任何图片的网站——纯文字的页面不仅枯燥,而且难以快速传达复杂信息。图片的作用是:

• 视觉吸引力:让页面更生动、更吸引人
• 信息传达:一图胜千言,快速传达复杂概念
• 用户体验:产品展示、品牌形象等都需要图片
• 情感连接:图片能唤起情感,增强用户参与度

<!-- 一个基本的图片示例 -->
<img src="product.jpg" alt="UltraBook Pro laptop" />

<!-- 带标题的图片 -->
<figure>
  <img src="chart.png" alt="Sales growth chart" />
  <figcaption>Annual sales growth 2020-2025</figcaption>
</figure>

但是,不当使用图片也会带来问题:网页加载缓慢、可访问性差、SEO 效果不佳等。因此,正确使用图片标签非常重要。

img 标签基础

img 标签的核心属性

<img> 是一个自闭合标签,最重要的两个属性是 src 和 alt:

<!-- 基本结构 -->
<img src="image-path.jpg" alt="Description of image" />

<!-- 实际示例 -->
<img src="/images/logo.png" alt="Company Logo" />

<!-- 带宽高属性 -->
<img src="photo.jpg" alt="Sunset over mountains" width="800" height="600" />

src 属性 - 图片源

src 指定图片文件的位置:

<!-- 相对路径 -->
<img src="images/photo.jpg" alt="Photo" />
<img src="../assets/logo.png" alt="Logo" />
<img src="/static/banner.jpg" alt="Banner" />

<!-- 绝对路径 -->
<img src="https://cdn.example.com/image.jpg" alt="External Image" />

<!-- 协议相对路径 -->
<img src="//cdn.example.com/image.jpg" alt="Image" />

<!-- Data URL(Base64编码) -->
<img src="data:image/png;base64,iVBORw0KGg..." alt="Embedded Image" />

alt 属性 - 替代文本

alt 属性是必需的,它提供图片的文字描述:

<!-- ✅ 好的alt文本:描述性和具体 -->
<img
  src="ceo-portrait.jpg"
  alt="Sarah Chen, CEO of TechCorp, speaking at conference"
/>

<img
  src="product-laptop.jpg"
  alt="Silver UltraBook Pro 15-inch laptop, open at 90 degrees"
/>

<img
  src="chart-sales.png"
  alt="Bar chart showing 25% sales increase from 2024 to 2025"
/>

<!-- ❌ 避免:不够描述性 -->
<img src="image1.jpg" alt="image" />
<img src="ceo.jpg" alt="person" />
<img src="chart.png" alt="chart" />

<!-- 装饰性图片使用空alt -->
<img src="decorative-border.png" alt="" />

为什么 alt 如此重要?

<!-- 
alt的三大作用:
1. 可访问性:屏幕阅读器会读取alt文本
2. SEO:搜索引擎通过alt理解图片内容
3. 备用显示:图片加载失败时显示alt文本
-->

<!-- 示例:图片加载失败时 -->
<img src="broken-link.jpg" alt="Product demonstration video screenshot" />
<!-- 用户会看到"Product demonstration video screenshot"这段文字 -->

width 和 height 属性

指定图片尺寸可以防止页面布局抖动:

<!-- ✅ 推荐:提前指定尺寸 -->
<img src="photo.jpg" alt="Landscape photo" width="800" height="600" />

<!-- 浏览器加载流程:
1. 解析HTML,看到width和height
2. 预留800x600的空间
3. 加载图片
4. 图片显示在预留空间,页面不跳动
-->

<!-- ❌ 没有尺寸的问题 -->
<img src="photo.jpg" alt="Photo" />
<!-- 
问题:
- 图片加载前浏览器不知道预留多少空间
- 图片加载后页面内容会突然移动
- 造成糟糕的用户体验(CLS问题)
-->

loading 属性 - 懒加载

HTML 原生支持图片懒加载:

<!-- 懒加载:图片接近视口时才加载 -->
<img src="below-fold.jpg" alt="Content below the fold" loading="lazy" />

<!-- 立即加载(默认值) -->
<img src="hero-image.jpg" alt="Hero banner" loading="eager" />

<!-- 最佳实践 -->
<!-- 首屏重要图片 -->
<img src="logo.png" alt="Company logo" loading="eager" />
<img src="hero.jpg" alt="Hero image" loading="eager" />

<!-- 首屏以下的图片 -->
<img src="article-image-1.jpg" alt="Article image" loading="lazy" />
<img src="article-image-2.jpg" alt="Another image" loading="lazy" />

响应式图片

picture 元素 - 艺术指导

<picture> 元素允许为不同场景提供不同图片:

<!-- 基于屏幕宽度选择不同图片 -->
<picture>
  <!-- 移动设备:竖版图片 -->
  <source media="(max-width: 767px)" srcset="image-mobile.jpg" />

  <!-- 平板:方形图片 -->
  <source media="(max-width: 1023px)" srcset="image-tablet.jpg" />

  <!-- 桌面:横版图片 -->
  <source media="(min-width: 1024px)" srcset="image-desktop.jpg" />

  <!-- 备用图片 -->
  <img src="image-desktop.jpg" alt="Responsive image" />
</picture>

<!-- 实际案例:不同设备显示不同构图 -->
<picture>
  <!-- 手机:只显示产品特写 -->
  <source media="(max-width: 767px)" srcset="product-closeup.jpg" />

  <!-- 平板:产品+背景 -->
  <source media="(max-width: 1023px)" srcset="product-medium.jpg" />

  <!-- 桌面完整场景 -->
  <source media="(min-width: 1024px)" srcset="product-full-scene.jpg" />

  <img
    src="product-full-scene.jpg"
    alt="UltraBook Pro in modern office setting"
  />
</picture>

srcset 和 sizes - 分辨率切换

根据屏幕密度和尺寸自动选择最合适的图片:

<!-- 基于设备像素比(DPR) -->
<img
  src="image.jpg"
  srcset="image.jpg 1x, [email protected] 2x, [email protected] 3x"
  alt="High-resolution image"
/>

<!-- 基于视口宽度 -->
<img
  src="image-800.jpg"
  srcset="
    image-400.jpg   400w,
    image-800.jpg   800w,
    image-1200.jpg 1200w,
    image-1600.jpg 1600w
  "
  sizes="(max-width: 600px) 100vw,
            (max-width: 1200px) 50vw,
            800px"
  alt="Responsive width image"
/>

<!-- 实际案例:产品图片 -->
<img
  src="product-800w.jpg"
  srcset="
    product-400w.jpg   400w,
    product-800w.jpg   800w,
    product-1200w.jpg 1200w,
    product-1600w.jpg 1600w
  "
  sizes="(max-width: 500px) 100vw,
            (max-width: 900px) 50vw,
            33vw"
  alt="UltraBook Pro laptop"
  width="800"
  height="600"
  loading="lazy"
/>

sizes 属性详解:

<!--
sizes告诉浏览器图片在不同视口下的显示大小:
- (max-width: 600px) 100vw:视口<=600px时,图片宽度=100%视口宽度
- (max-width: 1200px) 50vw:视口<=1200px时,图片宽度=50%视口宽度
- 800px:其他情况,图片宽度=800px

浏览器结合sizes和srcset自动选择最优图片
-->

<img
  srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w"
  sizes="(max-width: 600px) 100vw,
            (max-width: 1200px) 50vw,
            33vw"
  src="medium.jpg"
  alt="Example"
/>

<!--
场景1:用户使用iPhone(375px宽,2x DPR)
- sizes计算:100vw = 375px
- 实际需要:375px × 2 = 750px
- 浏览器选择:medium.jpg (800w)

场景2:用户使用iPad(768px宽,2x DPR)
- sizes计算:50vw = 384px
- 实际需要:384px × 2 = 768px
- 浏览器选择:medium.jpg (800w)

场景3:用户使用桌面(1920px宽,1x DPR)
- sizes计算:33vw = 633px
- 实际需要:633px × 1 = 633px
- 浏览器选择:medium.jpg (800w)
-->

WebP 等现代格式

<!-- 提供多种格式,浏览器自动选择支持的 -->
<picture>
  <!-- WebP格式:现代浏览器 -->
  <source type="image/webp" srcset="image.webp" />

  <!-- AVIF格式:最新浏览器 -->
  <source type="image/avif" srcset="image.avif" />

  <!-- JPEG备用:所有浏览器 -->
  <img src="image.jpg" alt="Modern format image" />
</picture>

<!-- 结合响应式 -->
<picture>
  <source
    type="image/webp"
    srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
    sizes="(max-width: 600px) 100vw, 800px"
  />

  <source
    type="image/jpeg"
    srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
    sizes="(max-width: 600px) 100vw, 800px"
  />

  <img
    src="image-800.jpg"
    alt="Optimized modern image"
    width="800"
    height="600"
    loading="lazy"
  />
</picture>

figure 和 figcaption 元素

语义化图片容器

<figure> 用于包裹图片和说明文字:

<!-- 基本用法 -->
<figure>
  <img src="architecture.jpg" alt="Modern building with glass facade" />
  <figcaption>The new TechCorp headquarters in Seattle</figcaption>
</figure>

<!-- 多张图片 -->
<figure>
  <img src="photo1.jpg" alt="Garden in spring" />
  <img src="photo2.jpg" alt="Garden in summer" />
  <img src="photo3.jpg" alt="Garden in autumn" />
  <img src="photo4.jpg" alt="Garden in winter" />
  <figcaption>The garden through four seasons</figcaption>
</figure>

<!-- 带详细说明 -->
<figure>
  <img
    src="chart-revenue.png"
    alt="Line chart showing revenue growth"
    width="800"
    height="400"
  />
  <figcaption>
    <strong>Figure 1:</strong> Annual revenue growth 2020-2025. Revenue
    increased from $50M to $200M, representing 300% growth.
  </figcaption>
</figure>

figure 的其他用途

<!-- 代码示例 -->
<figure>
  <pre><code>function greet(name) {
  return `Hello, ${name}!`;
}</code></pre>
  <figcaption>Listing 1: Basic greeting function in JavaScript</figcaption>
</figure>

<!-- 引用 -->
<figure>
  <blockquote>
    <p>
      Design is not just what it looks like and feels like. Design is how it
      works.
    </p>
  </blockquote>
  <figcaption>— Steve Jobs, Apple co-founder</figcaption>
</figure>

<!-- 视频 -->
<figure>
  <video src="demo.mp4" controls width="640" height="360">
    Your browser doesn't support video.
  </video>
  <figcaption>Product demonstration video</figcaption>
</figure>

图片格式选择

常见图片格式对比

<!-- JPEG:适合照片 -->
<img src="photo.jpg" alt="Landscape photo" />
<!--
优点:文件小,广泛支持
缺点:有损压缩,不支持透明
适用:照片、复杂图像
-->

<!-- PNG:适合图标、截图 -->
<img src="icon.png" alt="App icon" />
<!--
优点:无损压缩,支持透明
缺点:文件较大
适用:图标、徽标、截图、需要透明背景的图片
-->

<!-- WebP:现代格式 -->
<img src="image.webp" alt="Modern format" />
<!--
优点:比JPEG/PNG更小,支持透明和动画
缺点:旧浏览器不支持
适用:现代Web应用
-->

<!-- SVG:矢量图形 -->
<img src="logo.svg" alt="Company logo" />
<!--
优点:无限缩放不失真,文件小
缺点:不适合复杂图像
适用:图标、徽标、简单图形
-->

<!-- GIF:动画 -->
<img src="animation.gif" alt="Loading animation" />
<!--
优点:支持动画
缺点:颜色限制(256色),文件大
适用:简单动画(但更推荐用video或CSS动画)
-->

最佳实践:格式选择决策树

<!-- 决策流程 -->
<!--
是否需要透明背景?
├─ 是 → 简单图形? 
│        ├─ 是 → SVG或PNG
│        └─ 否 → WebP(备用PNG)
└─ 否 → 照片?
         ├─ 是 → WebP(备用JPEG)
         └─ 否 → 图标/徽标?
                  ├─ 是 → SVG
                  └─ 否 → WebP(备用PNG)
-->

<!-- 实际应用示例 -->

<!-- 1. Logo(矢量图形) -->
<img src="logo.svg" alt="Company logo" width="200" height="50" />

<!-- 2. 产品照片 -->
<picture>
  <source type="image/webp" srcset="product.webp" />
  <img src="product.jpg" alt="Product photo" width="600" height="400" />
</picture>

<!-- 3. 带透明背景的图标 -->
<picture>
  <source type="image/webp" srcset="icon.webp" />
  <img src="icon.png" alt="Feature icon" width="64" height="64" />
</picture>

<!-- 4. 截图 -->
<picture>
  <source type="image/webp" srcset="screenshot.webp" />
  <img src="screenshot.png" alt="App screenshot" width="1200" height="800" />
</picture>

SVG 内联使用

直接嵌入 SVG

<!-- SVG作为img标签 -->
<img src="icon.svg" alt="Icon" width="24" height="24" />

<!-- 内联SVG:可以用CSS控制 -->
<svg
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z"
    fill="currentColor"
  />
</svg>

<!-- 可访问的SVG -->
<svg width="100" height="100" role="img" aria-labelledby="icon-title">
  <title id="icon-title">Settings icon</title>
  <circle cx="50" cy="50" r="40" fill="#4CAF50" />
</svg>

<!-- 装饰性SVG -->
<svg width="100" height="100" aria-hidden="true" focusable="false">
  <circle cx="50" cy="50" r="40" fill="#2196F3" />
</svg>

图片优化最佳实践

性能优化

<!-- 1. 使用适当的尺寸 -->
<!-- ❌ 不要加载过大的图片 -->
<img src="huge-5000x5000.jpg" alt="Photo" width="200" height="200" />
<!-- 浪费:下载5000x5000的图片但只显示200x200 -->

<!-- ✅ 提供合适尺寸的图片 -->
<img src="optimized-400x400.jpg" alt="Photo" width="200" height="200" />
<!-- 2x显示也足够清晰 -->

<!-- 2. 使用懒加载 -->
<img
  src="below-fold.jpg"
  alt="Content"
  loading="lazy"
  width="800"
  height="600"
/>

<!-- 3. 使用现代格式 -->
<picture>
  <source type="image/avif" srcset="image.avif" />
  <source type="image/webp" srcset="image.webp" />
  <img src="image.jpg" alt="Optimized image" width="800" height="600" />
</picture>

<!-- 4. 提供多个分辨率 -->
<img
  srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  src="image-800.jpg"
  alt="Responsive image"
  loading="lazy"
/>

<!-- 5. 预加载关键图片 -->
<link rel="preload" as="image" href="hero-image.jpg" />

<!-- 6. 使用CDN -->
<img src="https://cdn.example.com/optimized/image.jpg" alt="CDN hosted image" />

可访问性优化

<!-- 1. 始终提供alt文本 -->
<img src="chart.png" alt="Bar chart showing 50% increase in user engagement" />

<!-- 2. 装饰性图片使用空alt -->
<img src="decorative-pattern.png" alt="" aria-hidden="true" />

<!-- 3. 复杂图片提供详细说明 -->
<figure>
  <img
    src="complex-diagram.png"
    alt="System architecture diagram"
    aria-describedby="diagram-description"
  />
  <figcaption id="diagram-description">
    The diagram shows three main components: Frontend (React), Backend
    (Node.js), and Database (PostgreSQL). Arrows indicate data flow between
    components...
  </figcaption>
</figure>

<!-- 4. 功能性图片提供准确描述 -->
<!-- ❌ 不够描述性 -->
<a href="/search">
  <img src="search-icon.png" alt="icon" />
</a>

<!-- ✅ 描述功能 -->
<a href="/search">
  <img src="search-icon.png" alt="Search" />
</a>

<!-- 或者更好:使用aria-label -->
<a href="/search" aria-label="Search the website">
  <img src="search-icon.png" alt="" aria-hidden="true" />
</a>

实际应用案例

电商产品展示

<article class="product">
  <figure>
    <picture>
      <!-- WebP格式 -->
      <source
        type="image/webp"
        srcset="
          product-400.webp   400w,
          product-800.webp   800w,
          product-1200.webp 1200w
        "
        sizes="(max-width: 600px) 100vw,
                     (max-width: 1200px) 50vw,
                     600px"
      />

      <!-- JPEG备用 -->
      <source
        type="image/jpeg"
        srcset="
          product-400.jpg   400w,
          product-800.jpg   800w,
          product-1200.jpg 1200w
        "
        sizes="(max-width: 600px) 100vw,
                     (max-width: 1200px) 50vw,
                     600px"
      />

      <img
        src="product-800.jpg"
        alt="UltraBook Pro 15-inch laptop in silver, shown open at 90-degree angle"
        width="800"
        height="600"
        loading="lazy"
      />
    </picture>
    <figcaption>UltraBook Pro - Starting at $1,299</figcaption>
  </figure>

  <!-- 缩略图 -->
  <div class="thumbnails">
    <img src="product-thumb-1.jpg" alt="Front view" width="80" height="60" />
    <img src="product-thumb-2.jpg" alt="Side view" width="80" height="60" />
    <img
      src="product-thumb-3.jpg"
      alt="Keyboard detail"
      width="80"
      height="60"
    />
  </div>
</article>

博客文章配图

<article>
  <header>
    <h1>Understanding Web Performance</h1>
    <figure class="hero-image">
      <picture>
        <source media="(max-width: 767px)" srcset="hero-mobile.jpg" />
        <source media="(max-width: 1023px)" srcset="hero-tablet.jpg" />
        <img
          src="hero-desktop.jpg"
          alt="Dashboard showing web performance metrics"
          width="1200"
          height="600"
        />
      </picture>
    </figure>
  </header>

  <section>
    <p>Web performance is crucial...</p>

    <figure>
      <img
        src="chart-performance.png"
        alt="Line chart showing page load time decreasing from 5s to 1.5s"
        width="800"
        height="400"
        loading="lazy"
      />
      <figcaption>
        <strong>Figure 1:</strong> Performance improvements after optimization
      </figcaption>
    </figure>
  </section>
</article>

响应式图片库

<section class="gallery">
  <h2>Project Gallery</h2>

  <div class="grid">
    <figure>
      <picture>
        <source type="image/webp" srcset="gallery-1.webp" />
        <img
          src="gallery-1.jpg"
          alt="Modern office interior with open floor plan"
          width="400"
          height="300"
          loading="lazy"
        />
      </picture>
      <figcaption>Office Design Project</figcaption>
    </figure>

    <figure>
      <picture>
        <source type="image/webp" srcset="gallery-2.webp" />
        <img
          src="gallery-2.jpg"
          alt="Residential kitchen with marble countertops"
          width="400"
          height="300"
          loading="lazy"
        />
      </picture>
      <figcaption>Kitchen Renovation</figcaption>
    </figure>

    <!-- 更多图片... -->
  </div>
</section>

常见问题

问题 1: 何时使用 img vs background-image?

<!-- img:内容相关的图片 -->
<img src="product.jpg" alt="Product photo" />
<!-- 
使用img当:
- 图片是内容的一部分
- 需要SEO
- 需要可访问性(alt文本)
- 需要打印
-->

<!-- CSS background:装饰性图片 -->
<div style="background-image: url('pattern.png')">Content here</div>
<!--
使用background当:
- 纯装饰
- 不需要SEO
- 不需要打印
- 需要CSS控制(位置、重复等)
-->

问题 2: 如何处理高 DPI 屏幕?

<!-- 方案1: srcset with x描述符 -->
<img
  src="image.jpg"
  srcset="image.jpg 1x, [email protected] 2x, [email protected] 3x"
  alt="High-res image"
/>

<!-- 方案2: srcset with w描述符 -->
<img
  srcset="image-800.jpg 800w, image-1600.jpg 1600w, image-2400.jpg 2400w"
  sizes="800px"
  src="image-800.jpg"
  alt="Responsive high-res"
/>

<!-- 方案3: SVG(自动适应任何分辨率) -->
<img src="logo.svg" alt="Logo" width="200" height="50" />

问题 3: 图片加载失败如何处理?

<!-- JavaScript处理 -->
<img
  src="image.jpg"
  alt="Product photo"
  onerror="this.src='placeholder.jpg'; this.onerror=null;"
/>

<!-- 更好的方式:CSS -->
<img src="image.jpg" alt="Product photo" class="fallback-image" />

<style>
  .fallback-image {
    background: #f0f0f0 url("placeholder.svg") center/contain no-repeat;
    min-height: 200px;
  }
</style>

最佳实践总结

1. 始终提供 alt 文本:除了装饰性图片,所有图片都需要有意义的 alt
2. 指定宽高:防止布局抖动,改善 CLS(Cumulative Layout Shift)
3. 使用懒加载:首屏以下的图片使用 loading="lazy"
4. 响应式图片:使用 srcset/sizes 或 picture 元素适配不同设备
5. 现代格式:优先使用 WebP/AVIF,提供 JPEG/PNG 备用
6. 优化尺寸:不要加载比实际显示尺寸大太多的图片
7. 使用 CDN:加速图片加载
8. figure 元素:为有说明文字的图片使用语义化标签
9. SVG 图标:简单图形优先使用 SVG
10. 性能监控:定期检查图片对页面性能的影响

通过正确使用图片和图形元素,你可以创建视觉吸引力强、性能优秀、可访问性好的 Web 应用,为用户提供卓越的体验。