How to resize featured image on mobile

Hi there,

you can try adding this PHP Snippet which will 'try to force' the browser to use 300px image on smaller screens:

function db_modify_srcset_sizes($sizes, $size) {
	return '(max-width: 420px) 300px, (min-width: 421px) 768px, (min-width: 769px) 1024px, 100vw';
}
add_filter('wp_calculate_image_sizes', 'db_modify_srcset_sizes', 10 , 2);

Hey David, thanks for your reply

That did not work I am afraid.

Is there a way to move the featured image below the fold on mobile only?

Where did you add the code ? And is it still added ?

Hey David,

I added it as a PHP Snippet on the front end. I have now removed it.

After additional reading, I see in Page Speed Insights that WordPress 5.5 is Lazy Loading the featured image

I am pretty sure it's affecting my LCP as it's above the fold.

Is there a hook or snippet I can use to skip-lazy just on the featured image?

Am running GP Premium

Cheers!

the 5.5 update introduced Browser native lazy loading - which supporting browsers will automatically ignore on images that are above the fold.

If you want to add back that code so i can see what its ( not ) doing

Hey David

The problem is Google Page Speed Insights itself sees the above the fold feature image as lazy-loaded.

That's the test I am trying to pass as it impacts my LCP so it would be good to be able to disable the lazy load of the featured image that Wp 5.5 is introducing.

(Need my LCP to score 1.9 or less so when I re-enable Google Tag Manager I still get a passing score under 2.5)

I have re-enabled the snippet, it's running 'Only run on site front-end'

Is that correct?

Still looks large on mobile

Let me know if you need me to do anything

Thanks for all your help!

Native Browser lazy loading ( which is what WP enables ) works differently to a plugin. I don't think its required. But you can try the following PHP Snippet:

function db_disable_wp_lazy_single_featured( $default, $tag_name, $context) {
    if ( is_single() && 'img' === $tag_name && 'wp_get_attachment_image' === $context ) {
        return false;
    }
    return $default;
}
add_filter( 'wp_lazy_loading_enabled', 'db_disable_wp_lazy_single_featured', 10, 3);

With this and the other code set it to Run Everywhere. And clear any plugin caches afterwards.

Cheers David

That's closer I think

One issue remains when I check Page Speed Insights

The skip-lazy is also affecting the 2x featured images called by the 'latest posts' hook and also the sidebar image

Do you mean the code i provided above ?
If so - not sure there is much that can be done about that as applies to all wp_attachments