I’ll do you one better! Just added a new getSrcset() asset method, for Craft 3.5, which takes an array of srcset sizes (100w, 2x, etc.), and returns a srcset attribute value with the transform URLs combined with the given srcset sizes.

{% do asset.setTransform({ width: 300, height: 300 }) %}
{{ tag('img', {
    src: asset.url,
    width: asset.width,
    height: asset.height,
    srcset: asset.getSrcset(['1x', '1.5x', '2x', '3x']),
    alt: asset.title,
}) }}

The getImg() method also now accepts a sizes argument, so you’d get the same output as the above code by doing:

{{ asset.getImg({ width: 300, height: 300 }, ['1x', '1.5x', '2x', '3x']) }}

@brandonkelly Very nice, going to be a real time saver.

How would eager loading play into this? We currently have a custom module to handle srcset that returns a load of transform urls but the number of db queries ballons once we start having ~ 6 sizes per image. We've never figured out how to eager load as we don't have the actual transform object in the tempate, just the srcset string.

Nice!

@rynpsc Good question. Previously you would have had to manually specify each of the resulting transforms. Going with the previous example (300x300 @ 1x, 1.5x, 2x, and 3x), that would look like this:

{% set assets = entry.myAssetsField
    .withTransforms([
        {width: 300, height: 300},
        {width: 450, height: 450},
        {width: 600, height: 600},
        {width: 900, height: 900},
    ])
    .all() %}

I just pushed a new commit (7d97863 ) that brings srcset-style sizes to the withTransforms param though, so that can now be simplified to:

{% set assets = entry.myAssetsField
    .withTransforms([{width: 300, height: 300}, '1.5x', '2x', '3x'])
    .all() %}

Note that you still must start with a normal transform definition; otherwise the param will have no idea what to anchor the width/height on for “1.5x”, etc.

Putting it all together, here’s a way you can keep your template DRY:

{% set baseTransform = {width: 300, height: 300} %}
{% set srcsetSizes = ['1.5x', '2x', '3x'] %}

{% set assets = entry.myAssetsField
    .withTransforms([baseTransform]|merge(srcsetSizes))
    .all() %}

{% for asset in assets %}
    {{ asset.getImg(baseTransform, srcsetSizes) }}
{% endfor %}

@brandonkelly This is rad. We usually lower the quality on high res (retina) images for performance reasons. This way you get higher quality images without much of an increase in file size. I wonder if it might make sense to be able to pass in quality settings for each srcset option.

@brandonkelly
I tested this today and noticed something.

Let's say we have an image that is 500x500. We request a transform of 200x200, with sizes 1x, 2x, 3x. This means we will end up with three transforms - 200x200, 400x400 and 600x600. The last transform is larger than original image, which means that image was upscaled. Even if upscaleImages setting is set to false.

Maybe there should be some possibility of preventing that? So in that case the last transform would become 500x500 - original size of image.

@piotrpog just posted a new issue about that: #6530

@brandonkelly Finally got around to checking this out, but ran into a small issue with my template (that I think I got resolved).

I am setting up an image template that will utilize lazysizes, so I need to use getSrcset() to populate a data-srcset image attribute.

I was initially having trouble with the srcset not utilizing my base transform's height. It seems that applying my base transform ({% do image.setTransform(baseTransform) %}) to the asset before outputting getSrcset(transformSteps) resolved my issue.

Am I doing this right? If this method is required for outputting the proper srcset, it might be nice if the docs noted that in some way.

@jsunsawyer Yes that’s the way to do it. We demonstrate it here: https://craftcms.com/docs/3.x/image-transforms.html#generating-srcset-sizes