Archived topic
Different Featured Image Sizes for Desktop, mobile, tablet
4 replies · Started by Leonidas on June 1, 2022
HI,
I'm using GP Premium. The theme uses by default the same featured image (for post pages) for desktops, tablets & mobiles.
This causes a bad score to "Largest Contentful Paint". I try to improve my blog's PageSpeed score. It's only 46 for mobile (91 for desktop).
Is it possible to load different sizes of the same image, depending on the device?
In the Page Hero Element, I tried to select different image sizes (Backgrounds/Image_Size property) for each device. For instance:
-full for Desktop
-medium for mobile
It didn't work. What am I missing?
Thank you!
Is it possible to load different sizes of the same image, depending on the device?
This is what WP does by default with its, GP doesn't have special settings for this.
For more info: https://developer.wordpress.org/apis/handbook/responsive-images/
Can you link me to your site?
In the Page Hero Element, I tried to select different image sizes (Backgrounds/Image_Size property) for each device.
Are you referring the Advanced background feature of GB pro?
https://docs.generateblocks.com/article/advanced-backgrounds/
Let me know!
Thank you for your quick response.
The "key" for me is that the browser takes care of loading the appropriate image. This process isn't always efficient, though.
I'd like a server-sided solution, using for instance add_filter() & wp_is_mobile().
As mentioned in the following topics, it's a bit tricky.
https://generatepress.com/forums/topic/how-do-i-load-srcset-featured-image-for-mobile-and-desktop/
https://generatepress.com/forums/topic/setting-a-unique-mobile-hero-element-and-non-mobile-hero-element-for-each-page/
What size in kb is your image? Also could you use a plugin to convert images to webp format to help with speed?
Hi Leonidas,
Unfortunately, you’ll need customization to achieve as such, and the level for this type of customization would be out of our scope of support.
As mentioned by David, GP uses the WP core function for outputting src-set images.
Hope you understand.