Best Practices: Optimizing Images for the Template Builder

How can you ensure that your communications show up correctly to all of your recipients? With companies working remotely, you may have employees viewing your emails on different devices on mobile, desktop and more. As well, images and graphics may change based on the email platform your recipients are using. 

With ContactMonkey’s email template builder, we allow you to create responsive communications with ease. Follow these best practices to make sure your images are formatted correctly.


Tip #1: Think Bigger!

To contextualize what we mean, let’s take a look at a template that has three content blocks forming one row. It looks something like this in the template builder. 

For your desktop recipients, it may show up like this. However, for mobile users, our responsive template will reformat it to show up like this:


For your desktop recipients, it may show up like this. However, for mobile users, our responsive template will reformat it to show up like this:


As you can see, the three content block view automatically readjusts to a single column view that users can scroll through. Because of this, we suggest using high quality images- there is no need to input “thumbnail” size images, as our responsive template builder will resize the graphics to match the users screen- less work for you! For instance, an iphone 6 has retina display, which will blow up images to about 750 px. If you use smaller images, it will stretch out and display blurry, something like this:



 Ideal Mobile Image Size Main Takeaway

The best image size for optimal mobile viewing is 750 px and above. Don’t be afraid to input larger image sizes, our template creator will automatically readjust it. 

How to manually resize images:

Manually adjust in case your graphic resize isn’t up to your specifications. To do this, toggle the automatic image resizing to “off”. 


Note: Image Limitations

SVG images are not supported in Outlook, we recommend sticking to png, jpeg or gif image types.


Tip #2: Compress without compromising quality 


What if your images don’t fit neatly into the 750 px specifications? In thi step by step guide, we will show you best practices to maintain the image quality, while encouraging faster load times. 

 Why does image size matter?

The larger the image, the slower it may load when your recipient opens and downloads the images. This is especially an issue when you have users opening communications on mobile devices, or using a slower internet connection.

Reduce image size using your favourite third party editor

Let’s say we have an image that we is originally 1280*850 pixels. As per best practice we want it to be 750 pixels in width without compromising quality. You can use your own external file editing software ( e.g. Adobe Photoshop). You can also use TinyPNG, which makes a smaller image with the same clarity. After it is a manageable file size you can import your graphics by following these steps.

Header and Footer Tips 

The header image height usually should be smaller than the width (so it's a horizontal image, not a vertical one), because otherwise when viewing email on the phone, it's possible recipients will only see the vertical header image in the first fold - have to scroll to see actual content of the email. We also suggest using a third party vector image editor to ensure a high quality final result.


Tip #3: Let your image auto adjust to the width

We have recommended full size images and compression to avoid pixelation, but what about making sure everything is properly formatted?

As we’ve mentioned, our responsive template builder allows you to drag and drop images into content blocks without additional HTML coding. One option to make your life easier is the “Auto to Width” option. If you follow our first tip, this should already be a part of your template creation process. This feature is useful if you have an image that is smaller than the content block you are inserting into. If auto width is turned off, your final image will look like this:


However, with auto width turned on, your image will automatically re adjust to fill the block. Considering this, we always recommend using a larger image and let ContactMonkey do the rest!

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request



Article is closed for comments.