PageSpeed 模块弄乱了图像的比例

Posted 2023-03-04

【中文标题】PageSpeed 模块弄乱了图像的比例

【英文标题】：PageSpeed Module messes up the scale of images

【发布时间】：2020-12-13 08:58:31

【问题描述】：

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

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

【问题讨论】：

....所以呢？最后发生了什么？

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

【参考方案1】：

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

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

禁用过滤器能否解决您的问题？ https://www.modpagespeed.com/doc/reference-image-optimize#resize_rendered_image_dimensions

ModPagespeedDisableFilters insert_image_dimensions
ModPagespeedDisableFilters resize_rendered_image_dimensions

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

【讨论】：

Pagespeed 的信标确实可以准确获取图像的大小。但是由于图像使用的是对象拟合，所以尺寸比例不正确。因此，当 Pagespeed 将图像调整为该大小时，图像会被挤压。您是否知道不这样做会调整大小的任何过滤器？

@shubh Sheth 我不知道。整个问题是Pagespeed无法调整图像大小，因为他无法正确猜测大小，因为objectfit将 大小与实际显示解除关联.....而不是使用objectfit，一个div背景图像可能更有可能被 Pagespeed 正确解释。你可以使用 background-image CSS 代替吗？