title: Responsive images relating to screen resolution in emails?
body: <p>I am currently using MJML to create responsive emails. The difficulty I am having is not an issue with MJML itself, but more around certain email clients not supporting media queries/styles, and so I am unsure as to how to create an effective way of displaying different images for desktop and mobile view.</p>
  <p>Here is my code so far:</p>
  <pre><code>&lt;mjml&gt;
    &lt;mj-head&gt;
       &lt;mj-style inline=&quot;inline&quot;&gt;
        .show_on_desktop,
        .show_on_desktop-outlook {
          display: none;
        }
  
        .show_on_desktop,
        .show_on_desktop-outlook {
          mso-hide: all;
        }
      &lt;/mj-style&gt;
      &lt;mj-style&gt;
        @media only screen and (min-width:480px) {
          .show_on_desktop {
            display: block !important;
          }
  
          .show_on_mobile,
          .show_on_mobile-outlook {
            display: none !important;
          }
        }
      &lt;/mj-style&gt;
    &lt;/mj-head&gt;
    &lt;mj-body&gt;
  
      &lt;mj-section css-class=&quot;show_on_desktop&quot; padding=&quot;0&quot;&gt;
        &lt;mj-column css-class=&quot;show_on_desktop&quot; padding=&quot;0&quot;&gt;
          &lt;mj-image src=&quot;https://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg&quot; alt=&quot;&quot; padding=&quot;0&quot;&gt;
          &lt;/mj-image&gt;
        &lt;/mj-column&gt;
      &lt;/mj-section&gt;
  
      &lt;mj-section css-class=&quot;show_on_mobile&quot; padding=&quot;0&quot;&gt;
        &lt;mj-column css-class=&quot;show_on_mobile&quot; padding=&quot;0&quot;&gt;
          &lt;mj-image src=&quot;https://beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg&quot; alt=&quot;&quot; padding=&quot;0&quot;&gt;
          &lt;/mj-image&gt;
        &lt;/mj-column&gt;
      &lt;/mj-section&gt;
    &lt;/mj-body&gt;
  &lt;/mjml&gt;
  </code></pre>
  <p>You can try it live here: <a href="https://mjml.io/try-it-live/37hvh_Ss0M7" rel="nofollow noreferrer">https://mjml.io/try-it-live/37hvh_Ss0M7</a></p>