How does fillTransforms [bool] work?

[StijnCoolen]

When using fillTransform: true with the default fillInterval of 200, and images 600 and 100 (smallest and biggest) I would expect to see a transform array/srcset with 3 values (600, 800 and 1000). However I noticed that only 600 and 100 are included in the srcset. What am I doing wrong?

Example code:

{% set transformedJpeg = craft.imager.transformImage(image, [{ width: 600 }, { width: 1000 }], { ratio: 16/9, fillTransforms: true }) %}
{% set transformedWebp = craft.imager.transformImage(image, [{ width: 600 }, { width: 1000 }], { ratio: 16/9, fillTransforms: true, format: 'webp' }) %}

 <picture>
    <source srcset="{{ transformedWebp | srcset }}" type="image/webp">
    <img srcset="{{ transformedJpeg | srcset }}" src="{{ transformedJpeg[0].url }}" >
</picture>

[aelvan]

Hi,

fillTransform and fillInterval are config settings, so you need to pass them through the fourth parameter of transformImage, try:

{% set transformedJpeg = craft.imager.transformImage(image, [{ width: 600 }, { width: 1000 }], { ratio: 16/9 }, { fillTransforms: true }) %}

Or you could of course set them in the imager-x.php config file to use fill by default. I usually do that, and instead disable it in the few cases where I don't want to fill transforms.

[StijnCoolen]

@aelvan thanks, I totally missed this.. How would I go about combining this specific setting with srcset and sizes, are there any examples available? I feel like it would be the perfect setting for this use-case; let's say that the images in my example are rendered at about 50vw. How would I render the approriate srcset and sizes array so that the browser can pick the right size (at a windowWidth of 360@2x I would suspect the browser to look for an image closest to 360px wide. If I supplied one of 360px , would it pick this one or still the 600px one?

[aelvan]

You'd just do it the way you have, except you need to provide the sizes attribute to indicate what size the image is to be displayed in. Let's say it is 100vw below 750px and 50vw above, you'd just do:

{% set transformedJpeg = craft.imager.transformImage(image, [{ width: 600 }, { width: 1200 }], { ratio: 16/9 }, { fillTransforms: true: fillInterval: 200 }) %}
{% set transformedWebp = craft.imager.transformImage(image, [{ width: 600 }, { width: 1200 }], { ratio: 16/9, format: 'webp' }, { fillTransforms: true: fillInterval: 200 }) %}

 <picture>
    <source sizes="(min-width: 750px) 50vw, 100vw" srcset="{{ transformedWebp | srcset }}" type="image/webp">
    <img sizes="(min-width: 750px) 50vw, 100vw" srcset="{{ transformedJpeg | srcset }}" src="{{ transformedJpeg[0].url }}" >
</picture>

With this, Imager will create transforms for jpg and webp that are 600, 800, 1000, and 1200px wide. The browser will automatically pick the image that's closest (but bigger) than the calculated size. So, let's say you're at a device that's 320px wide and has a pixel density of 2x. Since we're on a device that's smaller than 750px, the browser will assume that the image should be shown at 100vw, ie 320px. The pixel density is 2x, which means it'll pick the smallest image that is bigger than 640px, in this case 800px.

If we're on a laptop with a browser that's 1440px wide, and an old-school "non-retina" screen (ie pixel density 1x), the browser would assume that the image is 50vw, ie 720px, and also pick the 800px image.

I highly recommend this article from waaaay back, still the best explanation of srcset, sizes and that I've read. It gave me that 💡 moment. 😄

[aelvan]

Btw, considering how good the WebP support is these days, I've taken to only generating and providing a single jpeg as a fallback srcset to speed things up.

[StijnCoolen]

Hi @aelvan, your help has been very useful so far. One more related question: how would one combine the above optimizations with the need to art-direct images? https://web.dev/codelab-art-direction/

[aelvan]

Hi,

You'd just continue adding sources that match the different scenarios, for instance:

{% set opts = { fillTransforms: true: fillInterval: 200 } %}
{% set transformedWebp169 = craft.imagerx.transformImage(image, [{ width: 1000 }, { width: 1800 }], { ratio: 16/9, format: 'webp' }, opts) %}
{% set transformedWebp43 = craft.imagerx.transformImage(image, [{ width: 600 }, { width: 1200 }], { ratio: 4/3, format: 'webp' }, opts) %}
{% set transformedJpeg169 = craft.imagerx.transformImage(image, [{ width: 1000 }, { width: 1800 }], { ratio: 16/9 }, opts) %}
{% set transformedJpeg43 = craft.imagerx.transformImage(image, [{ width: 600 }, { width: 1200 }], { ratio: 4/3 }, opts) %}

 <picture>
    <source sizes="(min-width: 750px) 50vw, 100vw" srcset="{{ transformedWebp169 | srcset }}" type="image/webp" media="(min-width: 1200px)">
    <source sizes="(min-width: 750px) 50vw, 100vw" srcset="{{ transformedWebp43 | srcset }}" type="image/webp">
    <source sizes="(min-width: 750px) 50vw, 100vw" srcset="{{ transformedJpeg169 | srcset }}" media="(min-width: 1200px)">
    <img sizes="(min-width: 750px) 50vw, 100vw" srcset="{{ transformedJpeg43 | srcset }}" src="{{ transformedJpeg[0].url }}">
</picture>

The first source that matches the conditions will be picked.
Important to recognise that the media query inside sizes is totally independent of the one in the media attribute. So in this case, we're saying that at 750px the design changes so that the image only takes up 50vw, and then at 1200px, we want to use an image format that is 16:9 instead of 4:3.

Hope this helps!