title: Gatsby-Image: Different images for Mobile / Desktop?
body: <p>I want to render my <code>gatsby-image</code> conditionally: I want to have different images for mobile &amp; desktop. So I need to swap them out.</p>
  
  <p>Right now I am doing this:</p>
  
  <pre><code>&lt;Desktop&gt;
    {heroImage &amp;&amp; (
        &lt;MyGatsbyImage
          img={heroImage}
        /&gt;
    )}
  &lt;/Desktop&gt;
  &lt;Mobile&gt;
    {heroImageXS &amp;&amp; (
        &lt;MyGatsbyImage
          img={heroImageXS}
        /&gt;
    )}
  &lt;/Mobile&gt;
  </code></pre>
  
  <p>where <code>&lt;Desktop&gt;</code> &amp; <code>&lt;Mobile&gt;</code> are styled components with media-queries that have <code>display: block / display:none</code> depending on the viewport.</p>
  
  <p><em>However: Is this the most effective solution here? Is my solution always loading both images in the background?</em></p>
  
  <p>Without <code>gatsby-image</code>, I would do is this:</p>
  
  <pre><code>&lt;picture&gt;
     &lt;source 
        media="(min-width: 650px)"
        srcset="images/img1.png"&gt;
     &lt;source 
        media="(min-width: 465px)"
        srcset="images/img2.png"&gt;
     &lt;img src="images/img-default.png" 
     alt="a cute kitten"&gt;
  &lt;/picture&gt;
  </code></pre>
  
  <p>...but that would mean to not use <code>gatsby-image</code> here - which I do want to use.</p>