编程笔记 html5&css&js 029 HTML图像

图像（图片）是网页的必备元素。

一、<img>：图像元素

<img> HTML 元素将一张图像嵌入文档。

<img src="images/029-1.png" alt="" />

上面的例子展示了 <img> 元素的用法：
src 属性是必须的，它包含了你想嵌入的图片的路径。
alt 属性包含一条对图像的文本描述，这不是强制性的，但对无障碍而言，它难以置信地有用——屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义。如果由于某种原因无法加载图像，普通浏览器也会在页面上显示 alt 属性中的备用文本：例如，网络错误、内容被屏蔽或链接过期。
还有很多其他属性，可以实现各种不同的目的：
Referrer/CORS 控制，保证安全与隐私：详见 crossorigin 和 referrerpolicy 属性。
使用 width 和 height 设置图像的固有尺寸（intrinsic size）：这将设置图像应占用的空间，以确保图像被加载之前页面的布局是稳定的。使用 sizes 和 srcset 设置响应式图像。

二、支持的图像格式

HTML 标准并没有给出需要支持的图像格式的列表，因此每个用户代理支持一组不同的格式。
备注： 网页浏览器图像格式指南提供了有关图像格式及 Web 浏览器支持的综合信息。本节只是一个总结！
Web 最常用的图像格式是：
APNG（动态可移植网络图形）——无损动画序列的不错选择（GIF 性能较差）。
AVIF（AV1 图像文件格式）——静态图像或动画的不错选择，其性能较好。
GIF（图像互换格式）——简单图像和动画的不错选择。
JPEG（联合图像专家组）——有损压缩静态图像的不错选择（目前最流行的格式）。
PNG（便携式网络图形）——对于无损压缩静态图像而言是不错的选择（质量略好于 JPEG）。
SVG（可缩放矢量图形）——矢量图像格式。用于必须以不同尺寸准确描绘的图像。
WebP（网络图片格式）——图像和动画的绝佳选择。
推荐使用诸如 WebP 和 AVIF 等图像格式，因为它们在静态图像和动画的性能均比 PNG、JPEG、JIF 好得多。WebP 得到了广泛的支持，而 AVIF 则缺乏 Safari 的支持。
对于必须以不同尺寸准确绘制的图像，则仍然推荐使用 SVG 格式。

三、属性

此元素支持全局属性 (en-US)。
alt
定义了图像的备用文本描述。
非可视化浏览器（Non-visual browsers）（比如有视力障碍的人使用的音频浏览器）
用户选择不显示图像（比如为了节省带宽，或出于隐私考虑）
图像文件无效，或是使用了不支持的格式
在这些情况下，浏览器很可能会将图像替换为图像所属 元素的 alt 属性所提供的文本。基于上面罗列的原因，建议尽可能地通过 alt 属性提供一些有用的信息。
如果把这个属性设置为空字符串（alt=“”），则表明该图像不是内容的关键部分（这是一种装饰或者一个追踪像素点），非可视化浏览器在渲染 (en-US)的时候可能会忽略它。而且，如果图片加载失败，可视化浏览器会隐藏表示图片损坏的图标。
将图像复制并粘贴为文本，或是将图像的链接保存为浏览器书签时，也会用到此属性。

