Skip to main content

Image with automatic resizing

Better Email stores image metadata and can resize images automatically for email output. That makes it easier to render responsive images without manually calculating every dimension yourself.

Prevent Outlook from upscaling images​

Outlook can upscale images when Windows display settings are above 100%. To reduce that risk, use the standard email-safe PixelsPerInch fix in your document setup:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
  <!--[if gte mso 9]><xml>
    <o:OfficeDocumentSettings>
      <o:AllowPNG/>
      <o:PixelsPerInch>96</o:PixelsPerInch>
    </o:OfficeDocumentSettings>
  </xml><![endif]-->
  <title>Better Email Builder</title>

Resizing with custom HTML​

If you want full control over the markup, use resizeImage with the original image URL:

<table width="100%" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td align="center">
      <table cellspacing="0" cellpadding="0" border="0" style="width: 640px;">
        <tr>
          <td align="center">
            <img src="{{ image_settings.image.originalUrl | resizeImage: width: 640, height: image_settings.height, fit: 'cover' }}" height="{{ image_settings.height }}" style="width:640px; display:block; border:0; height:{{ image_settings.height }}px;" />
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Resizing with imgTag​

If you prefer a cleaner Liquid pattern, use imgTag:

<table width="100%" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td align="center">
      <table cellspacing="0" cellpadding="0" border="0" style="width: 640px;">
        <tr>
          <td align="center">
            {{ image_setting.image | imgTag: width: 640, height: image_setting.height, fit: 'cover' }}
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

imgTag is usually the better default when the standard output matches your needs. Use custom HTML when you need tighter control over the final markup.

Choosing between the two​

  • Use imgTag when you want the simplest implementation.
  • Use custom HTML + resizeImage when you need more control over surrounding markup or attributes.

TODO: Add a side-by-side screenshot comparing the custom HTML approach and the imgTag approach in the Template Editor.