HTML <img> 标签

在 HTML 中，你可以使用 <img> 标签将图像添加到网站。它是一个内联元素，它不会从新行开始，也没有结束标记（例如段落标记 <p> 就需要结束标记）。

<img> 标签有几个属性，其中 src、height、width 和 alt 是最重要的。

了解 <img> 标签的用法以及一些最佳实践很重要，因为图像会对网站的加载时间和 SEO 产生影响。

因此，在本教程中，我们将了解如何使用 <img> 标签向网站添加图像、如何使用其属性、一些最佳实践以及现代使用方法。

基本 HTML <img> 标签语法

以下是向 HTML 中添加 <img> 标签的基本语法：

<img 
    src="assets/images/ring-tailed-lemurs.webp" 
    alt="A Group of Ring-tailed Lemurs" 
/>

现在让我们谈谈它的属性以及它们是如何工作的。

HTML <img> 标签属性

src 属性

src 属性表示图像源。没有它，标签本身在现实世界中将无法使用。

它向浏览器指示在哪里可以找到图像。因此，如果图像在本地托管，则采用相对路径，如果图像在线托管，则采用绝对 URL。

alt 属性

alt 属性指定图像的替代文本，例如，这可能是在网络故障期间显示的文本。或者它可以在错误指定图像源时显示某些内容，以便用户知道图像是关于什么的。

在下面的代码片段中，错误地指定了图像源，向你展示了 alt 属性所起的作用：

<img
     src="assets/images/ring-tailed-lemur.webp"
     alt="A Group of Ring-tailed Lemurs"
/>

这是使图像水平和垂直居中的 CSS：

body {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   height: 100vh;
  }

运行结果是这样的：

alt 属性非常重要，还有两个原因：

• SEO：它向网络爬虫表明图像的内容
• 可访问性：它可以帮助屏幕阅读器了解图像的内容，以便向视障人士报告。此外，它可以让低带宽用户知道图像是关于什么的。

width 和 height 属性

你可以使用这些属性为图像指定特定的宽度和高度。使用这些属性，你可以向下或向上调整图像大小。

但是，理想情况下，你不应使用这些属性调整图像的大小。我们将在最佳实践中对此进行更多讨论。

HTML <img> 标签最佳实践

不要使用 width 和 height 属性调整图像大小

这是一种不好的做法，因为它会使图像看起来失真并影响质量。

相反，你可以使用 Photoshop 等照片编辑软件将图像优化到你想要的尺寸。

在下面的代码片段中，我为图像指定了宽度和高度——一个不好的做法：

<img
      src="assets/images/ring-tailed-lemurs.webp"
      height="440px"
      width="440px"
      alt="A Group of Ring-tailed Lemurs"
/>

图像是这样的：

不使用 width 和 height 属性，图像如下所示：

第二个看起来更好，对吧？

命名图像

适当地命名图像可以帮助搜索引擎了解图像的含义。例如，将图像命名为 ring-tailed-lemurs.webp，而不是 photo-1580855733764-084b90737008.webp。后者对于搜索引擎优化（SEO）来说是不够的。

缩小图像文件大小

就页面速度而言，图像的文件大小至关重要。较小的图像尺寸（保留图像质量）可减少加载时间，而较大的图像需要加载很久。

有多种工具和各种软件可以帮助你做到这一点，比如 imageOptim、jStrip 和 PNGGauntet。如果你担心 SEO，你将需要研究这些——因为页面速度是一个重要的排名因素。

使用 CDN 托管图像

想象一下，如果一个网站托管在美国，但非洲的用户想要访问它，图像和图标等必须从美国传输到非洲，这样就会使下载变慢。

使用 CDN（内容分发网络）将允许将网站的图像缓存到世界各地的多个位置。然后 CDN 可以从离用户最近的位置为他们提供服务，从而缩短加载时间并提供更好的用户体验。

Cloudflare 是一种流行的 CDN，许多开发人员使用它来托管他们的图像。

使用描述性替代文本

使用描述性替代文本有助于搜索引擎了解图像的内容。但它并不止于此——替代文字也必须与图像相关。

例如，使用这个：

<img
   src="assets/images/ring-tailed-lemurs.webp"
   alt="A Group of Ring-tailed Lemurs"
/>

代替：

<img src="assets/images/ring-tailed-lemurs.webp" alt="Lemurs" />

使用 title 属性显示提示

就像 alt 属性一样，你可以使用 title 属性来显示有关图像的附加信息。当用户将鼠标悬停在图像上时，浏览器将其显示为提示。

<img
    src="assets/images/ring-tailed-lemurs.webp"
    alt="A Group of Ring-tailed Lemurs"
    title="Ring-tailed lemurs are led by females"
/>

<img> 标签现代用法

你可以通过多种方式使用 <img> 标签，这些方式更加现代。现在让我们来看看其中的一些。

延迟加载图像

延迟加载是一个新的“加载所需内容”的概念。使用延迟加载，仅当用户滚动到其视口时才加载图像。

这与预先加载形成对比，即在浏览器呈现页面后立即加载每个图像。

要应用延迟加载，请将加载属性添加到 <img> 标签并将值设置为“延迟”。

<img
      src="assets/images/ring-tailed-lemurs.webp"
      alt="A Group of Ring-tailed Lemurs"
      title="Ring-tailed lemurs are led by females"
      loading="lazy"
/>

如今，图像通常质量很高且很大，但这会对用户体验和 SEO 产生负面影响——因此引入了延迟加载。

使用 <figure> 和 <figcaption> 标签

通常，你可能需要向用户指定图像的标题。许多开发人员通过在 <img> 后面添加 <p> 标签来实现这一点。这可能没有错，但它不是最佳实践，并且没有将标题与图像相关联，因此搜索引擎不会理解它是什么。

<img
      src="assets/images/ring-tailed-lemurs.webp"
      alt="A Group of Ring-tailed Lemurs"
      title="Ring-tailed lemurs are led by females"
      loading="lazy"
/>
<p>Ring-tailed lemurs are social animals</p>

很明显，在上面的例子中，图像和标题之间没有关联。

HTML5 引入了 <figure> 和 <figcaption> 元素来帮助解决这个问题。你将 <img> 标签放在一个 <figure> 元素中，并在 <figcaption> 元素中指定一个标题。

这有助于搜索引擎将标题与图像相关联，从而提升性能和 SEO 效果。

下面的代码片段和屏幕截图向你展示了带有和不带有 <figure> 和 <figcaption> 元素的图像：

<figure>
   <img
     src="assets/images/ring-tailed-lemurs.webp"
     alt="A Group of Ring-tailed Lemurs"
     title="Ring-tailed lemurs are led by females"
     loading="lazy"
   />
<figcaption>Ring-tailed lemures are social animals</figcaption>
</figure>

你现在可以看到图像和标题完美地关联在一起。

使用 .webP 图像格式

.webP 是一种由 Google 创建的图像格式。根据创建者的说法，它是一种图像格式，其尺寸低于 JPG、JPEG、PNG ，但与它们具有相同的质量。

这种格式越来越被广泛接受，被认为是网络的下一代图像格式。

总结

我希望这篇文章可以帮助你了解 <img> 标签在 HTML 中的工作原理，以便你可以在项目中正确使用它。它将有助于改善你的用户体验和 SEO。

非常感谢你阅读本文。

原文：<img> HTML – Image Tag Tutorial，作者：Kolade Christopher Kayode