Archived topic
Responsive featured images
1 reply · Started by Sam on May 22, 2022
Hi,
Is it possible to have different featured image/size for each css breakpoint/screen resolution? maybe using srcset or something similar?
I prefer not to waste resources and load the full image on small devices. Is that possible ?
Hi there,
by default all images ( <img> HTML not backgrounds ) including the featured image, are output by WordPress with the available src-set sizes.
If thats not the case on your site, share a link to where i can see the issue and id be happy to take a look.
One thing to note about src-set is that the browser factors in the DPR ( Device Pixel Ratio ) when choosing the appropriate size image. And most most mobile devices have DPRs of 2, 3 or 4.
As an example the Moto 4G, which is what Google simulates its mobiles tests on, is a 360px wide device but has a DPR of 3.
So even if you have a 360px wide image the browser will look for a 360 x 3 = 1080px wide image or the nearest available size.
