2.4 图像和媒体元素

关键词: HTML5图像元素, img标签, 图片格式, 响应式图像, 图像映射, 图形元素, 媒体优化, 可访问性, srcset, picture标签

学习目标

掌握HTML5图像元素的使用方法和属性
理解不同图像格式的特点和选择策略
学会创建响应式图像和自适应图片
掌握图像映射和图形元素的使用技巧
了解图像优化和可访问性最佳实践

本节概述

图像和媒体元素是现代网页设计中不可或缺的组成部分，它们能够增强用户体验，传达信息，并使网页更加生动有趣。HTML5提供了丰富的图像和媒体元素，包括传统的 <img> 元素，以及新增的 <figure>、<figcaption> 等语义化元素。本节将详细介绍这些元素的使用方法、最佳实践和现代Web开发技术。

2.4.1 图像元素基础

`<img>` 元素的基本语法

html

<img src="图像路径" alt="替代文本">

必需属性

src 属性

指定图像文件的路径：

html

<!-- 相对路径 -->
<img src="images/logo.png" alt="公司标志">
<img src="./photos/sunset.jpg" alt="日落风景">
<img src="../assets/icon.svg" alt="图标">

<!-- 绝对路径 -->
<img src="/images/banner.jpg" alt="横幅图片">

<!-- 完整URL -->
<img src="https://example.com/image.jpg" alt="外部图片">

alt 属性

提供图像的替代文本，对无障碍访问至关重要：

html

<!-- 描述性的alt文本 -->
<img src="product.jpg" alt="红色运动鞋，白色鞋底">

<!-- 装饰性图片可以使用空alt -->
<img src="decoration.png" alt="">

<!-- 复杂图像的alt文本 -->
<img src="chart.png" alt="2023年销售额趋势图，显示第一季度增长15%">

可选属性

width 和 height 属性

html

<!-- 指定图像尺寸 -->
<img src="photo.jpg" alt="风景照片" width="800" height="600">

<!-- 只指定一个维度，另一个自动缩放 -->
<img src="portrait.jpg" alt="肖像照片" width="300">

title 属性

html

<img src="artwork.jpg" alt="油画作品" title="《星空》- 梵高作品">

loading 属性（HTML5新增）

html

<!-- 懒加载图像 -->
<img src="large-image.jpg" alt="大图片" loading="lazy">

<!-- 立即加载图像 -->
<img src="hero-image.jpg" alt="主要图片" loading="eager">

2.4.2 响应式图像

使用 srcset 属性

提供多个图像源，浏览器根据设备特性选择最合适的图像：

html

<!-- 基于像素密度的响应式图像 -->
<img src="image.jpg" 
     srcset="image.jpg 1x, 
             image@2x.jpg 2x, 
             image@3x.jpg 3x"
     alt="响应式图像">

<!-- 基于视口宽度的响应式图像 -->
<img src="image-800.jpg"
     srcset="image-400.jpg 400w,
             image-800.jpg 800w,
             image-1200.jpg 1200w"
     sizes="(max-width: 600px) 400px,
            (max-width: 1000px) 800px,
            1200px"
     alt="响应式图像">

使用 `<picture>` 元素

提供更精细的控制：

html

<picture>
  <!-- 针对小屏幕设备 -->
  <source media="(max-width: 600px)" 
          srcset="small-image.jpg">
  
  <!-- 针对中等屏幕设备 -->
  <source media="(max-width: 1200px)" 
          srcset="medium-image.jpg">
  
  <!-- 针对大屏幕设备 -->
  <source media="(min-width: 1201px)" 
          srcset="large-image.jpg">
  
  <!-- 回退图像 -->
  <img src="default-image.jpg" alt="响应式图像">
</picture>

不同图像格式的支持

html

<picture>
  <!-- 现代浏览器支持的WebP格式 -->
  <source srcset="image.webp" type="image/webp">
  
  <!-- AVIF格式（最新浏览器支持） -->
  <source srcset="image.avif" type="image/avif">
  
  <!-- 传统JPEG格式作为回退 -->
  <img src="image.jpg" alt="图像">
</picture>

2.4.3 图像语义化元素

`<figure>` 和 `<figcaption>` 元素

html

