Changing Image transforms for different media queries
This is absolutely possible using plain old HTML, and media queries within a &lt;picture&gt; tag.
Within the tag you set your base image &lt;img&gt; to the url of the smallest size, and a &lt;source&gt; with a media query, like this:
&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;