Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-09-22T12:12:52.327Z
Answers.Text: Thank you, dmatthams. This was the solution I ended up using. I had meant to post an answer here.
Answers.UserDisplayName: Adam
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-09-22T11:22:32.743Z
Answers.LastActivityDate: 2020-09-22T11:22:32.743Z
Answers.UserDisplayName: dmatthams
Body: <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>
  
Tags: <craft3><image-transforms><responsive-images>
Title: Changing Image transforms for different media queries
ThreadText: # 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 `<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>
  
  ```
  
  > **Comments:**
  > **username_0**: Thank you, username_1. This was the solution I ended up using. I had meant to post an answer here.  
  
  ---
  
  