如何在图像元素上使用显式宽度和高度

已发表: 2023-05-30


图像等视觉效果可以使您网站的内容更具吸引力。 然而，如果它们的尺寸配置不正确，则可能弊大于利。 学习如何在图像元素上使用明确的宽度和高度对于保持网站的性能及其美观至关重要。

首先，PageSpeed Insights 等在线工具可以帮助您识别缺少尺寸的图像。 然后，您可以手动添加这些属性，或使用插件来简化过程。

为什么需要为图像元素添加明确的宽度和高度

添加到网站的每个图像都应具有定义的宽度和高度。 如果缺少这些属性，浏览器在加载相关页面时将不得不“猜测”显示每个图像所需的空间。

因此，各种元素可能会被推送到页面周围，直到浏览器完成图像大小的调整和渲染。 这些布局变化可能会让您的网站显得不太专业，并且还会对用户体验产生负面影响。

例如，如果元素在页面上移动，用户可能会意外点击错误的元素。 这也使得访问者很难浏览您的网站并快速找到他们想要的内容。

更重要的是，累积布局转变（CLS）是Google Core Web Vitals 中的关键指标之一。 它测量页面加载时内容的移动。 高 CLS 分数表明用户在访问您的网站时经历了很多布局变化，并且可能会对您网页的排名产生负面影响。

要解决此问题，您需要在图像元素上使用明确的宽度和高度。 这有助于浏览器确定需要为媒体文件分配的确切空间量。

除了减少布局变化之外，这种简单的做法还可以帮助最大限度地减少“主线程工作”。 该术语指的是浏览器在加载页面时需要执行的任务。 如果浏览器必须计算出图像的尺寸，这将增加其工作量并导致加载时间变慢。

因此，通过定义图像的尺寸，您将消除浏览器的任何猜测（和额外的任务）。 这将有助于它更快、更有效地加载您的内容，从而带来更流畅的用户体验。

如何在 WordPress 中的图像上使用明确的宽度和高度

现在，让我们看看如何在 WordPress 中的图像元素上使用显式宽度和高度。 在以下两个步骤中，我们将向您展示如何向图像添加缺失的尺寸。

步骤 1：识别缺少尺寸的图像

首先，您需要找出网站上的哪些图像缺少尺寸。 通常，您通过 WordPress 媒体库或块编辑器上传的每个图像都会自动分配宽度和高度属性：

WordPress 块编辑器中的图像尺寸。

但是，如果您通过代码或页面构建器添加图像，它们可能会缺少尺寸。 当您将网站从其他平台（例如 Wix）迁移到 WordPress 时，您也可能会遇到此问题。

幸运的是，识别这些图像非常容易。 第一步是使用 PageSpeed Insights 运行性能测试：

PageSpeed 见解。

输入您网站的 URL 并单击“分析” 。 您将获得有关您网站的核心网络生命力的报告，其中包括累积布局变化的分数：

PageSpeed Insights 上的核心 Web Vitals 评估。

理想情况下，您希望每个区域都获得绿色分数。 但是，即使您获得了良好的 CLS 分数，您可能仍然需要在某些地方使用图像元素的显式宽度和高度。

要了解是否属于这种情况，请向下滚动到审核并选择CLS选项卡。 此部分将向您显示页面上是否有任何缺少尺寸的图像：

PageSpeed Insights 中对 CLS 的审核。

如果您单击“图像元素没有明确的宽度和高度” ，您甚至会看到哪些特定图像需要修复：

有关 PageSpeed Insights 的更详细的 CLS 报告。

您可以单击随附的 URL 来仔细查看每个图像。

第 2 步：手动或使用插件添加图像尺寸

接下来，让我们看看在图像元素上使用显式宽度和高度的两种方法。 如果您使用代码构建了网站（或部分网站），则可以手动执行此操作。

首先，导航到网站中包含缺失值的图像的页面或部分。 然后，找到图像并指定其宽度和高度属性。

例如，图像文件的 HMTL 代码将如下所示：

<img src="https://themeisle.com/blog/use-explicit-width-and-height-on-image-elements/chocolatecake.jpg" width="640" height="360" alt="Chocolate Cake.">

如果您有多个缺少尺寸的图像，或者您只是想加快处理速度并避免任何错误，您可能需要使用 WP Rocket 等优化插件来节省时间。 该工具可以为您完成所有工作。

在站点上安装并激活插件后，转到“设置”>“WP Rocket”并选择“媒体”选项卡：

WP Rocket 中的“媒体”选项卡，您可以在其中对图像元素使用明确的宽度和高度。

然后，向下滚动页面并选中“添加缺失的图像尺寸”框：

在 WP Rocket 中添加缺失的图像尺寸。

最后，单击“保存更改” 。 WP Rocket 将扫描您网站的 HTML 以查找缺少width和height属性的图像。 然后，它将使用 PHP 函数getimagesize获取图像大小，并使用这些值添加属性。

将图像添加到 WordPress 的其他最佳实践

值得注意的是，还有许多其他方法可以优化 WordPress 图像。 例如，您可能还想开始调整图像大小以进一步提高网站的性能。

当然，调整上传到 WordPress 的每张图像的大小或压缩需要花费大量的工作。 幸运的是，有许多插件可以为您处理此任务。

例如，Optimole 可以在您上传图像时立即缩放图像。 它还根据每个访问者的浏览器和设备选择要显示的正确图像尺寸：

Optimole 插件可以轻松地在图像元素上使用明确的宽度和高度。

另外，该服务完全基于云。 这意味着它不会给您的服务器增加任何压力，并且可以帮助您节省存储空间。

结论

没有宽度和高度属性的图像可能会导致网站加载时出现较大的布局变化。 这意味着元素将在页面中移动，直到浏览器确定所有内容的正确尺寸。 这可能会导致加载时间变慢和用户体验变差。

回顾一下，以下是如何轻松地将缺失的属性添加到图像中的方法：

  1. 在 PageSpeed Insights 上运行测试以识别具有缺失值的图像。
  2. 手动添加宽度和高度尺寸，或使用 WP Rocket 等插件。

您对如何在图像元素上使用显式宽度和高度有任何疑问吗？ 请在下面的评论部分告诉我们！