灯塔：设置显式宽度和高度的问题

Question

我目前正在尝试提高我网站的 Lighthouse 分数。 Lighthouse 显示的最大问题是我没有为我的图像使用明确的宽度和高度。 问题在于我的图像几乎都有非常不同的纵横比，并且一直在添加新图像，因此无法手动修复此问题。 有哪些选择可以解决这个问题？

Answer 1

您仍然可以将大小（宽度和高度）固定到img块并使用 css 属性object-fit: contain; 将纵横比保持在该固定块大小内。

我知道这并不总是最好的解决方案，有时我们希望 img 块具有渲染图像的确切大小（在这种情况下，固定 div 作为父级和最小/最大值可以完成这项工作，但我不知道是否灯塔仍然显示警告）

Answer 2

嗨@GermanProgrammer99，

您必须将图像的宽度和高度传递给如下图像。 您不必以像素为单位传递它。

$image = get_sub_field('image');
?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['title']; ?>" title="<?php echo $image['title']; ?>" width="<?php echo $image['width']; ?>" height="<?php echo $image['height']; ?>">

如果您使用的是 WordPress 网站和自定义模板，您可以通过从图像数组中获取图像宽度和高度并设置它们来轻松完成。

这只是为了让浏览器了解特定图像占据的宽度和高度。 这样就不会有任何布局变化。

这是做到这一点的唯一方法。 If you are using SVG image, then you have to do some work to get the width and height of the SVG image as WordPress doesn't see SVG as an image.

如果您需要更多帮助，请告诉我。