<!-- 基本用法 -->
<figure>
  <img src="chart.png" alt="销售数据图表">
  <figcaption>2023年第一季度销售数据</figcaption>
</figure>

<!-- 复杂的图像说明 -->
<figure>
  <img src="architecture.jpg" alt="现代建筑物">
  <figcaption>
    <h3>现代艺术博物馆</h3>
    <p>由著名建筑师设计，于2020年建成开放</p>
  </figcaption>
</figure>

代码示例的语义化

html

<figure>
  <pre><code>
function greeting(name) {
  return `Hello, ${name}!`;
}
  </code></pre>
  <figcaption>JavaScript问候函数示例</figcaption>
</figure>

引用内容的语义化

html

<figure>
  <blockquote>
    <p>设计不仅仅是看起来如何，感觉如何。设计就是如何运作。</p>
  </blockquote>
  <figcaption>
    <cite>史蒂夫·乔布斯</cite>
  </figcaption>
</figure>

2.4.4 图像优化最佳实践

选择合适的图像格式

html

<!-- 照片使用JPEG -->
<img src="photo.jpg" alt="风景照片">

<!-- 图标和简单图形使用PNG -->
<img src="icon.png" alt="应用图标">

<!-- 矢量图形使用SVG -->
<img src="logo.svg" alt="公司标志">

<!-- 现代浏览器使用WebP -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="图像">
</picture>

图像压缩和优化

html

<!-- 为不同设备优化图像尺寸 -->
<img src="hero-image.jpg"
     srcset="hero-small.jpg 480w,
             hero-medium.jpg 800w,
             hero-large.jpg 1200w"
     sizes="(max-width: 480px) 480px,
            (max-width: 800px) 800px,
            1200px"
     alt="主要图片">

懒加载实现

html

<!-- 原生懒加载 -->
<img src="image.jpg" alt="图片" loading="lazy">

<!-- 结合Intersection Observer API -->
<img src="placeholder.jpg" 
     data-src="actual-image.jpg" 
     alt="图片" 
     class="lazy-load">

javascript

// 懒加载实现
const lazyImages = document.querySelectorAll('.lazy-load');
const imageObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.classList.remove('lazy-load');
      observer.unobserve(img);
    }
  });
});

lazyImages.forEach(img => {
  imageObserver.observe(img);
});

2.4.5 CSS图像处理

基本图像样式

css

/* 响应式图像 */
.responsive-image {
  max-width: 100%;
  height: auto;
}

/* 图像容器 */
.image-container {
  position: relative;
  overflow: hidden;
}

/* 图像悬停效果 */
.hover-effect {
  transition: transform 0.3s ease;
}

.hover-effect:hover {
  transform: scale(1.05);
}

图像滤镜效果

css

/* CSS滤镜效果 */
.filter-grayscale {
  filter: grayscale(100%);
}

.filter-sepia {
  filter: sepia(50%);
}

.filter-blur {
  filter: blur(3px);
}

.filter-brightness {
  filter: brightness(1.2);
}

.filter-contrast {
  filter: contrast(1.5);
}

/* 组合滤镜 */
.filter-vintage {
  filter: sepia(30%) contrast(1.2) brightness(1.1);
}

图像遮罩和裁剪

css

/* 圆形图像 */
.circular-image {
  border-radius: 50%;
  width: 200px;
  height: 200px;
  object-fit: cover;
}

