CODEWITHSUNDEEP
image-resizingmod-pagespeed
Shubh Sheth
Shubh Sheth

Reputation: 431

PageSpeed Module messes up the scale of images

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;

Upvotes: 3

Views: 259

Answers (1)

Eliezer Berlin
Eliezer Berlin

Reputation: 3576

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.

Upvotes: 1

Related Questions