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/

[Author]

Posts