[Support request] How do I load responsive featured Image?

[Gulshan]

Hello!

How to load responsive featured image?
Right now, it load full size img that’s causing high LCP.

Thanks & Regards,
Gulshan

[Gulshan]

Is there something unclear?

[David]

Hi there,

apologies that your original topic was not responded to.
For that layout your archive only needs a maximum 300px wide image, so instead of defining the Width in these settings:

https://docs.generatepress.com/article/adjusting-the-featured-images/

Simply select the Medium Attachment size.

[Gulshan]

Hello David,
Thanks for your response.

Setting Medium doesn’t help. As I have different layout based on screen resolutions.

Current Settings

My requirement is

1. Mobile & Tablet: Serve Thumbnail size for screen resolution under 1024px.
2. Anything else: Serve Medium size for anything above 1024px.

In other words –

function Media_Attachment_Size( $max_width ) {
   if ( $max_width <= 1024 ) {
    // return 'Thumbnail' (Smallest one as per my settings )
    }
    // return 'Medium'
}

What I tried?

Using switcher doesn’t let me set conditional Media Attachment Size

Ref: Video

Thanks

[David]

Unfortunately it does not work like that.
If you select just the Medium attachment WP will output the img src-set with the medium size and any smaller size ( ie. thumbnail ). The browser will then select the best image src for the display.

[Gulshan]

In the mobile screen,

I selected Thumbnail and tested in mobile, it looks good, I want that. On desktop, it looks too small that is something I don’t like and a reason why I need to serve conditional featured image size.

Choosing “medium” works good at both but in mobile knowingly there is file size is bigger.
Thus, it cause issue in PageSpeed insight with message ‘Properly size images’.

[David]

GP uses the WP core function for outputting src-set images. Unfortunately that function makes assumes the the image will fill the full width of the viewport. Without custom development to replace that core function there isn’t much we can do about that.

[Author]

Posts