[Support request] How to Put a Small Size Featured Image on Mobile Posts and Pages

[Bijaya]

I am using 1024X512 px images for PC on post and page featured images.

Here is the code which loading on mobile post pages for images

<img width="768" height="384" src="https://chickenjournal.com/wp-content/uploads/2021/04/Mealworms-for-Chicke…" class="ss-on-media-img attachment-medium_large size-medium_large" alt="Mealworms for Chickens: Benefits, Raising & Feeding Guide" loading="lazy" itemprop="image" srcset="https://chickenjournal.com/wp-content/uploads/2021/04/Mealworms-for-Chicke…" sizes="(max-width: 768px) 100vw, 768px" ezimgfmt="rs rscb12 src ng ngcb12 srcset">

Its increasing my LCP above 5.5s

When I am visiting my mobile pages , I see that is looking small but loading the same size i.e 1024X512 or 768X384 size image on mobile pages.

Do you have any code or setup so that my mobile posts and pages show only 300px width featured images.

See this issue – https://prnt.sc/15rrtbx

[Elvin]

Hi there,

The theme doesn’t do any image handling/serving. WordPress Core is in charge of this.

Normally, WordPress generates srcsets for the img tag but sometimes it’s not enough so the next thing to do is to register new image sizes to fit different viewports.

There are a few things to check:
– Inspect the size of the image’s container on different viewports. Take note of these sizes(the width at least). You’ll need to register new image sizes for these viewports.
– Registering new image sizes for the widths of the image sizes for each viewport you’ve listed is done through this function. https://developer.wordpress.org/reference/functions/add_image_size/
– After successfully registering these new image sizes, you’ll need to generate the image sizes. Regenerate Thumbnails plugin can do that for you.

After doing this, when you inspect your page, you should see more srcsets. This means your site has more options of which image size to serve depending on the viewport. 🙂

[Author]

Posts