Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Does new image sizes value, “auto”, work with TxP’s new image sizing?
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/
Offline
Re: Does new image sizes value, “auto”, work with TxP’s new image sizing?
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.
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Hire Txp Builders – finely-crafted code, design and Txp
Offline
Re: Does new image sizes value, “auto”, work with TxP’s new image sizing?
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.
TXP Builders – finely-crafted code, design and txp
Offline