Sharp, responsive images that render well on both mobile and desktop

Since pretty much all of today's mobile devices have high pixel density screens, you need to use "retina" images for your media to look sharp on any screen. This is done by using images that are usually twice (or even more!) the intended display size.

However, some email clients - specifically Outlook for desktop - don't like images that are larger than their container, and will blow up your design if you don't use a fixed width.

Acorn uses the fluid retina image technique, so that your images display well across the board, even in Outlook.

Fluid Retina Images

Not only does this ensure proper image sizing in all email clients, but your mobile images will not expand beyond their natural width.

Simply use the width="" attribute on an <img> tag, to set a fixed width that is half the natural image width. This is the intended display width, and will work in all email clients, including Outlook.

On mobile, Acorn will ensure your image scales proportionally and doesn't exceed its container width:

<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
  <tr>
    <td class="spacer py-sm-8" height="32"></td>
  </tr>
  <tr>
    <td style="padding: 0 24px;">
      <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
        <tr>
          <td class="col" align="center" width="260" style="padding: 0 8px;">
            <h2 style="font-weight: 300;">Fluid Retina</h2>
            <img src="https://picsum.photos/400/400?image=631" alt="Image description" width="200">
          </td>
          <td class="col" align="center" width="260" style="padding: 0 8px;">
            <h2 style="font-weight: 300;">Non-retina</h2>
            <img src="https://picsum.photos/200/200?image=631" alt="Image description" width="200">
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td class="spacer py-sm-16" height="32"></td>
  </tr>
</table>

Note: the example is using a 400x400 image for retina, and a 200x200 one for non-retina. The difference is best viewed on a high-density display, like on a smartphone.

Mobile Full Width

Sometimes, you may need to have a retina image expand to 100% of its container width on mobile.

Since Acorn prevents this by default (through max-width: 100%;), you can use the full-width-sm utility class on the <img> tag, to force it to full width on mobile:

<img class="full-width-sm" src="..." alt="..." width="123">

Hiding Images on Desktop

While our hide-sm utility class is enough to hide an image in mobile email clients, things get a bit more complicated on desktop. You can hide images on desktop and only show them on mobile just like we do with the hamburger navigation icon:

<!--[if !mso 9]><!-->
  <img class="show-sm" src="https://picsum.photos/600/400?image=1025" width="600" style="display: none; max-height: 0;">
<!--<![endif]-->

The inline CSS and Outlook conditional comment will hide the image for desktop email clients, while the show-sm class will make it visible on mobile devices.