说明
网道HTML 教程学习笔记
1、<img>
<img>标签用于插入图片。它是单独使用的，没有闭合标签。
<a href="example.html"> <img src="foo.jpg"> </a>
1.1 src 属性
指定图片的网址
1.2 alt 属性
用来设定图片的文字说明。图片不显示时（比如下载失败，或用户关闭图片加载），图片的位置上会显示该文本。
1.3 width 属性，height 属性
图片默认以原始大小插入网页，width属性和height属性可以指定图片显示时的宽度和高度，单位是像素或百分比。
1.4 srcset，sizes
见下文的《响应式图像》部分
1.5 referrerpolicy
<img>导致的图片加载的 HTTP 请求，默认会带有 Referer 的头信息。referrerpolicy 属性对这个行为进行设置。
1.6 crossorigin
图片和网页属于不同的网站，网页加载图片就会导致跨域请求，对方服务器可能要求跨域认证。crossorigin 属性用来告诉浏览器，是否采用跨域的形式下载图片，默认是不采用。
简单说，只要打开了这个属性，HTTP 请求的头信息里面，就会加入 origin 字段，给出请求发出的域名，不打开这个属性就不加。
一旦打开该属性，它可以设为两个值。
anonymous：跨域请求不带有用户凭证（通常是 Cookie）。
use-credentials：跨域请求带有用户凭证。
<!--等同--> <img src="foo.jpg" crossorigin="anonymous"> <img src="foo.jpg" crossorigin>
1.7 loading
浏览器的默认行为是，只要解析到 <img> 标签，就开始加载图片。
loading 属性改变了这个行为，可以指定图片的懒加载，即图片默认不加载，只有即将滚动进入视口，变成用户可见时才会加载，这样就节省了带宽。
loading 属性可以取以下三个值。
auto：浏览器默认行为，等同于不使用 loading 属性。
lazy：启用懒加载。
eager：立即加载资源，无论它在页面上的哪个位置。
由于行内图片的懒加载，可能会导致页面布局重排，所以使用这个属性的时候，最好指定图片的高和宽。
<img src="image.png" loading="lazy" width="200" height="200" alt="image.png">
2、<figure>，<figcaption>
<figure>标签: 可以理解为一个图像区块，将图像和相关信息封装在一起。<figcaption>： 是它的可选子元素，表示图像的文本描述，通常用于放置标题，可以出现多个。
<figure> <img src="https://example.com/foo.jpg"> <figcaption>示例图片</figcaption> </figure>
3、响应式图像
网页在不同尺寸的设备上，都能产生良好的显示效果，叫做“响应式设计”（responsive web design）。响应式设计的网页图像，就是“响应式图像”（responsive image）。
3.1 问题的由来
<img> 标签用于插入网页图像，所有情况默认插入的都是同一张图像。
三大弊端：
体积：桌面端显示的是大尺寸的图像，手机的屏幕较小，只需要小尺寸的图像，可以节省带宽，加速网页渲染。
像素密度：桌面显示器一般是单倍像素密度，而手机的显示屏往往是多倍像素密度，即显示时多个像素合成为一个像素，这种屏幕称为 Retina 屏幕。图像文件很可能在桌面端很清晰，放到手机上会有点模糊，因为图像没有那么高的像素密度，浏览器自动把图像的每个像素复制到周围像素，满足像素密度的要求，导致图像的锐利度有所下降。
视觉风格：桌面显示器的面积较大，图像可以容纳更多细节。手机的屏幕较小，许多细节是看不清的，需要突出重点。
3.2 srcset 属性
为了解决上面这些问题，HTML 语言提供了一套完整的解决方案。首先，<img> 标签引入了 srcset 属性。
srcset 属性用来指定多张图像，适应不同像素密度的屏幕。它的值是一个逗号分隔的字符串，每个部分都是一张图像的 URL，后面接一个空格，然后是像素密度的描述符。
例子:
<img srcset="foo-320w.jpg, foo-480w.jpg 1.5x, foo-640w.jpg 2x" src="foo-640w.jpg">
图像 URL 后面的像素密度描述符，格式是像素密度倍数 + 字母 x。1x 表示单倍像素密度，可以省略。浏览器根据当前设备的像素密度，选择需要加载的图像。
如果 srcset 属性都不满足条件，那么就加载 src 属性指定的默认图像。
3.3 sizes 属性
像素密度的适配，只适合显示区域一样大小的图像。
如果希望不同尺寸的屏幕，显示不同大小的图像，srcset属性就不够用了，必须搭配sizes属性。
第一步，srcset 属性列出所有可用的图像。
<img srcset="foo-160.jpg 160w, foo-320.jpg 320w, foo-640.jpg 640w, foo-1280.jpg 1280w" src="foo-1280.jpg">
宽度描述符就是图像原始的宽度，加上字符 w。
第二步，sizes 属性列出不同设备的图像显示宽度。
<img srcset="foo-160.jpg 160w, foo-320.jpg 320w, foo-640.jpg 640w, foo-1280.jpg 1280w" sizes="(max-width: 440px) 100vw, (max-width: 900px) 33vw, 254px" src="foo-1280.jpg">
上面代码中，sizes 属性给出了三种屏幕条件，以及对应的图像显示宽度。
宽度不超过440像素的设备，图像显示宽度为100%；宽度441像素到900像素的设备，图像显示宽度为33%；宽度900像素以上的设备，图像显示宽度为254px。
第三步，浏览器根据当前设备的宽度，从 sizes 属性获得图像的显示宽度，然后从 srcset 属性找出最接近该宽度的图像，进行加载。
假定当前设备的屏幕宽度是 480px，浏览器从 sizes 属性查询得到，图片的显示宽度是 33vw（即33%），等于 160px。srcset 属性里面，正好有宽度等于 160px 的图片，于是加载 foo-160.jpg。
注意：
如果省略sizes属性，那么浏览器将根据实际的图像显示宽度，从 srcset 属性选择最接近的图片。一旦使用 sizes 属性，就必须与 srcset 属性搭配使用，单独使用 sizes 属性是无效的。
4、<picture>
4.1 响应式用法
<picture> 是一个容器标签，内部使用 <source> 和 <img>，指定不同情况下加载的图像。用于同时适配不同像素密度、不同大小的屏幕。
<picture> <source media="(max-width: 500px)" srcset="cat-vertical.jpg"> <source media="(min-width: 501px)" srcset="cat-horizontal.jpg"> <img src="cat.jpg" alt="cat"> </picture>
media 属性：给出媒体查询表达式srcset 属性：给出加载的图像文件
同时考虑屏幕尺寸和像素密度的适配的例子：
<picture> <source srcset="homepage-person@desktop.png, homepage-person@desktop-2x.png 2x" media="(min-width: 990px)"> <source srcset="homepage-person@tablet.png, homepage-person@tablet-2x.png 2x" media="(min-width: 750px)"> <img srcset="homepage-person@mobile.png, homepage-person@mobile-2x.png 2x" alt="Shopify Merchant, Corrine Anestopoulos"> </picture>
4.2 图像格式的选择
<picture> 标签还可以用来选择不同格式的图像。
<picture> <source type="image/svg+xml" srcset="logo.xml"> <source type="image/webp" srcset="logo.webp"> <img src="logo.png" alt="ACME Corp"> </picture>
浏览器按照 <source> 标签出现的顺序，依次检查是否支持 type 属性指定的图像格式，如果支持就加载图像，并且不再检查后面的 <source> 标签了。
图像加载优先顺序依次为 svg 格式、webp 格式和 png 格式。
5、参考链接
【Responsive Images 101】–jason-grigsby
【Native lazy-loading for the web】–Houssein Djirdeh
