[Resolved] Is it possible to add a srcset to the feature image?

Home Forums Support [Resolved] Is it possible to add a srcset to the feature image?

Home Forums Support Is it possible to add a srcset to the feature image?

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1634574
    Till

    According to google pagespeed insights my LCP for mobile is off the charts. The reason for this, is the not mobile optimised feature image in the theme. A 1600px feature image will be displayed on every type of device, including mobile.

    To my understanding, the feature image does not have a srcset like the other images throughout the post. Would it be possible to add a img srcset to a feature img, so that the feature img is mobile-optimized?

    #1634626
    David
    Staff
    Customer Support

    Hi there,

    your posts are using the Header Element, which places the featured image as the background image, which cannot have src-set applied to it.

    You can use this PHP Snippet to return a different media size:

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

    This will apply to all devices however, so its about choosing a size thats good for Mobile and one that is still fine for Desktop.
    As your header element has a color overlay and text on top you can probably get away with a lower res image.

    #1636871
    Till

    I wouldn’t want to cut down on the desktop quality of the feature image. Would it be possible to have a placeholder load instead of the feature image and lazy load the feature image? This all about reducing the LCP in google pagespeed.

    #1637228
    David
    Staff
    Customer Support

    If its LCP thats the issue then the best option would probably be to preload the image. Elvin provides a how to here:

    https://generatepress.com/forums/topic/i-want-to-get-the-featured-image-url-of-blog-post/#post-1514023

    Use that in combination with the above snippet to request the Full image for the background.

    #1637296
    Till

    elvin posted this piece of code:

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

    Where do I need to add it? Do I need to create an element? Sorry im kind of slow with developer issues?

    #1637331
    Till

    I have implemeneted the following code in the wp-head hook element. Could you please check if I have implemented it correctly on my site. I dont seem to find any differences in the lcp numbers and I cant find the preload tag in the html code with chrome dev.

    <?php
    
    add_action( 'wp_head', function(){
    $featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'full'); 
    echo '<link rel="preload" as="image" href="'.$featured_img_url.'"/>';
    });
    
    add_filter( 'generate_hero_thumbnail_id_size', function() {
        return 'large';
    } );
    
    ?>
    
    #1637459
    David
    Staff
    Customer Support

    Can you clear / disable any caches then i can take a look?

    #1637485
    Till

    Yeah sure, just cleared it!

    #1637639
    Elvin
    Staff
    Customer Support

    Hi there,

    To clarify, are you adding it in on a Hook Element?

    Some parts of code written wasn’t meant to be added on the hook element. Especially the filter part.

    Here’s how to add PHP: https://docs.generatepress.com/article/adding-php/

    You can either use a child theme’s functions.php or the Code Snippets plugin to add that entire piece of snippet.

    If you wish to use the Hook Element for the preload to address the LCP, add this:

    <?php
    $featured_img_url = get_the_post_thumbnail_url(get_the_ID(),’full’);
    echo ‘<link rel=”preload” as=”image” href=”‘.$featured_img_url.'”/>’;
    ?>

    As for David’s code (filter), that should be added within the Code Snippets or Child theme’s functions.php.

    Tip: Since you’re using either Code Snippets plugin or functions.php, you may as well completely paste the entire code on either of them rather than using Hook Element for the other part.

    A wise man once said:
    "Have you cleared your cache?"

    #1637837
    Till

    thanks it seems to have worked!:)

    #1637915
    Elvin
    Staff
    Customer Support

    Nice one. Glad it worked for you. No problem.

    A wise man once said:
    "Have you cleared your cache?"

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