Really responsive images with srcset & SIZES. Blog columns

[Rafał]

Hi there!
Please help! I can’t sleep because of this imperfection of my favorite WP theme…
How do you think about implementing full support of sizes attribute?

When we put hi res featured images, which are fine on high density large screens (on single posts), they become serious performance mistakes especially in column layout of blog.
BTW: WP Show Posts does not make any difference on that issue.

By now we may have quite abundant srcset, but it remains useless along with present scanty sizes attribute, which does not take into account neither any breakpoints or any theme settings as max width of the main container (without sidebar), or horizontal padding, or column gaps.

[Tom]

Hi there,

By default, GP uses core WP functionality to display featured images, which includes all srcset images.

However, if you’re using the current resizing options in the Customizer, it only includes that one image. We’re working on a solution for that in GPP 1.9.

It would definitely be cool to add some specific sizing options for when posts are in columns. I’ll look into that 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Rafał]

Great! Thank you! I’m eagerly waiting…
Good luck!

[Tom]

Thanks! I appreciate the suggestion 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[George]

Hi, sorry for opening up this thread again, has it already been implemented in 1.9?

[Tom]

It’s not, but we’re ditching the current resizer in 1.10, so the standard srcset values should come back.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Dan]

Hi Tom

Just to add my thoughts to this – I believe (though may be wrong) that the srcset is not the issue with regard to the images being served when the blog is more than one column – it is the sizes attribute. This was the issue identified more eloquently than I am describing in this post – https://generatepress.com/forums/topic/responsive-images/.

This still appears to manifest – for example I have a two column set up where on large screens the thumbnail true width is 390px wide but the sizes attribute states it is 896px wide – sizes=”(max-width: 896px) 100vw, 896px” and hence a far too large srcset image is served.

As you identified in the post I linked to above I suspect this is no easy fix and more to do with how badly WordPress core logic handles the sizes attribute but it would be great to see you work your genius and find a solution to add to what is already an incredible theme.

[Tom]

It’s kind of an interesting issue. We could do something where srcset/sizes are disabled when columns are active, but that would be a shame for when those attributes are useful.

We could also possibly change the sizes if columns are active, but I’m not sure there’s a way to calculate the ideal widths we’d want.

I’ll assign this to myself and think on it 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Dan]

Thanks Tom

Agree that the first solution wouldn’t improve the situation.

I guess the logic in the second solution would need to consider factors like container width, content spacing and number of columns to give a relatively accurate number at larger screen sizes….but am getting way beyond my capability so will leave it your more than capable hands.

Thank you as ever for such incredible support.

[Tom]

Yes, all of those factors would need to be considered. Not sure it’s possible, but I’ll play with it 🙂

Thanks!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[George]

Yeah, interesting.

I have to say, it sounds complicated but from my limited Javascript knowledge, I believe it could be possible unless I am missing something. All those mentioned elements can be manipulated in the DOM including computed values and various sizes can be conditionally applied. And, as Dan mentioned, relatively accurate numbers should suffice.

[Tom]

Javascript is an option, but it’s not great performance-wise. If you’re making all of those calculations once the page is loaded, it will make a difference in your speed scores.

It might just be possible to do some math on the PHP side of things. Even if the number was approximate (container width / number of columns), it would be a better result than it is now.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[George]

Aha, ok, good to know!

Thanks, Tom.

[Author]

Posts