PageSpeed 模块弄乱了图像的比例答案

【问题标题】：PageSpeed Module messes up the scale of imagesPageSpeed 模块弄乱了图像的比例
【发布时间】：2020-12-13 08:58:31
【问题描述】：

Pagespeed 模块会更新此图像以调整其大小，但在此过程中它会弄乱比例。有没有办法保持比例并调整它的大小？（类似于裁剪图像）

图片上的 CSS 是：
高度：100%；
宽度：768 像素；
适合对象：封面；

【问题讨论】：

....所以呢？最后发生了什么？
@EliezerBerlin 我仍然没有解决方案，暂时我已经为混乱的图像应用了 data-pagespeed-no-transform 属性。如果没有任何结果，那么我最终将不得不将它们制作为背景图像，这不是首选的解决方法。

【解决方案1】：

要将渲染的尺寸报告回服务器，此过滤器将 JavaScript 代码注入到您的页面中，这些代码会将大小返回。

您拥有的任何使用 object-fit:cover; 的图像都会非常让 Pagespeed 感到困惑。毕竟，图像的可见部分会根据屏幕的大小而变化，因此 Pagespeed 的信标甚至不可能准确测量并正确猜测如何裁剪和调整大小。

ModPagespeedDisableFilters insert_image_dimensions
ModPagespeedDisableFilters resize_rendered_image_dimensions

编辑：您可能还想尝试用背景图像 CSS 替换您的。它应该在功能上相同，但我怀疑 Pagespeed 将有更好的时间来正确解释它。

【讨论】：

Pagespeed 的信标确实可以准确获取图像的大小。但是由于图像使用的是对象拟合，所以尺寸比例不正确。因此，当 Pagespeed 将图像调整为该大小时，图像会被挤压。您是否知道不这样做会调整大小的任何过滤器？
@shubh Sheth 我不知道。整个问题是Pagespeed无法调整图像大小，因为他无法正确猜测大小，因为objectfit将大小与实际显示解除关联.....而不是使用objectfit，一个div背景图像可能更有可能被 Pagespeed 正确解释。你可以使用 background-image CSS 代替吗？