图像

图像概述

图像是网页中重要的视觉元素，能够增强内容的表达力和吸引力。

东巴文（db-w.cn） 认为：图像是网页的视觉语言，合理使用图像可以提升用户体验和SEO效果。

图像标签

<img>标签

<img>标签用于在网页中嵌入图像。

<img src="image.jpg" alt="图像描述">

东巴文说明：

• <img>是自闭合标签，无结束标签
• src属性：指定图像路径（必需）
• alt属性：提供替代文本（必需）
• 默认为行内元素

图像属性

东巴文图像属性：

图像路径

相对路径

相对路径相对于当前HTML文件的位置。

<!-- 同级目录 -->
<img src="image.jpg" alt="图像">

<!-- 下级目录 -->
<img src="images/photo.jpg" alt="照片">

<!-- 上级目录 -->
<img src="../images/logo.png" alt="Logo">

<!-- 根目录 -->
<img src="/assets/images/banner.jpg" alt="横幅">

东巴文相对路径：

绝对路径

绝对路径包含完整的URL地址。

<!-- 完整URL -->
<img src="https://db-w.cn/images/logo.png" alt="东巴文Logo">

<!-- 协议相对URL -->
<img src="//db-w.cn/images/logo.png" alt="东巴文Logo">

<!-- 本地绝对路径 -->
<img src="file:///C:/images/photo.jpg" alt="照片">

东巴文说明：

• 同一网站推荐使用相对路径
• 跨域图像使用绝对路径
• 协议相对URL自动匹配当前协议

替代文本

alt属性的重要性

alt属性提供图像的替代文本，在图像无法显示时展示。

<!-- ✅ 推荐：描述性alt文本 -->
<img src="html-tutorial.jpg" alt="HTML教程封面">

<!-- ❌ 不推荐：无意义的alt文本 -->
<img src="html-tutorial.jpg" alt="图片">

<!-- ❌ 不推荐：空alt文本 -->
<img src="html-tutorial.jpg" alt="">

东巴文alt属性作用：

1. 可访问性：屏幕阅读器朗读alt文本
2. SEO：搜索引擎理解图像内容
3. 用户体验：图像加载失败时显示替代文本
4. 语义化：提供图像的语义信息

alt文本编写规则

东巴文alt文本法则：

<!-- 描述性文本 -->
<img src="chart.png" alt="2024年东巴文用户增长趋势图">

<!-- 简洁明了 -->
<img src="logo.png" alt="东巴文Logo">

<!-- 包含关键信息 -->
<img src="screenshot.png" alt="HTML编辑器界面截图，显示代码高亮功能">

<!-- 装饰性图像使用空alt -->
<img src="decorative-line.png" alt="">

<!-- 复杂图像使用longdesc或描述段落 -->
<img src="complex-chart.png" alt="销售数据分析图表" longdesc="chart-description.html">
<p id="chart-description">图表详细描述：...</p>

图像尺寸

width和height属性

<!-- 指定宽度和高度（像素） -->
<img src="photo.jpg" alt="照片" width="300" height="200">

<!-- 只指定宽度，高度自动调整 -->
<img src="photo.jpg" alt="照片" width="300">

<!-- 使用CSS指定尺寸 -->
<img src="photo.jpg" alt="照片" style="width: 300px; height: 200px;">

东巴文说明：

• 推荐同时指定宽度和高度
• 防止页面布局抖动（CLS）
• 使用CSS可以更灵活地控制尺寸

响应式图像

使用CSS使图像自适应容器宽度。

<style>
    .responsive-img {
        max-width: 100%;
        height: auto;
    }
</style>

<img src="photo.jpg" alt="照片" class="responsive-img">

东巴文说明：

• max-width: 100%：图像不超过容器宽度
• height: auto：高度自动调整，保持比例
• 适用于响应式设计

图像格式

常用图像格式

东巴文图像格式对比：

格式选择建议

东巴文格式选择法则：

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

<!-- Logo、图标：使用PNG或SVG -->
<img src="logo.png" alt="东巴文Logo">
<img src="icon.svg" alt="菜单图标">

<!-- 动画：使用GIF或WebP -->
<img src="animation.gif" alt="加载动画">
<img src="animation.webp" alt="加载动画">

<!-- 矢量图形：使用SVG -->
<img src="diagram.svg" alt="流程图">

图像优化

优化策略

东巴文图像优化策略：

1. 压缩图像：减小文件大小
2. 选择合适格式：根据内容选择格式
3. 使用现代格式：WebP、AVIF
4. 懒加载：延迟加载屏幕外图像
5. 响应式图像：根据设备加载不同尺寸

懒加载

使用loading="lazy"实现懒加载。

<!-- 懒加载 -->
<img src="photo.jpg" alt="照片" loading="lazy">

<!-- 立即加载 -->
<img src="logo.png" alt="Logo" loading="eager">

东巴文说明：

• lazy：延迟加载，直到图像进入视口
• eager：立即加载（默认）
• 提升页面加载性能

响应式图像

使用srcset和sizes属性提供不同尺寸的图像。

<!-- srcset属性 -->
<img 
    src="photo-800.jpg"
    srcset="photo-400.jpg 400w,
            photo-800.jpg 800w,
            photo-1200.jpg 1200w"
    sizes="(max-width: 600px) 400px,
           (max-width: 1000px) 800px,
           1200px"
    alt="响应式照片">

东巴文说明：

• srcset：提供不同尺寸的图像源
• sizes：定义不同视口宽度下的图像尺寸
• 浏览器自动选择最合适的图像

<picture>元素

<picture>元素提供更灵活的图像选择。

