3

enter image description here

Pagespeed module updates this image to resize it but in the process it messes up the scale. Is there a way to keep the scale and resize it? (Similar to cropping the image)

The CSS on the image is:
height: 100%;
width: 768px;
object-fit: cover;

GrahamTheDev
  • 22,724
  • 2
  • 32
  • 64
Shubh Sheth
  • 411
  • 5
  • 15
  • ....So? What happened in the end? – Eliezer Berlin Sep 11 '20 at 02:30
  • @EliezerBerlin I still don't have a solution, temporarily I have applied data-pagespeed-no-transform attribute for the images that are messed up. If nothing comes around, then I would have to end up making them as background images which is not the preferred workaround. – Shubh Sheth Sep 11 '20 at 16:07

1 Answers1

1

To report the rendered dimensions back to the server, this filter injects JavaScript code to your pages which beacon the sizes back.

Any image that you have that uses object-fit: cover; is going to be extremely confusing to Pagespeed. After all, the visible part of the image changes depending on the size of the screen, so it isn't even really possible for Pagespeed's beacon to accurately measure and correctly guess how to crop and resize it.

Does disabling the filters solve your problem? https://www.modpagespeed.com/doc/reference-image-optimize#resize_rendered_image_dimensions

ModPagespeedDisableFilters insert_image_dimensions
ModPagespeedDisableFilters resize_rendered_image_dimensions

Edit: You may also want to try replacing your < img/> with background-imaged CSS. It should work functionally identical, but I suspect Pagespeed will have a better time correctly interpreting it.

Eliezer Berlin
  • 3,170
  • 1
  • 14
  • 27
  • Pagespeed's beacon does accurately get the size of the image. But because the image is using object-fit, the size ratio isn't correct. So when Pagespeed resizes the image to that size, the image gets squished. Are you aware of any filter what would resize without doing that? – Shubh Sheth Sep 03 '20 at 15:07
  • @shubh Sheth Not that I know of. The whole problem is that Pagespeed CAN'T resize the image, because he can't correctly guess the size, because objectfit de-associates the size from the actual display..... Instead of using objectfit, a div with a background image is probably much more likely to be correctly interpreted by Pagespeed. Can you use background-image CSS instead? – Eliezer Berlin Sep 05 '20 at 20:40