[Resolved] Incorrect image warning for the logo on mobile device

[Gilles]

Hello,
While testing my site https://www.un-jardin-bio.com/ with PageSpeed Insights, for mobile devices, I got an Images displayed in the wrong format warning for my site’s logo (see here: https://i.imgur.com/Tz8JUDc.jpeg ).
According to the test, the proportions are not the same between the original image and the one displayed on a mobile device… However, on my mobile device, these proportions seem correct!
Maybe I made a change somewhere? But I can’t find where…
Or is it the theme? Are adjustments possible?
Thanks for your help.

[David]

Hi there,

if you go to the media library, and select the Logo, what dimensions ( width and height ) does it show for that image ?

[Gilles]

Thank you for your reply.

I just realized that there are different settings in the customization settings?
So I uploaded new logos for each:
– site identity: 230 x 56
– layout / header / header for mobile: 164 x 40
– fixed menu: 164 x 40
But here is the result: https://i.imgur.com/h27xmxn.jpeg

I probably don’t understand something… but what?

[David]

Are you using any plugins / functions that manipulate the image ?
As this for example:

<img width="170" height="58" class="header-image" src="https://www.un-jardin-bio.com/wp-content/uploads/2023/01/logo-blog-jardinier-bio-230x56-2.jpg" alt="Le Blog du Jardinier Bio" title="Le Blog du Jardinier Bio">

the width="170" height="58" and height attributes don’t match those of the image.
And that either means there is something odd with the image, or another function is changing those sizes.

[Gilles]

Ok… I had inserted this code, a long time ago, to not display this other page speed warning: Image elements do not have explicit width and height…

/** Supression avertissement page speed : Les éléments d’image ne possèdent pas de width ni de height explicites*/
add_filter( ‘generate_logo_output’,’tu_logo_atts’, 10, 2 );
function tu_logo_atts( $output, $logo ) {
printf(
‘

‘,
esc_url( apply_filters( ‘generate_logo_href’ , home_url( ‘/’ ) ) ),
esc_attr( apply_filters( ‘generate_logo_title’, get_bloginfo( ‘name’, ‘display’ ) ) ),
esc_url( apply_filters( ‘generate_logo’, $logo ) )
);

I deleted it…
The incorrect format warning is gone… but not the “low res streamed images” warning (and I don’t want to put a logo as big as it says (328×80) on mobile… https://i.imgur.com/JtbuV09.jpeg

[David]

If you don’t want to increase the resolution of that image, then you will have to ignore that opportunity.

[Gilles]

ok, tkanks.

[David]

you’re welcome

[Author]

Posts