上一篇
html图片源
HTML图片源通过`
标签的src 属性指定，支持相对/绝对路径，可添加alt 属性提升语义，响应式布局时配合srcset 和sizes`实现多图适配
HTML图片基础语法
在HTML中插入图片使用<img>标签，核心属性为src（指定图片路径）和alt（替代文本）,基本语法如下：
<img src="图片路径" alt="描述性文本">
图片路径类型
| 路径类型 | 示例 | 说明 |
|---|---|---|
| 相对路径 | images/photo.jpg | 基于当前HTML文件所在位置的路径，推荐用于本地图片。 |
| 绝对路径 | /assets/img/logo.png | 从网站根目录开始的路径，不依赖文件位置，但移植性差。 |
| URL路径 | https://example.com/img.jpg | 网络图片直接引用，需确保链接长期有效。 |
alt属性的作用
- 可访问性：为视障用户提供图片内容描述,配合读屏软件使用。
- SEO优化：帮助搜索引擎理解图片主题,提升网页排名。
- 错误处理：当图片加载失败时，
alt文本会显示代替。
控制图片尺寸
- HTML属性：通过
width和height设置固定尺寸（不推荐，可能失真）。<img src="image.jpg" width="300" height="200" alt="示例图">
- CSS控制：更灵活且保持比例。
img.responsive { max-width: 100%; / 自适应容器宽度 / height: auto; / 保持纵横比 / }
响应式图片方案
| 方案 | 适用场景 | 示例代码 |
|---|---|---|
srcset+sizes | 适配不同设备分辨率/像素密度 | <img src="small.jpg" srcset="medium.jpg 600w, large.jpg 1200w" sizes="(max-width: 600px) 400px, 800px" alt=""> |
picture元素 | 根据媒体条件切换不同图片（如WebP格式） | <picture> <source srcset="image.webp" type="image/webp"> <img src="image.jpg" alt=""> </picture> |
图片格式与优化
| 格式 | 特点 | 适用场景 |
|---|---|---|
| JPEG | 有损压缩，支持透明度（CMYK模式） | 照片、复杂渐变 |
| PNG | 无损压缩，支持透明背景 | 图标、文字图 |
| GIF | 支持动画，颜色数少（256色） | 简单动画、低色图表 |
| SVG | 矢量图形，无限缩放 | Logo、数据可视化 |
优化建议：
- 使用
image-optim等工具压缩图片 - 启用浏览器懒加载：
<img loading="lazy"> - 按需选择格式（如WebP替代JPEG/PNG）
常见问题与解答
Q1：为什么必须添加alt属性？
A1：alt是HTML语义化的重要部分，缺失会导致：
- 屏幕阅读器无法解读图片内容
- 搜索引擎难以索引图片主题
- 图片加载失败时显示空白
Q2：如何实现图片自动适应手机屏幕？
A2：通过CSS设置最大宽度为100%：
img {
max-width: 100%;
height: auto;
}或使用响应式单位（如vw）：
img {
width: 80vw; / 占视口宽度80% /
}
