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

[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?

[David]

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.

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

[David]

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.

[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?

[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';
} );

?>

[David]

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

[Till]

Yeah sure, just cleared it!

[Elvin]

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.

[Till]

thanks it seems to have worked!:)

[Elvin]

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

[Author]

Posts