-
Hi,
I have a query loop with three featured images, and using CSS, I am displaying the first featured image as 2/3 width and 100% height and the last two as 1/3 width and 50% height (so stacked on top of each other – you can see the layout in the link below).The images are loaded as 800px each, but for pagespeed reasons, I want to:
1. include srcset with different size files
2. provide different srcset sizes for the first image and the two othersThe problem is, since the template is always the same, I can’t differentiate between the images and modify their srcset/sizes. Is there a way I can add a CSS class to the first image, or grab it in some other way that makes it accessible in a filter?
Or perhaps my thinking is too complicated and you know a better approach.
Thank you!
Best,
Tina -
Hi there,
src-set relies on the browser to make the selection and there are several factors involved including the Device Pixel Ratio ( DPR ) of the screen. And most screens are a DPR of at least 2.0 today.
Simply put if you view a 360px image on a 2.0 DPR screen the browser would ideally want to load a 720px image. And if theres that 800px available its going to use that anyway.
So i would probably leave them all as 800px as the browser will use that anyway
-
Hi David, thanks for your response. Taking that into account, shouldn’t the bigger image then be 1600px and the other two 800px? Then I would still need to set different sizes for them (by sizes I mean the sizes that accompany srcset, about how much vw an image makes up).
-
Answer this – does 800px look ok to you on your desktop screen ?
If it does then theres no need to increase that size. And you now have 1 image size that will look good on desktop / tablet / mobile.If it doesn’t or you want much higher quality desktop images, then let me know.
-
OK this is not answering my question, I’ll investigate this further on my own, thank you still!
-
Sorry for not answering the question.
I went with the “perhaps my thinking is too complicated”When it comes to src-set, in most instances the browser will choose the largest size available to it UNLESS very specific criteria is met. That criterie is defined by the
widthheightand importantlysizeshtml attributes of the image.
And changing those for a specific post in a query loop is not possible at this time without custom development. And there is little performance benefit related to doing this when working with that size of image.Hence my recommendation to use your 800px image for all images in the loop.
-
Thank you! That does answer it 🙂
-
Glad to hear that 🙂
- You must be logged in to reply to this topic.