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

Home Forums Support Serve optimised page hero images on smaller screens

  • This topic has 4 replies, 3 voices, and was last updated 1 month ago by David.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1415391
    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

    #1415700
    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.

    #1415758
    David
    Staff
    Customer Support

    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.

    #1416936
    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

    #1417242
    David
    Staff
    Customer Support

    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/

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.