Is it possible to set different image transforms for different media queries?

I have a grid layout containing 1 large image and four smaller images on large screens. I have created two image transforms; one called gridSmall and another called gridLarge.

When the screen size is made smaller, all the grid items are arranged in rows of two and ideally I would want them the same size. So therefore I would need the to change the transform of the gridLarge to gridSmall to match the other four images. Is this possible to do without a third party plugin?

1 Answer 1


This is absolutely possible using plain old HTML, and media queries within a <picture> tag.

Within the tag you set your base image <img> to the url of the smallest size, and a <source> with a media query, like this:

    srcset="{{ image.url('gridLarge')"
    media="(min-width: 1000px)"
    src="{{ image.url('gridSmall') }}" 
    alt="Image of a thing"
  • Thank you, dmatthams. This was the solution I ended up using. I had meant to post an answer here.
    – Adam
    Commented Sep 22, 2020 at 12:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.