I'm trying to figure out the getSrcset() method, going by the docs here.

When I try it using the code in that example (I modified to account for a Matrix field but other than that it is the code below), the results aren't what I'd expect. It takes the asset and INCREASES the sizes; what I would expect is the uploaded asset is considered the maximum resolution, and it is DECREASED from there.

Here is the code from that example page:

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

Basically I can't figure out how to tell it to scale down, not up. I'm also not clear on what that first line is doing (width: 300, height:300) because it doesn't set my images to those sizes.

Edit Just to clarify, I know you can pass in actual sizes instead of x-descriptors, but what I can't figure out is how you can use the x-descriptors without ruining the image by scaling it up, which defeats the whole point of serving high-res images.

Update I ended up just using Image Transforms, but I'd still be curious to hear if I was using the getSrcset() wrong and if there is a way to scale down instead of up.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.