HTML 图像嵌入元素 img
<img> 元素将一张图像嵌入文档。
img 图像嵌入元素
<img> HTML 元素将一张图像嵌入文档。
我们应该如何告诉浏览器来显示一张图片呢？使用 img 元素。
HTML
<img>元素将一份图像嵌入文档。- img 是 image 单词的所以，是图像、图像的意思；
- 事实上 img 是一个可替换元素（replaced element）；
img 有两个常见的属性：
src 属性：source 单词的缩写，表示源
- 是必须的，它包含了你想嵌入的图片的文件路径。
alt 属性：不是强制性的，有两个作用
- 作用一：当图片加载不成功（错误的地址或者图片资源不存在），那么会显示这段文本；
- 作用二：屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义；
note
<img> 某些其他属性目前已经不再使用，比如 width、height、border。
图片的路径
设置 img 的 src 时，需要给图片设置路径：
网络图片：一个 URL 地址（后续会专门讲 URL）；
- 网络图片的设置非常简单，给一个地址即可；
本地图片：本地电脑上的图片，后续会和 html 一起部署到服务；
本地图片的路径有两种方式：
方式一：绝对路径（几乎不用）；
<img src="E:\git\Ryanjiena\obsidian-note\fe2022\day01\hello.png" alt="Hello">- 从电脑的根目录开始一直找到资源的路径；
方式二：相对路径（常用）；
<img src="./hello.png" alt="Hello">- 相当于当前文件的一个路径；
.代表当前文件夹（1 个.），可以省略..代表上级文件夹（2 个.）
对于网页来说，不管什么操作系统（Windows、Mac、Linux)，路径分隔符都是
/，而不是\
支持的图片格式
HTML 标准并没有给出需要支持的图像格式的列表，因此每个用户代理支持一组不同的格式。
note
网页浏览器图像格式指南提供了有关图像格式及 Web 浏览器支持的综合信息。
| 缩写 | 文件格式 | MIME 类型 | 文件拓展名 | 浏览器兼容性 |
|---|---|---|---|---|
| APNG | Animated Portable Network Graphics 动态便携式网络图像 | image/apng | .apng | Chrome, Edge, Firefox, Opera, Safari |
| AVIF | AV1 Image File Format AV1 图像文件格式 | image/avif | .avif | Chrome, Opera, Firefox (feature flag) |
| BMP | Bitmap file 位图文件 | image/bmp | .bmp | Chrome, Edge, Firefox, Internet Explorer, Opera, Safari |
| GIF | Graphics Interchange Format 图像互换格式 | image/gif | .gif | Chrome, Edge, Firefox, Internet Explorer, Opera, Safari |
| ICO | Microsoft Icon 微软图标 | image/x-icon | .ico, .cur | Chrome, Edge, Firefox, Internet Explorer, Opera, Safari |
| JPEG | Joint Photographic Expert Group image 联合影像专家小组图像 | image/jpeg | .jpg, .jpeg, .jfif, .pjpeg, .pjp | Chrome, Edge, Firefox, Internet Explorer, Opera, Safari |
| PNG | Portable Network Graphics 便携式网络图像 | image/png | .png | Chrome, Edge, Firefox, Internet Explorer, Opera, Safari |
| SVG | Scalable Vector Graphics 可缩放矢量图形 | image/svg+xml | .svg | Chrome, Edge, Firefox, Internet Explorer, Opera, Safari |
| TIFF | Tagged Image File Format 标签图像文件格式 | image/tiff | .tif, .tiff | Safari |
| WebP | Web Picture format 万维网图像格式 | image/webp | .webp | Chrome, Edge, Firefox, Opera, Safari |
Web 最常用的图像格式是：
- APNG（动态可移植网络图形）——无损动画序列的不错选择（GIF 性能较差）。
- AVIF（AV1 图像文件格式）——静态图像或动画的不错选择，其性能较好。
- GIF（图像互换格式）——简单图像和动画的不错选择。
- JPEG（联合图像专家组）——有损压缩静态图像的不错选择（目前最流行的格式）。
- PNG（便携式网络图形）——对于无损压缩静态图像而言是不错的选择（质量略好于 JPEG）。
- SVG（可缩放矢量图形）——矢量图像格式。用于必须以不同尺寸准确描绘的图像。
- WebP（网络图片格式）——图像和动画的绝佳选择。
推荐使用诸如 WebP 和 AVIF 等图像格式，因为它们在静态图像和动画的性能均比 PNG、JPEG、JIF 好得多。WebP 得到了广泛的支持，而 AVIF 则缺乏 Safari 的支持。
对于必须以不同尺寸准确绘制的图像，则仍然推荐使用 SVG 格式。