HTML image标签详解

HTML中的<img>标签用于插入图片，在HTML网页制作中是必不可少的标签之一。HTML image标签是单独使用的，没有闭合标签：

<img src="foo.jpg">

上面代码在网页插入一张图片foo.jpg。src属性指定图片的网址，上例是相对URL，表示图片与网页在同一个目录：

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

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

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

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

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

<a href="example.html">

<img src="foo.jpg"></a>

上面代码中，图片可以像链接那样点击，点击后会产生跳转。

接下来我们来看image标签属性，此元素支持全局属性：

（1）alt属性

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

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

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

（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">

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

image标签是我们学习HTML前期所必须要掌握的标签，极大地丰富了我们使用HTML开发出来的网页内容。在本站的HTML教程中，对于如何灵活地使用image标签以及image标签支持的图像格式都有详细的描述，想学好HTML的小伙伴快去学习吧。