Image elements do not have explicit width and height - due to inline images

[dgaastra]

Dear fellow mod_pagespeed fans!

Is there anyway to undo:

"Image resized and then inlined into HTML as Base64 data. Because the inlined data has the desired dimensions, width and height are no longer needed."

@ref: https://www.modpagespeed.com/doc/filter-image-optimize

because Pagespeed Insights keeps complaining:

"Image elements do not have explicit width and height"

Can we add the height and width back in? Setting filter "insert_image_dimensions" did not work.

Thanks so kindly

Dennis

[Chathu07]

I'm experiencing the same issue.

I enabled following dimensions filters. But nothing worked.

pagespeed EnableFilters insert_image_dimensions,resize_rendered_image_dimensions;

[Lofesa]

I have found this response in 2015
#55

Basically, inlined images have their dimensions encoded in the data uri.
So the filter must be recoded to include these dimensions.
One workaround is put these image dimensions as CSS code.
Or disable image inlining:
pagespeed DisableFilters inline_images;

[Chathu07]

I have found this response in 2015
#55

Basically, inlined images have their dimensions encoded in the data uri.
So the filter must be recoded to include these dimensions.
One workaround is put these image dimensions as CSS code.
Or disable image inlining:
pagespeed DisableFilters inline_images;

Thank you for your reply. However, I face this issue with my header image which is not inline by modpagespeed.

[dgaastra]

Thanks for the replies

CSS is no accepted by "Pagespeed Insights" as a workaround, and, disabling inline images defeats the whole purpose to begin with.

Our point is, that we want inline images to show height and width. Or, at least, provide an option to do this.

Thanks

Dennis

[Lofesa]

Sorry for come here too late, but I´m out of my house with limited internet access.
@dgaastra
Here you can read what @patrickhulce wrote:
#2068 (comment)
Patrick is a LH team member.
So, as far as I understand css is a valid method to set explicit image sizes, until the filter got changed.

@utags
Your issue is a different thing.
If your site still https://foodsreborn.com/, I can´t see any warning about image sizes.

[Lofesa]

I have found this

incubator-pagespeed-mod/net/instaweb/rewriter/image_rewrite_filter.cc

Line 1653 in 56bfa08

DeleteMatchingImageDimsAfterInline(cached, element);

I think is the code for deleting image dims when inlined, but I´m unsure.
@oschaaf @jmarantz Can you think that deleting this line can solve the issue?

[oschaaf]

I think is the code for deleting image dims when inlined, but I´m unsure.

Yes, I think that is the relevant line, but I'm note sure if unconditionally deleting that line is the best approach..

[jmarantz]

I suspect deleting that line would cause all kinds of tests to need to be regolded. It would also be worse generally for performance because it makes the HTML bigger and might mean less is discovered by the browser in the first packet. But it might be more important to the customer to disable them so Lighthouse gives them a better score, than to actually have the best performance.

The right thing might be to make it an option.

[Lofesa]

The rationale, from a LH team member, is: until the image is decoded there is no image dimensions so the browser don´t reserve space for it and when the image is displayed there is a CLS.