- This topic has 6 replies, 2 voices, and was last updated 3 years, 2 months ago by Tom.
March 6, 2018 at 5:11 pm #513398Tanya
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
<source media=”(min-width: 900px)” srcset=[122 size=large]>
<source media=”(min-width: 465px)” srcset=[122 size=medium_large]>
</picture>GP Premium 1.5.6March 6, 2018 at 8:47 pm #513505TomLead DeveloperLead Developer
WordPress featured images should be responsive by default – they use srcset. Is that not happening on your site?
Let me know 🙂March 7, 2018 at 3:08 pm #514247Tanya
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.March 7, 2018 at 8:45 pm #514358TomLead DeveloperLead Developer
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.March 8, 2018 at 12:42 pm #515048Tanya
Optimizilla is an awesome suggestion. I was able to significantly shrink header image sizes without loosing in quality.
Thanks!March 8, 2018 at 12:43 pm #515049Tanya
resolving the topicMarch 8, 2018 at 8:33 pm #515264
- You must be logged in to reply to this topic.