图片标签

<img>
<figure>，<figcaption>

`<img>`

<img>标签用于插入图片。它是单独使用的，没有闭合标签。

<img src="foo.jpg">

<img>默认是一个行内元素，与前后的文字处在同一行。

<p>Hello<img src="foo.jpg">World</p>

上面代码的渲染结果是，文字和图片在同一行显示。

图像默认以原始大小显示。如果图片很大，又与文字处在同一行，那么图片将把当前行的行高撑高，并且图片的底边与文字的底边在同一条水平线上。

<img>可以放在<a>标签内部，使得图片变成一个可以点击的链接。

<a href="example.html">
  <img src="foo.jpg">
</a>

（1）alt 属性

alt属性用来设定图片的文字说明。图片不显示时（比如下载失败，或用户关闭图片加载），图片的位置上会显示该文本。

<img src="foo.jpg" alt="示例图片">

上面代码中，alt是图片的说明。图片下载失败时，浏览器会在图片位置，显示文字“示例图片”。

面试题

`<img>`的`title`和`alt`有什么区别

title:常当鼠标滑动到元素上的时候显示
alt:的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。

`img的alt与title有何异同？`

alt(alt text):为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。替换文字的语言由lang属性指定。(在IE浏览器下会在没有title时把alt当成 tool tip显示)
title(tool tip):该属性为设置该属性的元素提供建议性的信息

（2）width 属性，height 属性

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

<img src="foo.jpg" width="400" height="300">

上面代码中，width属性指定图片显示的宽度为400像素，height属性指定显示高度为300像素。

注意，一旦设置了这两个属性，浏览器会在网页中预先留出这个大小的空间，不管图片有没有加载成功。不过，由于图片的显示大小可以用 CSS 设置，所以不建议使用这两个属性。

一种特殊情况是，width属性和height属性只设置了一个，另一个没有设置。这时，浏览器会根据图片的原始大小，自动设置对应比例的图片宽度或高度。举例来说，图片大小是 800像素 x 800像素，width属性设置成200，那么浏览器会自动将height设成200。

（3）srcset，sizes

见”响应式图像”

（4）referrerpolicy

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

（5）crossorigin

有时，图片和网页属于不同的网站，网页加载图片就会导致跨域请求，对方服务器可能要求跨域认证。crossorigin属性用来告诉浏览器，是否采用跨域的形式下载图片，默认是不采用。

简单说，只要打开了这个属性，HTTP 请求的头信息里面，就会加入origin字段，给出请求发出的域名，不打开这个属性就不加。

一旦打开该属性，它可以设为两个值。

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

下面是一个例子。

<img src="foo.jpg" crossorigin="anonymous">

crossorigin属性如果省略值的部分，则等同于anonymous。

<img src="foo.jpg" crossorigin>

（6）loading

浏览器的默认行为是，只要解析到<img>标签，就开始加载图片。对于很长的网页，这样做很浪费带宽，因为用户不一定会往下滚动，一直看到网页结束。用户很可能是点开网页，看了一会就关掉了，那些不在视口的图片加载的流量，就都浪费了。

loading属性改变了这个行为，可以指定图片的懒加载，即图片默认不加载，只有即将滚动进入视口，变成用户可见时才会加载，这样就节省了带宽。

loading属性可以取以下三个值。

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

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

由于行内图片的懒加载，可能会导致页面布局重排，所以使用这个属性的时候，最好指定图片的高和宽。

`<figure>`，`<figcaption>`

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/figure

<figure>标签可以理解为一个图像区块，将图像和相关信息封装在一起。<figcaption>是它的可选子元素，表示图像的文本描述，通常用于放置标题，可以出现多个。

<figure>
  <img src="https://example.com/foo.jpg">
  <figcaption>示例图片</figcaption>
</figure>

除了图像，<figure>还可以封装引言、代码、诗歌等等。它等于是一个将主体内容与附加信息，封装在一起的语义容器。

<figure>
  <figcaption>JavaScript 代码示例</figcaption>
  <p><code>const foo = 'hello';</code></p>
</figure>

技巧

网络带宽成本很高，图片处理在保证用户体验好的前提下，文件尺寸也要尽可能小
图片属性静态文件，不要放在WEB服务器上，而放在云储存服务器上并使用CDN加速
以JPEG类型优先使用，文件尺寸更小
小图片使用PNG，清晰度更高，因为文件尺寸小，文件也不会太大
网页图标建议使用css字体构建如 iconfont 或 fontawesome

格式	说明	透明
PNG	无损压缩格式，适合图标、验证码等。有些小图标建议使用css字体构建。	支持
GIF	256色，可以产生动画效果（即GIF动图）	支持
JPEG	有损压缩的类型，如商品、文章的图片展示

<img>