<picture>
    <!-- 现代格式优先 -->
    <source srcset="photo.avif" type="image/avif">
    <source srcset="photo.webp" type="image/webp">
    
    <!-- 响应式图像 -->
    <source 
        media="(max-width: 600px)"
        srcset="photo-small.jpg">
    <source 
        media="(max-width: 1200px)"
        srcset="photo-medium.jpg">
    
    <!-- 默认图像 -->
    <img src="photo.jpg" alt="照片">
</picture>

东巴文说明：

• <source>：提供不同的图像源
• type：指定图像MIME类型
• media：指定媒体查询条件
• <img>：默认图像，必须放在最后

图像对齐

使用CSS对齐

<style>
    /* 水平居中 */
    .center {
        display: block;
        margin: 0 auto;
    }
    
    /* 左对齐 */
    .left {
        float: left;
        margin-right: 10px;
    }
    
    /* 右对齐 */
    .right {
        float: right;
        margin-left: 10px;
    }
    
    /* 垂直居中 */
    .vertical-middle {
        vertical-align: middle;
    }
</style>

<!-- 水平居中 -->
<img src="logo.png" alt="Logo" class="center">

<!-- 文字环绕 -->
<img src="photo.jpg" alt="照片" class="left">
<p>这是一段文字，图像在左侧，文字会环绕图像...</p>

图像映射

<map>和<area>

图像映射用于创建可点击的图像区域。

<img 
    src="map.jpg" 
    alt="地图" 
    usemap="#workmap">

<map name="workmap">
    <!-- 矩形区域 -->
    <area 
        shape="rect" 
        coords="34,44,270,350" 
        alt="区域1" 
        href="area1.html">
    
    <!-- 圆形区域 -->
    <area 
        shape="circle" 
        coords="337,300,44" 
        alt="区域2" 
        href="area2.html">
    
    <!-- 多边形区域 -->
    <area 
        shape="poly" 
        coords="140,121,180,120,180,180,140,180" 
        alt="区域3" 
        href="area3.html">
</map>

东巴文说明：

• usemap：关联<map>元素
• shape：区域形状（rect、circle、poly）
• coords：区域坐标
• href：链接地址

图像最佳实践

东巴文图像法则

法则1：始终提供alt属性

<!-- ✅ 推荐：描述性alt文本 -->
<img src="photo.jpg" alt="东巴文课程封面">

<!-- ✅ 推荐：装饰性图像使用空alt -->
<img src="decorative.png" alt="">

<!-- ❌ 不推荐：省略alt属性 -->
<img src="photo.jpg">

法则2：优化图像文件大小

<!-- ✅ 推荐：使用现代格式 -->
<picture>
    <source srcset="photo.webp" type="image/webp">
    <img src="photo.jpg" alt="照片">
</picture>

<!-- ✅ 推荐：懒加载 -->
<img src="photo.jpg" alt="照片" loading="lazy">

法则3：指定图像尺寸

<!-- ✅ 推荐：指定宽度和高度 -->
<img src="photo.jpg" alt="照片" width="300" height="200">

<!-- ✅ 推荐：使用CSS控制尺寸 -->
<img src="photo.jpg" alt="照片" style="width: 100%; height: auto;">

法则4：使用响应式图像

<!-- ✅ 推荐：响应式图像 -->
<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="响应式照片">

法则5：考虑可访问性

<!-- ✅ 推荐：有意义的alt文本 -->
<img src="chart.png" alt="2024年东巴文用户增长趋势图，用户数从1万增长到10万">

<!-- ✅ 推荐：复杂图像提供详细描述 -->
<figure>
    <img src="complex-chart.png" alt="销售数据分析图表">
    <figcaption>
        图表说明：该图表展示了2024年第一季度的销售数据...
    </figcaption>
</figure>

学习检验

知识点测试

问题1：以下哪个属性用于提供图像的替代文本？

A. src B. alt C. title D. href

答案：B

东巴文解释：alt属性用于提供图像的替代文本，在图像无法显示时展示，同时提升可访问性和SEO。src指定图像路径，title提供提示文本，href是链接属性。

问题2：以下哪个属性用于实现图像懒加载？

A. loading B. srcset C. sizes D. decoding

答案：A

东巴文解释：loading="lazy"用于实现图像懒加载，延迟加载屏幕外的图像。srcset和sizes用于响应式图像，decoding用于指定解码方式。

实践任务

任务：创建一个包含以下图像特性的文档：

1. 基本图像（带alt属性）
2. 响应式图像（使用srcset）
3. 懒加载图像
4. 使用picture元素的图像

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>图像示例 - 东巴文</title>
    <style>
        .responsive-img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <article>
        <h1>图像示例</h1>
        
        <h2>基本图像</h2>
        <img src="logo.png" alt="东巴文Logo" width="200" height="100">
        
        <h2>响应式图像</h2>
        <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="响应式照片"
            class="responsive-img">
        
        <h2>懒加载图像</h2>
        <img src="gallery/photo1.jpg" alt="照片1" loading="lazy">
        <img src="gallery/photo2.jpg" alt="照片2" loading="lazy">
        <img src="gallery/photo3.jpg" alt="照片3" loading="lazy">
        
        <h2>Picture元素</h2>
        <picture>
            <source srcset="photo.avif" type="image/avif">
            <source srcset="photo.webp" type="image/webp">
            <img src="photo.jpg" alt="照片" class="responsive-img">
        </picture>
    </article>
    
    <footer>
        <small>版权所有 &copy; 2024 东巴文（db-w.cn）</small>
    </footer>
</body>
</html>

东巴文（db-w.cn） - 让编程学习更有趣、更高效！