<p>This is absolutely possible using plain old HTML, and media queries within a <code>&lt;picture&gt;</code> tag.</p>
<p>Within the tag you set your base image <code>&lt;img&gt;</code> to the url of the smallest size, and a <code>&lt;source&gt;</code> with a media query, like this:</p>
<pre><code>&lt;picture&gt;
  &lt;source 
    srcset=&quot;{{ image.url('gridLarge')&quot;
    media=&quot;(min-width: 1000px)&quot;
  /&gt;
  &lt;img 
    src=&quot;{{ image.url('gridSmall') }}&quot; 
    alt=&quot;Image of a thing&quot;
  /&gt;
&lt;/picture&gt;
</code></pre>

CC BY-SA 4.0
2020-09-22T12:12:52.327Z
Thank you, dmatthams. This was the solution I ended up using. I had meant to post an answer here.
Adam
CC BY-SA 4.0
2020-09-22T11:22:32.743Z
2020-09-22T11:22:32.743Z
dmatthams
<p>Is it possible to set different image transforms for different media queries?</p>
<p>I have a grid layout containing 1 large image and four smaller images on large screens. I have created two image transforms; one called <code>gridSmall</code> and another called <code>gridLarge</code>.</p>
<p>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 <code>gridLarge</code> to <code>gridSmall</code> to match the other four images. Is this possible to do without a third party plugin?</p>

<craft3><image-transforms><responsive-images>
Changing Image transforms for different media queries
# Changing Image transforms for different media queries

(Asked by: username_0 on 2020-09-15)

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?

**Tags:** craft3, image-transforms, responsive-images

---

## 1 answers

### Answer by username_1 on 2020-09-22. Score: 2 | Accepted answer

This is absolutely possible using plain old HTML, and media queries within a  tag.
Within the tag you set your base image  to the url of the smallest size, and a  with a media query, like this:

> **Comments:**
> **username_0**: Thank you, dmatthams. This was the solution I ended up using. I had meant to post an answer here.  

---