crossorigin
这个枚举属性表明是否必须使用 CORS 完成相关图像的抓取。启用 CORS 的图像可以在 元素中重复使用，而不会被标记为“污染（tainted）”。
如果未指定 crossorigin 属性，则会发送不启用 CORS 的请求（不会携带 Origin 请求标头），且浏览器会将图像标记为“被污染”并拒绝对图像数据的访问，阻止其在 <canvas> 元素中的使用。
如果指定了 crossorigin 属性，则会发送启用 CORS 的请求（会携带 Origin 请求标头）；但是如果服务器不选择允许源站点对图像数据进行跨源访问（不发送任何 Access-Control-Allow-Origin 响应标头，或发送的 Access-Control-Allow-Origin 标头中不包含源站点），浏览器则会阻止图像的加载，并在开发者工具的控制台中记录 CORS 错误。
允许的值有：
anonymous
发送忽略凭据的跨源请求（即，不携带 cookie、X.509 证书 或 Authorization 请求标头）。
use-credentials
发送携带凭据的跨源请求（比如 cookie、X.509 证书和 Authorization 请求标头）。如果服务器不选择与源站共享凭据（通过返回 Access-Control-Allow-Credentials: true 响应标头） ，则浏览器会将图像标记为被污染且限制对其图像数据的访问。
如果属性是无效值，浏览器默认将其当做 anonymous 关键字。更多信息，请查看 CORS 属性设置。
decoding
为浏览器提供图像解码方式上的提示。允许的值：
sync
同步解码图像，实现与其他内容互斥的原子渲染。
async
异步解码图像，以减少其他内容的渲染延迟。
auto
默认值：不指定解码方式，由浏览器决定哪一种对用户来说是最合适的。
fetchpriority 实验性
提供获取图像时要使用的相对的优先级提示。允许的值：
high
表示其获取优先级相对其他图像要高。
low
表示其获取优先级相对其他图像要低。
auto
默认值：表示自动确定其相对其他图像的获取优先级。
height
图像的固有高度，以像素为单位。必须是没有单位的整数值。
备注： 同时包括 height 和 width 使浏览器在加载图像之前计算图像的长宽比。此长宽比用于保留显示图像所需的空间，减少甚至防止在下载图像并将其绘制到屏幕上时布局的偏移。减少布局偏移是良好用户体验和 Web 性能的主要组成部分。
ismap
这个布尔属性表示图像是否是服务器端图像映射的一部分。如果是，那么点击图片的精准坐标将会被发送到服务器。
备注： 只有在 <img> 元素是一个拥有有效 href 属性的 <a> 元素的后代元素的情况下，这个属性才会被允许使用。
loading
指示浏览器应当如何加载该图像。允许的值：
eager 立即加载图像，不管它是否在可视视口（visible viewport）之外（默认值）。 lazy
延迟加载图像，直到它和视口接近到一个计算得到的距离（由浏览器定义）。目的是在需要图像之前，避免加载图像所需要的网络和存储带宽。这通常会提高大多数典型用场景中内容的性能。
备注： 仅在启用 JavaScript 时才会延迟加载。这是一种反跟踪的措施，因为，如果用户代理在禁用脚本的情况下支持延迟加载，网站可以在会话中策略性地放置图像，通过服务器跟踪请求了多少图像以及请求在何时发起，来跟踪用户在整个会话期间的大致滚动位置。
referrerpolicy
一个字符串，指示在获取资源时使用的来源地址（referrer）：
no-referrer：不会发送 Referer 标头。
no-referrer-when-downgrade：若未使用 TLS（HTTPS）导航到源站，则不发送 Referer 标头。
origin：发送到源站的来源地址将被限制为：协议、主机和端口。
origin-when-cross-origin：发送到其他来源的来源地址会被限制为协议、主机和端口。同源导航仍将包含路径。
same-origin：仅同源请求发送来源地址，而跨源请求则不包含来源地址信息。
strict-origin：仅在协议安全级别保持不变（HTTPS→HTTPS）的情况下将文档的来源作为来源地址发送。而在目标的安全性降低（HTTPS→HTTP）时则不发送来源地址。
strict-origin-when-cross-origin（默认值）：执行同源请求时发送完整的 URL，且仅在协议安全级别保持不变（HTTPS→HTTPS）时发送来源（origin），在目标安全性降低（HTTPS→HTTP）时则不发送来源。
unsafe-url：来源地址包括来源（origin）和路径（path）（但不包括片段、密码或用户名）。这个值是不安全的，因为它将来源和路径从受 TLS 保护的资源泄露到不安全的来源。
sizes
表示资源大小的、以逗号隔开的一个或多个字符串。每一个资源大小包括：
一个媒体条件。最后一项一定是被忽略的。
一个资源大小的值。
媒体条件描述视口的属性，而不是图像的属性。例如，如果视口不高于 500px，则建议使用 1000px 宽的资源：(max-height: 500px) 1000px。
资源尺寸的值被用来指定图像的预期尺寸。当 srcset 中的资源使用了宽度描述符 w 时，用户代理会使用当前图像大小来选择 srcset 中合适的一个图像 URL。被选中的尺寸影响图像的显示大小 (en-US)（如果没有影响大小的 CSS 样式被应用的话）。如果没有设置 srcset 属性，或者没有属性值，那么 sizes 属性也将不起作用。
src
图像的 URL，这个属性对 元素来说是必需的。在支持 srcset 的浏览器中，src 被当做拥有一个像素密度的描述符 1x 的候选图像处理，除非一个图像拥有这个像素密度描述符已经被在 srcset 或者 srcset 包含 w 描述符中定义了。
srcset
以逗号分隔的一个或多个字符串列表表明一系列用户代理使用的可能的图像。每一个字符串由以下组成：
指向图像的 URL。
可选地，再加一个空格之后，附加以下的其一：
一个宽度描述符（一个正整数，后面紧跟 w 符号）。该整数宽度除以 sizes 属性给出的资源（source）大小来计算得到有效的像素密度，即换算成和 x 描述符等价的值。
一个像素密度描述符（一个正浮点数，后面紧跟 x 符号）。
如果没有指定源描述符，那它会被指定为默认的 1x。
在相同的 srcset 属性中混合使用宽度描述符和像素密度描述符时，会导致该值无效。重复的描述符（比如，两个源在相同的 srcset 两个源都是 2x）也是无效的。
用户代理自行决定选择任何可用的来源。这位它们提供了一个很大的选择余地，可以根据用户偏好或带宽条件等因素来进行选择。有关示例，可以参阅响应式图像教程。
width
图像的宽度，以像素为单位。必须是没有单位的整数。
usemap
与元素相关联的图像映射（image map） (en-US)的部分 URL（以 # 开始的部分）。
备注： 如果 <img> 元素是 <a> 或 <button> 元素的后代元素则不能使用这个属性。

四、练习

练习时可尝试使用不同属性。

<!DOCTYPE html>
<html lang="zh-cn">
    <title>编程笔记 html5&css&js HTML图片</title>
    <meta charset="utf-8" />
    <style>
        body {
            color: cyan;
            background-color: teal;
        }
        .container {
            width: 500px; /* 设置容器的宽度 */
            margin: 0 auto; /* 将左右边距设置为自动 */
            line-height: 2;
        }
    </style>
    <body>
        <div class="container">
            <img src="images/029-1.png" alt="" />
        </div>
    </body>
</html>

小结

在网页的综合设计中，是以需求为导向，不是以标准为导向的。