源本科技 | 码上会

logo
源本科技 码上会
一站式数字化转型技能学习平台

HTML 图片

2025/12/29
27
0

学习目标

  • 掌握 <img> 标签的核心属性（src, alt, width, height 等）

  • 理解绝对路径 vs 相对路径的使用场景

  • 学会创建响应式图像（srcset + sizes）

  • 实现可访问性友好的图像（alt 文本规范）

  • 避免已废弃属性（如 border, align），改用 CSS

  • 了解主流图像格式及其适用场景

基础语法

<img> 标签

<img src="image.jpg" alt="描述性文本">

关键特性：

  • 自闭合标签：无需 </img>

  • 行内元素：默认与其他文本同行显示

  • 必须属性：src（来源）和 alt（替代文本）

注意：虽然浏览器在缺失 alt 时仍会渲染图像，但不符合无障碍标准，且 SEO 受损。

核心属性

属性

作用

示例

src

指定图像文件路径（URL 或本地路径）

src="logo.png"

alt

无障碍必备：图像无法加载时的替代文本，屏幕阅读器朗读内容

alt="官方 Logo"

width / height

设置显示尺寸（单位：像素），防止布局偏移（CLS）

width="200" height="150"

loading

控制加载行为（eager 立即加载 / lazy 懒加载）

loading="lazy"

title

鼠标悬停时显示提示（非必需，勿替代 alt）

title="点击了解更多"

重要提示：

  • width/height 应始终设置：帮助浏览器预留空间，避免页面“跳动”

  • alt 不是“标题”：应描述图像内容或功能，而非文件名

路径类型

类型

说明

示例

绝对路径

完整 URL，指向外部资源

https://example.com/images/photo.jpg

相对路径

相对于当前 HTML 文件的位置

images/photo.jpg（同目录下 images 文件夹）

相对路径常见写法：

<!-- 同级目录 -->
<img src="photo.jpg">

<!-- 子目录 -->
<img src="assets/images/photo.jpg">

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

最佳实践：站内资源优先用相对路径，便于项目迁移。

图像作为链接

将 <img> 包裹在 <a> 标签中，实现可点击图像：

<a href="https://www.geeksforgeeks.org/" target="_blank" rel="noopener noreferrer">
  <img src="gfg-logo.png" alt="访问 GeeksforGeeks 官网">
</a>

使用场景：

  • 网站 Logo 跳转首页

  • 产品图片链接到详情页

  • 广告横幅

安全提醒：外部链接务必添加 rel="noopener noreferrer"！

响应式图像

srcset 与 sizes

为不同设备提供最优图像资源，节省流量并提升加载速度：

基础用法

根据分辨率切换

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

参数说明

  • srcset：列出不同尺寸图像及对应宽度（400w = 400 像素宽）

  • sizes：定义在不同视口下图像应占的宽度

    • (max-width: 600px) 100vw → 小屏占满宽度

    • 50vw → 大屏占 50% 视口宽度

浏览器会自动选择最匹配的图像，无需 JavaScript！

图像格式选择

格式

特点

适用场景

JPEG (.jpg)

有损压缩，文件小

照片、复杂色彩图像

PNG (.png)

无损压缩，支持透明

Logo、图标、简单图形

SVG (.svg)

矢量格式，无限缩放不失真

图标、图表、UI 元素

GIF (.gif)

支持简单动画，颜色有限

表情包、简单动图

WebP

现代格式，比 JPEG/PNG 更小

推荐用于 Web（需兼容性处理）

AVIF

最新高效格式

未来趋势（目前支持度有限）

兼容性方案

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="兼容性回退">
</picture>

现代替代方案

旧属性

问题

CSS 替代方案

border

样式与结构混杂

img { border: 2px solid #ccc; }

align

布局控制不灵活

float: right; 或 text-align: center;

hspace/vspace

过时的间距控制

margin: 10px;

示例：居中对齐图像

<!-- 旧方式（勿用） -->
<img src="logo.png" align="center">

<!-- 现代方式 -->
<div style="text-align: center;">
  <img src="logo.png" alt="Logo">
</div>

无障碍实践

alt 文本编写规则

场景

alt 写法

信息性图像（如图表）

描述核心信息：“2023 年销售额增长 25%”

装饰性图像

alt=""（空值，屏幕阅读器跳过）

功能图像（如按钮）

说明功能：“搜索图标”、“关闭弹窗”

链接图像

描述目标：“访问 GeeksforGeeks 主页”

复杂图像补充描述

  • 使用 longdesc（已少用）或在附近添加隐藏文本：

    <img src="chart.png" alt="销售趋势图">
<div class="sr-only">Q1 销售额 100 万，Q2 120 万...</div>

性能优化技巧

  1. 压缩图像

    • 工具：TinyPNG, Squoosh, ImageOptim

    • 目标：在视觉质量与文件大小间平衡

  2. 懒加载（Lazy Loading）

    <img src="image.jpg" loading="lazy" alt="...">

    • 仅当图像进入视口时加载，加速首屏渲染

  3. 使用 CDN

    • 通过 src="https://cdn.example.com/image.jpg" 加速全球访问

  4. 避免大图缩放

    • 不要上传 4000px 宽的图再用 CSS 缩小到 200px

常见错误

错误

风险

修正

省略 alt

无障碍失败，SEO 降权

始终提供有意义的 alt

用图像代替文字

搜索引擎无法索引

重要文本用 HTML，非图片

忽略 width/height

页面布局跳动（CLS）

显式声明尺寸

滥用 GIF 动画

分散注意力，增加流量

仅在必要时使用动画

重点总结

要点

说明

<img> 是自闭合标签

无需结束标签

alt 是强制要求

用于无障碍和 SEO

路径分绝对 / 相对

站内用相对路径更灵活

响应式用 srcset

适配多设备，提升性能

禁用旧属性

用 CSS 控制样式与布局

格式按需选择

JPEG（照片）、PNG（透明）、SVG（矢量）

性能与无障碍并重

压缩 + 懒加载 + 语义化 alt

思考题

  1. 为什么在 <img> 中设置 width 和 height 能改善用户体验？它如何影响 Core Web Vitals 中的 CLS（累积布局偏移）？

  2. 如何用 CSS 实现“圆形头像”效果，同时保持图像比例不变？

  3. 在低带宽环境下，如何通过 HTML 和服务器配置提供“低质量图像占位符（LQIP）”以提升感知加载速度？