[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 5 months ago by David.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #1415391


    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?



    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.

    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.


    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.


    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….


    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:


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