Does new image sizes value, “auto”, work with TxP’s new image sizing?

agovella · Yesterday 20:15:09

The sizes attribute in Image elements now accepts “auto”.

How does that work with TxP’s new image resizing capability?

https://piccalil.li/blog/the-end-of-responsive-images/

Bloke · Yesterday 21:23:43

It won’t make much difference and will play seamlessly. The automatic thumbs are simply there to make it easier to generate thumbnails without needing to specify sizes beforehand or pre-render them. If an image at the specified size doesn’t exist, it’ll be created and cached.

You still need to tell the browser which image widths you want to be available, as options to choose from. Using sizes="auto" just means the browser will pick one of the images, instead of your media queries or prescriptive size-based decisions in the srcset doing so.

So, you tell the browser which sizes you want to be made available. The browser chooses one, fetches it. If it exists already, happy days. If not, Txp will generate it, cache it and send it.

jakob · Yesterday 21:28:47

agovella wrote #343215:

The sizes attribute in Image elements now accepts “auto”.

How does that work with TxP’s new image resizing capability?

https://piccalil.li/blog/the-end-of-responsive-images/

That was quite a lot to wade through but I learned something after reaching “The sizes dilemma” in that article. That does make a painful process easier.*

The image resizing capability in Textpattern is only relevant for srcset. Just like Mat writes in that article, Textpattern can’t predict how the images will show in the page layout, so defining the sizes attribute has always been a manual affair … until now.

Just use txp to generate a series of different image sizes in your srcset attribute and then use loading="lazy" sizes="auto" or sizes="auto, {your manual specs here}" as you want.

*BTW: Does anyone know the tooling for finding out the ideal responsive image sizes that he talks about in that article? I’ve mostly done it manually by inspecting the image sizes at the various from-to viewport boundaries and then approximating a value that works roughly for both.

phiw13 · Today 00:11:50

jakob wrote #343217:

That was quite a lot to wade through but I learned something after reaching “The sizes dilemma” in that article. That does make a painful process easier.*

yeah…that. In a way that additional auto value for sizes is an admission that the whole construct (srcset=img400.png 400w,img800.png 800w sizes=value,other-value) is kind of a failure and overly complicated.

Just use txp to generate a series of different image sizes in your srcset attribute and then use loading="lazy" sizes="auto" or sizes="auto, {your manual specs here}" as you want.

*BTW: Does anyone know the tooling for finding out the ideal responsive image sizes that he talks about in that article? I’ve mostly done it manually by inspecting the image sizes at the various from-to viewport boundaries and then approximating a value that works roughly for both.

I used to have a bookmarklet that claimed to calculate those values, but it was more miss and hit. Like you I go the manual route and approximate the values.

And then you realise you include smallish size images for small viewport width until you realise the UA actually request an image 2,3 times that pixel width size, as the rendering surface is a high-density screen (most smartphones have 3x screen, or more).

PS, +1 for using sizes="auto, {your manual specs here}", for older user agents and browser that do not support the auto keyword.

jakob · Today 08:08:40

phiw13 wrote #343218:

And then you realise you include smallish size images for small viewport width until you realise the UA actually request an image 2,3 times that pixel width size, as the rendering surface is a high-density screen (most smartphones have 3x screen, or more).

I suppose it doesn’t matter all that much if you specify small image sizes as they won’t be loaded if not needed. It’s ‘only’ space on the server that’s being taken up if they’re rarely used. You could be concerned about data server wastage, but in the grand scheme of things (CDNs around the world), it’s nothing … especially when it’s the small images.

Like you I go the manual route and approximate the values.

Interesting. Thanks for sharing. Do (any of) you have a particular approach for handling the sizes attribute when working with shortcodes?

I use a txp:variable to hold the value of the sizes attributes and include that in a txp::figure shortcode (or slider, gallery, etc.). I create a site-wide global version of that variable for the default case and overwrite the value of the variable as needed on specific page templates or forms where it needs to be specific to the use case. That way at least my shortcode isn’t clogged up with if conditionals, but it still feels to me like there are too many parts to this, i.e. it’s not very portable from one project to the next.

One last question: up until the introduction of sizes="auto" (plus loading="lazy"), things like carousels always presented a problem for the sizes variable, because the image widths can vary but the height remains the same. I’ve never been able to figure out a sensible way of tackling this, and have erred on the side of a reasonably wide image in the carousel … which, of course, means that narrow images in the carousel get oversized images (which pagespeed then flags as being suboptimal). As far as I know, there’s not a way of specifying image height in the sizes attribute, right?

Textpattern CMS

Textpattern CMS support forum

#1 Yesterday 20:15:09