Skip to main content

Image with automatic resizing

In Better Email, the user can upload any kind of image, and Better will both resize it, and input the correct width and height automatically

Prevent Outlook from upscaling your images​

Outlook will upscale up your images, if the recipient settings is setted to more than 100 DPI. We need to prevent that.

replace your DOCTYPE with this
<!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 using custom html​

<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 using 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>
Here is my favorite image code
<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="Better.png" height="400" style="width:200px; display: block; border: 0; height: 400px;" />
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>