图像标签

`<img>` —— 图像标签

标签特点

行内元素
- 图片的底边与文字的底边会在同一条水平线上
无闭合标签，单独使用
通过设置 src 属性显示一张图片

属性

1、alt

设定图片的文字说明

当图片不显示时（下载失败等情况），图片位置会显示此文本。

2、width & height

图片默认以原始大小插入网页，width属性和height属性可以指定图片显示时的宽度和高度，单位是像素或百分比

width属性和height属性只设置了一个，另一个没有设置时，，浏览器会根据图片的原始大小，自动设置对应比例的图片宽度或高度

3、referrerpolicy

<img> 导致的图片加载的 HTTP 请求，默认会带有 Referer 的头信息。referrerpolicy 属性可以对这个行为进行设置

4、crossorigin

crossorigin属性用来告诉浏览器，是否采用跨域的形式下载图片。只要打开了这个属性，HTTP 请求的头信息里面，就会加入origin字段，给出请求发出的域名

anonymous：跨域请求不带有用户凭证（通常是 Cookie）
use-credentials：跨域请求带有用户凭证

5、loading

浏览器的默认行为是，只要解析到<img>标签，就开始加载图片。对于很长的网页，这样做很浪费带宽，因为用户不一定会滚动到对应的 <img> 处

loading 可以指定图片的懒加载行为，即图片进入视口，才开始加载

auto：浏览器默认行为，等同于不使用loading属性
lazy：启用懒加载
eager：立即加载资源，无论它在页面上的哪个位置

响应式图像

网页图片在不同尺寸的设备上都能良好展示，即为“响应式图像”（responsive image）

x倍图

使用 srcset属性指定多张图像，适应不同像素密度的屏幕。格式为 像素密度倍数+字母x，1x表示单倍像素密度（可以省略）。

如果srcset属性都不满足条件，那么就加载src属性指定的默认图像

<img srcset="foo-320w.jpg,
             foo-480w.jpg 1.5x,
             foo-640w.jpg 2x"
     src="foo-640w.jpg">

不同容器尺寸，显示不同图片

1、使用 srcset 设置不同尺寸宽度显示的图片

<img srcset="foo-160.jpg 160w,
             foo-320.jpg 320w,
             foo-640.jpg 640w,
             foo-1280.jpg 1280w"
     src="foo-1280.jpg">

2、使用 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属性选择最接近的图片

x倍图 + 不同容器尺寸，显示不同图片

查看下方 <picture> 标签

`<picture>`

<picture>是一个容器标签，内部使用<source>和<img>，指定不同情况下加载的图

响应式

<picture>内部的<source>标签，主要使用media属性和srcset属性。

media属性给出媒体查询表达式，
srcset属性就是<img>标签的srcset属性，给出加载的图像文件

执行逻辑：

浏览器按照<source>标签出现的顺序，依次判断当前设备是否满足media属性的媒体查询表达式，如果满足就加载srcset属性指定的图片文件，并且不再执行后面的<source>标签和<img>标签

<picture>
  <source srcset="foo.png,
                  foo@d2x.png 2x"
          media="(min-width: 990px)">
  <source srcset="bar.png,
                  bar@2x.png 2x"
          media="(min-width: 750px)">
  <img srcset="default.png,
               default@2x.png 2x">
</picture>

图像格式选择

<picture>标签还可以用来选择不同格式的图像。比如，如果当前浏览器支持 Webp 格式，就加载这种格式的图像，否则加载 PNG 图像。

<picture>
  <source type="image/webp" srcset="logo.webp"> 
  <img src="logo.png">
</picture>