Best Practices: Image Editor

Asset_10.png   Asset_9.png  Asset_8.png   

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.

Read on to get some best practices around using our image editor.

  • Ideal Image Size: They should be 800 px in width, the auto width feature will resize your images automatically to fit within the builder. 
  • Large images, wider than the available space, will be set at 100% width and will keep this ratio on mobile, using the entire device display width.
  • Small images, smaller than the available space, will use the image natural size to avoid distortion effects or blurry pics.
  • Don’t edit image size: We make the row as long as your image 
  • Always use high-resolution images: Compress your images for faster downloads on receiving devices
  • Max file size of 1MB for images 
  • Input full size images: our template creator will automatically adjust the size based on the content block it is added to//also allows full resolution
  • Banner/Header/Footer: We recommend 200 px height, 750 px width
  • Same Image Sizes: When inserting a series of images, similar dimensions will create a more cohesive experience

Pro Tip: Toggle Automatic Image Resizing On

Automatic image resizing picks the best size for the image based on a combination of image width and available space in the layout

Automatic Image Resizing

This option allows extra customization, so your images can look their best on both desktop and mobile. Note that the automatic resize image editor applies to the content block, not the actual image   It allows you to:

  • Adjust a logo or graphic without leaving your template builder
  • Use larger images that can auto adjust to high resolution displays
  • Replace images, and have the new image adjust automatically to the content block
  • Smaller images: Will fit as is into the content block
  • Larger images: Will shrink into the content block dimensionCapture.jpg

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:

example_image_desktop.jpg

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:

example_image_mobile.jpg

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:

ScreenShot1628.jpg

 

 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”. 

ScreenShot1633.jpg

Note: Image Limitations

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

 

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 favorite 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.

 

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:

example_image_mobile_adjust_to_width_off.jpg

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!

Have more questions? Submit a request