HTML图片

HTML 的 <img> 标签在 HTML 网页中嵌入图像。例如：

<img src="logo.png">

浏览器输出

在这里，<img> 标签将图像 logo.png 插入到网页中。

HTML 图像标签有 **2** 个重要属性

• src 属性
• alt 属性

注意： <img> 标签是空标签，即不需要闭合标签。

HTML 图像 src 属性

src 属性是 <img> 标签的必需属性。它指定图像的路径（URL）。它告诉浏览器在哪里查找图像。例如：

<img src="tictactoe.png" >

浏览器输出

在上面的例子中，src 属性告诉浏览器从网页所在的同一目录加载图像。

同样，如果图像存储在子目录中，src 属性中的路径将写为：

<img src="images/tictactoe.png" >

如果图像完全位于另一个服务器上，或者我们要使用来自网络的图像，我们可以为图像提供绝对 URL。例如：

<img src="https://www.example.com/images/tictactoe.png">

注意：虽然我们可以为位于我们自己 Web 服务器上的图像提供绝对路径，但最好提供相对路径，因为它能实现更快的加载速度。因此，在自己的服务器上放置图像时，请始终使用相对路径。

HTML 图像 alt 属性

alt 属性是图像的文本描述。alt 属性的值应描述图像，以便即使图像加载失败，内容也具有意义。

<img src="computer.png" alt=" A standard Computer" >

浏览器输出

如果用户无法查看图像（互联网连接慢、src 属性错误或使用屏幕阅读器），则会显示 alt 属性的内容。

它还有助于 SEO，因为它能帮助搜索引擎了解图像的内容。

HTML 图像 title 属性

title 属性会在用户将鼠标悬停在图像上时显示有关图像的信息。例如：

<img src="tictactoe.png" alt="A game of tic-tac-toe" title="Tic-Tac-Toe" />

浏览器输出

注意： 虽然 alt 和 title 属性看起来相似，但 title 属性不能用作 alt 属性的替代品。屏幕阅读器不会读取 title，并且在图像加载失败时也不会显示 title。

HTML 图像的延迟加载

默认情况下，网页上的所有图像都会在初始加载时加载。如果页面上有许多图像，这会导致页面加载缓慢。

我们可以使用 loading 属性来更改 HTML 图像的此行为。

<img src="dinosaur.png" alt="A T-rex" loading="lazy"> 

现在，图像将不会加载，直到用户滚动到靠近图像的位置。如果图像位于页面的底部，而用户从未向下滚动网站，则图像将永远不会加载。

这会减少网站的初始加载时间并防止不必要的数据获取。

HTML 图像尺寸 - 宽度和高度

我们可以使用 style 属性来指定图像的高度和宽度。例如：

<img src="tictactoe.jpg" alt="A game of tic-tac-toe" style="width: 200px; height: 200px;">

或者，我们也可以使用 height 和 width 属性来设置高度和宽度。例如：

<img src="tictactoe.jpg" alt="A game of tic-tac-toe" width="200" height="200">

浏览器输出

我们应该始终设置图像的高度或宽度。否则，当图像加载时，网页上的内容将会移动。

注意： 上面两个代码示例输出相同，但建议使用 style 属性而不是 height 和 width 属性。

常见的图像格式