HTML Width and Height are auto removed

[mitko-janeski]

Hello guys I want to report a problem, in my HTML file I have

img src="file.jpg" alt="File Name" class="mr-2" width="32" height="32"

File after pagespeed-mod
img src="data:image/webp;base64,UklGRtYBAABXRUJQVlA4IMoBAAAwCACdASogACAAPm0skUWkIqGYBABABsS1AE6ZdnFfCB2ojfauANBN9TzP583ei2nuKFTF1HroFeSRRwtmfLKZxZQg1Wp2VjEuAAD+/9TKg8t7Ku+x4b//BNO1dxn6ev1NxZdU8UCJJ9p+Fm+5nN9/997//uPwidX/Hb/RmJW/L2d8mKv9/8iuFbWfe/prEgm7bqLgNR55KnD87txBM/RPnP0Vbc/9A1eyHw1NPbxX/vheNsd0n4za+DC5SohhFU/AYR6dBy1GcPtjtWkRwemzf+MgkMfM8u1dASE9F3TgzFDMXCDt6Jf2dfdQzZ+fMrRZuvwA5nFRN93SYQmR4f/GxVo5339/8f0klPQLdOyfVN/r/18dnofdoYZoclbnI4La0mr1d6Qbfjt13+ZR3/jsqNP/pTqzBae2Bydd/H98ON6D/FUl8V1X+Ntb9dGGzb/gFVZdo07h9epurkmMpmxGhxKh6F2d3QTSnCWlz7B5J7o0+Z9+lntP8ZNKnbMi5tSLzmblUi1ROhn5wAKD2vLU1nS+eoz0gdhU5V1L6vZz0FqcG2r7K3e4wBTV1HMLIXnz8QSMEtdfhmVqRAG7wubDSgB5bsHUMEAAAA==" alt="File Name" class="mr-2" data-pagespeed-url-hash="319205374" data-pagespeed-onload="pagespeed.CriticalImages.checkImageForCriticality(this);" onload="var elem=this;if (this==window) elem=document.body;elem.setAttribute('data-pagespeed-loaded', 1)" id="pagespeed_img_Ny12gAmBpH1" data-pagespeed-loaded="1"

As you can see width and height attributes are removed and inside Google Lighthouse Report I get this:
"Image elements do not have explicit width and height"

How can I resolve this problem ?

centos 7 apache 2.4
browser chrome
pagespeed: 1.13.35.2 via easy apache

[Lofesa]

The images are inlined by the filter:
ModPagespeedEnableFilters inline_images
you can disable this filter and then you got "normal" url.

Anyway thi issue must be reported to Ligthhouse, because data:uris spec doný have dimensions.

Can you add additional info to this LH issue? GoogleChrome/lighthouse#12529

[patrickhulce]

Hi there! I think there's some confusion @Lofesa.

because data:uris spec doný have dimensions.

Lighthouse doesn't want width/height as part of the data URI, it wants width/height attributes as described in the OP's example that pagespeed mod appears to remove. Even if a data URL loads much faster, there is still a decode component that can be async and lead to layout shifts, seems worthwhile to preserve them at least.

[Lofesa]

Hi @patrickhulce
As far as I can see in the PR##12120 the unsized non-network svg are ignored, Is not the same with inlined images?
Another way to set image size is with css, Is this way acceptable for LH?

[patrickhulce]

Is not the same with inlined images?

It is not. Encoded images formats like JPEG/WebP/PNG need to be decoded on a separate background thread, so layouts happen in between. In practice it appears that the layout is not affected on fast machines for JPEG on Chromium (perhaps because Chromium at least waits for the header with dimensions to be decoded? I'm not sure). If you have other knowledge that this behavior is actually guaranteed in all browsers, happy to open new discussion over there about excluding all non-network images.

Another way to set image size is with css, Is this way acceptable for LH?

Sure, any method of fixed sizing will work for Lighthouse, but it appears that the OP was already setting them via attributes and this mod removed them. Seems reasonable to at least keep attributes the developer intended, even if they aren't strictly necessary for this specific image on Chrome, no?