[Resolved] Responsive Featured Image

[Tanya]

Hi,

I have set Featured Images on each page of my website.
I’d like to ensure these images are responsive.

Here is the code I’m using for some other images on the website. Where would I place similar code for the featured image? Thank you
<picture>
<source media=”(min-width: 900px)” srcset=[122 size=large]>
<source media=”(min-width: 465px)” srcset=[122 size=medium_large]>

</picture>

[Tom]

Hi Tanya,

WordPress featured images should be responsive by default – they use srcset. Is that not happening on your site?

Let me know 🙂

[Tanya]

Hi Tom,
I am looking at Chrome Developer Tools – Network view.

The top picture was taken when running in full screen mode. As you can see, images where I explicitly use srcset (in yellow) use large size (1024 width) and size in KB is reflected as large. See img_GM_11 (in red). This is the featured image. It is 696KB.

The bottom picture was taken when running within Iphone7 emulation. Images in yellow are smaller size, but image in red “img_GM_11” my header is still 696 KB.

I would expect the browser choosing a smaller version of the featured image for iPhone7.

[Tom]

It absolutely should. Is it possible that Developer Tools is simply picking up the image, even though the browser will use the smaller image on mobile etc..? Perhaps this will help?: https://stackoverflow.com/questions/30900173/is-it-possible-to-see-which-srcset-image-a-browser-is-using-with-browser-develop

I also suggest using a tool like Optimizilla (http://optimizilla.com/) which should reduce that file size a lot.

[Tanya]

Thanks Tom.

Optimizilla is an awesome suggestion. I was able to significantly shrink header image sizes without loosing in quality.

Thanks!

[Tanya]

resolving the topic

[Tom]

Glad I could help! 🙂

[Author]

Posts