海浪Code

Appearance

<img> ​

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

html
<img src="foo.jpg">

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

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

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

alt 属性

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

crossorigin

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

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

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

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

下面是一个例子。

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

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

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

loading

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

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

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

  • auto：浏览器默认行为，等同于不使用loading属性。
  • lazy：启用懒加载。
  • eager：立即加载资源，无论它在页面上的哪个位置。
<img src="image.png" loading="lazy" alt="…" width="200" height="200">

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

<figure>，<figcaption> ​

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

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

响应式图像 ​

网页在不同尺寸的设备上，都能产生良好的显示效果，叫做“响应式设计”（responsive web design）。响应式设计的网页图像，就是“响应式图像”（responsive image）。

响应式图像的解决方案有很多，JavaScript 和 CSS 都可以实现。这里只介绍语义性最好的 HTML 方法，浏览器原生支持。

响应式用法 ​

html
<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>

上面代码中，<picture>标签内部有两个<source>标签和一个<img>标签。

<picture>内部的<source>标签，主要使用media属性和srcset属性。media属性给出媒体查询表达式，srcset属性就是<img>标签的srcset属性，给出加载的图像文件。sizes属性其实这里也可以用，但由于有了media属性，就没有必要了。

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

<img>标签是默认情况下加载的图像，用来满足上面所有<source>都不匹配的情况，或者不支持<picture>的老式浏览器。

上面例子中，设备宽度如果不超过500px，就加载竖屏的图像，否则加载横屏的图像。

图像格式的选择 ​

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

html
<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属性给出图像的 MIME 类型，srcset是对应的图像 URL。

浏览器按照<source>标签出现的顺序，依次检查是否支持type属性指定的图像格式，如果支持就加载图像，并且不再检查后面的<source>标签了。上面例子中，图像加载优先顺序依次为 svg 格式、webp 格式和 png 格式。