[Support request] Serve optimised page hero images on smaller screens

[Bevan]

Hi,

I’m trying to improve my Largest Contentful Paint and looking at the performance of my site I can see that the page hero element is the LCP.

When I am on a mobile device the image that is being used is the desktop version at 2560×1200. Is there a way to have the optimised version of this file?

Thanks,
Bevan

[Longinos]

If you use the image in the html (NOT as a background image) and the image is in the media gallery, you can try this:
1.- Open a new post
2.- Insert a image block
3.- Select the image you use in the page hero
4.- Preview the post
5.- View the html from the preview
6.- Copy the image element. This element has a srcset with imaes for diferent sizes.
7.- Paste it in the html of the page hero.

[David]

Hi there,

i would suggest optimizing the original image. It is 800kb+ – with a desktop optimization app you should be able to get it down to around 100kb without noticeable quality loss.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Bevan]

Hi David,

Thanks for the response.

I’ve played around with the Lightroom export settings and also compressing the image with JPEGmini but I have not been able to compress the image to around 100kb without compromising the image quality. Is there a tool that you can recommend?

I have also tried to cropping the image to 1500 pixels wide as we do not have many users who are on screens wider than this.

Regards,
Bevan

[David]

I use ImageOptim but its Mac only.
Cropping the image should help. And ideally any savings in file size without harming quality is a benifit….

However,

Try adding this PHP Snippet to your site:

add_filter( 'generate_page_hero_background_image_url', function( $image_url, $options ) {
    if ( wp_is_mobile() ) {
        $image_url = get_the_post_thumbnail_url( get_the_ID(), 'large' );
    }

    return $image_url;
}, 10, 2 );

This will swap out the background image IF a mobile device is detected for the large attachment size.

You can if you want register a new size using this function:

https://docs.generatepress.com/article/adding-image-sizes/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Markus]

Hi David,

thanks for your useful PHP-Snippet. It works great on my end. My problem is, that my blog is about photography and I often need full size (1440px) images to let the visitor compare for example details and sharpness of different lenses.

My thought was now to let it on desktop in full size. On mobile I would like to serve the former “full-size” image just in size “large”.

Do you have another PHP Snippet to switch the images on mobile to size “large”? Just like the hero background, but for all other images in the blog post content?

Or do have another solution for my issue?

With kind regards,
Markus

Edit: Just noticed WordPress is doing this by default since version 4.4. I think my comment is not valid anymore.

[David]

Hi there,

you can use this Snippet to set the heros default background image size to Full:

add_filter( 'generate_hero_thumbnail_id_size', function() {
    return 'full';
} );

Then use the above snippet – to replace the image for mobile.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Markus]

Hi David,

thanks for your reply. I added the Code for the page hero image.

Google Pagespeed Insights is now saying: Unable to locate resource (of the photo in L size (1024px). https://developers.google.com/speed/pagespeed/insights/?hl=de&url=https%3A%2F%2Fjournal.markusthoma.com%2Fsony-85mm-1-4-gm-test-review%2F

What can I do? Chrome’s network Tab doesn’t complain.

And another question: Is it possible to tell the browser to load the background image at first? Sometimes it is really far behind in the waterfall diagram. Do you have a snippet for “preloading” the background image of every post’s header? I am using native wordpress lazy loading.

With kind regards,
Markus

Edit: I think I found a solution with the following Code Snippet:

add_action( 'wp_head', function(){
	
	if( is_single() ) {
      	if ( wp_is_mobile() ) {
$featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'large'); 
echo '<link rel="preload" as="image" href="'.$featured_img_url.'"/>';
		}
	else {
	$featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'full'); 
echo '<link rel="preload" as="image" href="'.$featured_img_url.'"/>';
	}
   }
	

	else {
		echo '';
	}
	
		
});

Is this right? Or do you know a better solution? It should only work in Posts.

[David]

That looks good to me – and the results look correct on the front end of the site.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts