[Resolved] Adapt logo size for mobile

[Manuela]

Hello

I have an image that shows in the header globally. As recommended on some other topic, I did this by adding the image as the site logo.

However, when in mobile, it doesn’t load a smaller-sized version of the image but still the big version with the bigger file size instead, so then google’s PageSpeed Insights names that as an issue.
How can I make the website load a smaller-sized version of the “logo”-image on mobile?

Kind regards

[David]

Hi there,

could you link me to your site? You can share the link privately by editing your original topic and using the Site URL field

[Manuela]

Done 🙂

[David]

Try this function:

add_filter( 'generate_logo', function( $logo ) {
   // Return our mobile logo URL
  if ( wp_is_mobile() ) {
	  return 'URL TO MOBILE LOGO';
  }

  // Otherwise, return our default logo
  return $logo; 
} );

Add the URL to your mobile logo.
NOTE: this won’t want swap the image when resizing the browser only when its opened on a mobile browser.

[Manuela]

That works, thank you!

[David]

You’re welcome

[Author]

Posts