/* 图像遮罩 */
.masked-image {
  mask: url(#mask);
  -webkit-mask: url(#mask);
}

/* 裁剪路径 */
.clipped-image {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

2.4.6 SVG图像

内联SVG

html

<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="blue" />
  <text x="50" y="55" text-anchor="middle" fill="white">SVG</text>
</svg>

外部SVG文件

html

<!-- 作为图像引用 -->
<img src="icon.svg" alt="图标">

<!-- 作为对象嵌入 -->
<object data="illustration.svg" type="image/svg+xml">
  <img src="fallback.png" alt="插图">
</object>

响应式SVG

css

/* 响应式SVG */
.responsive-svg {
  width: 100%;
  height: auto;
}

/* 固定比例的SVG容器 */
.svg-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 比例 */
}

.svg-container svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

2.4.7 图像无障碍访问

Alt文本最佳实践

html

<!-- 描述性图像 -->
<img src="sunset.jpg" alt="海边日落，天空呈现橙红色">

<!-- 功能性图像 -->
<img src="search-icon.png" alt="搜索">

<!-- 装饰性图像 -->
<img src="decoration.png" alt="" role="presentation">

<!-- 复杂图像 -->
<img src="org-chart.png" alt="组织架构图" 
     longdesc="org-chart-description.html">

复杂图像的描述

html

<!-- 使用aria-describedby -->
<img src="complex-chart.png" 
     alt="季度销售数据图表" 
     aria-describedby="chart-description">

<div id="chart-description">
  <h3>图表详细说明</h3>
  <p>该图表显示了2023年四个季度的销售数据：</p>
  <ul>
    <li>第一季度：150万</li>
    <li>第二季度：180万</li>
    <li>第三季度：200万</li>
    <li>第四季度：220万</li>
  </ul>
</div>

图像标题和说明

html

<figure role="img" aria-labelledby="fig-title" aria-describedby="fig-desc">
  <img src="data-visualization.png" alt="">
  <figcaption>
    <h3 id="fig-title">用户增长趋势</h3>
    <p id="fig-desc">
      过去12个月的用户增长数据显示稳定上升趋势，
      从1月的1000用户增长到12月的5000用户。
    </p>
  </figcaption>
</figure>

2.4.8 实际应用示例

产品展示页面

html

<section class="product-showcase">
  <div class="product-images">
    <figure class="main-image">
      <picture>
        <source media="(max-width: 600px)" 
                srcset="product-mobile.jpg">
        <source media="(max-width: 1200px)" 
                srcset="product-tablet.jpg">
        <img src="product-desktop.jpg" 
             alt="蓝色运动鞋产品图片">
      </picture>
    </figure>
    
    <div class="thumbnail-gallery">
      <img src="product-thumb1.jpg" 
           alt="运动鞋正面图" 
           class="thumbnail">
      <img src="product-thumb2.jpg" 
           alt="运动鞋侧面图" 
           class="thumbnail">
      <img src="product-thumb3.jpg" 
           alt="运动鞋底部图" 
           class="thumbnail">
    </div>
  </div>
  
  <div class="product-info">
    <h2>专业运动鞋</h2>
    <p>高质量材料制作，适合日常运动和健身。</p>
  </div>
</section>

图片画廊

html

<section class="gallery">
  <h2>摄影作品集</h2>
  <div class="gallery-grid">
    <figure class="gallery-item">
      <img src="photo1.jpg" 
           alt="山峰日出景色" 
           loading="lazy">
      <figcaption>
        <h3>山峰日出</h3>
        <p>摄于阿尔卑斯山脉</p>
      </figcaption>
    </figure>
    
    <figure class="gallery-item">
      <img src="photo2.jpg" 
           alt="海浪拍打礁石" 
           loading="lazy">
      <figcaption>
        <h3>海浪礁石</h3>
        <p>摄于太平洋海岸</p>
      </figcaption>
    </figure>
    
    <figure class="gallery-item">
      <img src="photo3.jpg" 
           alt="城市夜景灯光" 
           loading="lazy">
      <figcaption>
        <h3>城市夜景</h3>
        <p>摄于东京塔顶</p>
      </figcaption>
    </figure>
  </div>
</section>

文章配图

html

<article>
  <h1>深度学习在图像识别中的应用</h1>
  
  <figure class="article-figure">
    <img src="neural-network-diagram.png" 
         alt="神经网络结构图，显示输入层、隐藏层和输出层">
    <figcaption>
      图1：典型的深度神经网络结构
    </figcaption>
  </figure>
  
  <p>深度学习技术在图像识别领域取得了显著成果...</p>
  
  <figure class="article-figure">
    <img src="accuracy-comparison.png" 
         alt="准确率对比图表，显示不同算法的性能表现">
    <figcaption>
      图2：不同算法在图像识别任务中的准确率对比
    </figcaption>
  </figure>
</article>

2.4.9 图像性能优化

图像预加载

html

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

<!-- 使用JavaScript预加载 -->
<script>
function preloadImages(urls) {
  urls.forEach(url => {
    const img = new Image();
    img.src = url;
  });
}

preloadImages([
  'image1.jpg',
  'image2.jpg',
  'image3.jpg'
]);
</script>

图像压缩策略

html

<!-- 针对不同设备优化 -->
<picture>
  <!-- 高分辨率设备 -->
  <source media="(min-resolution: 2dppx)" 
          srcset="image@2x.webp" 
          type="image/webp">
  
  <!-- 标准分辨率设备 -->
  <source srcset="image.webp" 
          type="image/webp">
  
  <!-- 回退选项 -->
  <img src="image.jpg" 
       alt="图像" 
       width="800" 
       height="600">
</picture>

图像缓存优化

html

<!-- 设置适当的缓存策略 -->
<meta http-equiv="Cache-Control" content="max-age=31536000">

<!-- 使用CDN加速 -->
<img src="https://cdn.example.com/optimized-image.jpg" 
     alt="CDN加速图像">

2.4.10 媒体元素基础

音频元素

html

<!-- 基本音频播放器 -->
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  您的浏览器不支持音频播放。
</audio>

<!-- 自动播放音频（谨慎使用） -->
<audio autoplay muted>
  <source src="background-music.mp3" type="audio/mpeg">
</audio>

视频元素

html

<!-- 基本视频播放器 -->
<video controls width="800" height="450">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <track kind="subtitles" 
         src="subtitles-zh.vtt" 
         srclang="zh" 
         label="中文字幕">
  您的浏览器不支持视频播放。
</video>

<!-- 响应式视频 -->
<div class="video-container">
  <video controls>
    <source src="responsive-video.mp4" type="video/mp4">
  </video>
</div>

css

.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 比例 */
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

2.4.11 常见错误和最佳实践

常见错误

忘记提供alt属性

html

<!-- 错误 -->
<img src="important-image.jpg">

<!-- 正确 -->
<img src="important-image.jpg" alt="重要图片描述">

不适当的图像格式

html

<!-- 错误：照片使用PNG格式 -->
<img src="photo.png" alt="照片">

<!-- 正确：照片使用JPEG格式 -->
<img src="photo.jpg" alt="照片">

忽略响应式设计

html

<!-- 错误：固定尺寸 -->
<img src="image.jpg" alt="图像" width="800">

<!-- 正确：响应式图像 -->
<img src="image.jpg" alt="图像" class="responsive-image">

最佳实践

选择合适的图像格式
- 照片使用JPEG
- 图标和简单图形使用PNG或SVG
- 动图使用GIF或WebP
- 现代浏览器优先使用WebP
优化图像尺寸
- 不要显示比需要更大的图像
- 使用响应式图像技术
- 考虑设备像素比
提供有意义的alt文本
- 描述图像内容而非外观
- 装饰性图像使用空alt
- 复杂图像提供详细描述
考虑性能影响
- 使用懒加载
- 压缩图像文件
- 使用适当的图像格式

小结

图像和媒体元素是现代网页的重要组成部分，正确使用这些元素不仅能提升用户体验，还能改善网站的性能和可访问性。在实际开发中，要注意选择合适的图像格式、实现响应式设计、优化加载性能，并确保所有用户都能获得良好的体验。

下一节我们将学习表格元素，了解如何创建和样式化数据表格。

2.4 图像和媒体元素 ​

学习目标 ​

本节概述 ​

2.4.1 图像元素基础 ​

<img> 元素的基本语法 ​

必需属性 ​

src 属性 ​

alt 属性 ​

可选属性 ​

width 和 height 属性 ​

title 属性 ​

loading 属性（HTML5新增） ​

2.4.2 响应式图像 ​

使用 srcset 属性 ​

使用 <picture> 元素 ​

不同图像格式的支持 ​

2.4.3 图像语义化元素 ​

<figure> 和 <figcaption> 元素 ​

代码示例的语义化 ​

引用内容的语义化 ​

2.4.4 图像优化最佳实践 ​

2.4 图像和媒体元素

学习目标

本节概述

2.4.1 图像元素基础

`<img>` 元素的基本语法

必需属性

src 属性

alt 属性

可选属性

width 和 height 属性

title 属性

loading 属性（HTML5新增）

2.4.2 响应式图像

使用 srcset 属性

使用 `<picture>` 元素

不同图像格式的支持

2.4.3 图像语义化元素

`<figure>` 和 `<figcaption>` 元素

代码示例的语义化

引用内容的语义化

2.4.4 图像优化最佳实践