Google speed index: specify height and width of image

Hi Henk,

Can you try add this PHP snippet to your site?

add_filter( 'generate_mobile_header_logo_output', function( $output ) {
    if ( ! function_exists( 'generate_menu_plus_get_defaults' ) ) {
        return $output;
    }

    $settings = wp_parse_args(
        get_option( 'generate_menu_plus_settings', array() ),
        generate_menu_plus_get_defaults()
    );

    return sprintf(
        '<div class="site-logo mobile-header-logo">
            <a href="%1$s" title="%2$s" rel="home">
                <img src="%3$s" width="0" height="0" alt="%4$s" />
            </a>
        </div>',
        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_mobile_header_logo', $settings['mobile_header_logo'] ) ),
        esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
    );
});

Adding PHP: https://docs.generatepress.com/article/adding-php/

That's strange. This issue should've been fixed in the recent version.

Can you confirm that you are using the latest version of GP Premium?
https://docs.generatepress.com/article/generatepress-and-gp-premium/

Hi Yin,

I added the code functions.php.

But no success. See the private area for the URL.

Hi Leo,

Yes I have the latest versions:
GenerateBlocks
Version 1.4.0 | By Tom Usborne | View details

GenerateBlocks Pro adds more great features to GenerateBlocks without sacrificing usability or performance.
Version 1.1.1 | By Tom Usborne | View details

The entire collection of GeneratePress premium modules.
Version 2.1.1 | By Tom Usborne | View details

If needed I can provide you login information.

Can you remove the mobile header logo from the header element？

Let me know :)

Hi Yin,

I didn't remove the logo, but changed "Mobile header" to Off.
It works!

What should I do with the added code in functions.php? Keep it in place or remove it?
Can you tell me what I did by turning this off? Because everything is still in place in mobile mode.

If you are no longer using mobile header, then you can remove the PHP code :)

Hi Yin,

After some testing on mobile, I saw that I need the mobile header. Else, I don't have a logo.
So I turned the mobile header back on, but now the original problem is back: "please specify heigth en width of images" in Google speed index.

I also kept the code, you provided earlier, in the functions.php.

Any idea for something else we could try?

Hi there,

the logo image is being served by Shortpixel. Can you tell shortpixel to not optimize the logo image ?

Hi Dave,

I excluded the logo in Shortpixel, still no success. I used both the classes and URL of the image.
See also the screenshot in the private area.
Off course, Google speed index gives now more warnings regarding the image.

If you need to have a look or would try something out in the back-end, I included the credentials.

Can you try this:

Replace the PHP code I previously provided with the new code:

add_filter( 'generate_mobile_header_logo_output', function( $output ) {
    if ( ! function_exists( 'generate_menu_plus_get_defaults' ) ) {
        return $output;
    }

    $settings = wp_parse_args(
        get_option( 'generate_menu_plus_settings', array() ),
        generate_menu_plus_get_defaults()
    );

	return  sprintf(
        '<div class="site-logo mobile-header-logo">
            <a href="%1$s" title="%2$s" rel="home">
                <img src="%3$s" width="184" height="50" alt="%4$s" />
            </a>
        </div>',
        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_mobile_header_logo', $settings['mobile_header_logo']) ),
        esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
    );
	if ( 'title' === GeneratePress_Elements_Helper::does_option_exist( 'mobile-header-branding' ) ) {
	 apply_filters( 'generate_mobile_header_logo',  $options['mobile_logo'] );
}
});

Let me know if this helps :)

Hi Yin,

This is better.
No messages about images format and specify explicit width and height.
See below.

Test round 1 (no changes):
Settings in Autoptimize:
* Lazy load exclusions: "site-logo mobile-header-logo"
* Lazy-load from nth image: 2.
Got the error: "Give images the right format" and "give images explicit width and height".

Round 2 (changes in functions.php and header logo removed):
Settings in Autoptimize:
* Lazy load exclusions: "site-logo mobile-header-logo"
* Lazy-load from nth image: 2.
No errors.

Can you tell me the next step?
Because we hard-coded the logo inside functions.php for testing purposes, I assume.

I updated the code here: https://generatepress.com/forums/topic/google-speed-index-specify-height-and-width-of-image/#post-2080525

Now you can upload a mobile header logo in the header element.

Give it a try :)

Hi Yin,

When I open the website on a phone, to test the responsive mode with the new code, the logo (upper left corner) is squeezed.
See the screenshot I attached.
https://ibb.co/ZdPC3wd

I try to find the reason but can't find it.
Hopefully, you can.