Changing Image transforms for different media queries

Question

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?

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:

<picture>
  <source 
    srcset="{{ image.url('gridLarge')"
    media="(min-width: 1000px)"
  />
  <img 
    src="{{ image.url('gridSmall') }}" 
    alt="Image of a thing"
  />
</picture>