Ensuring your images are consistent and adequately sized will ensure that your recipients see the email you want them to see and not something jumbled because image sizes were not optimized for different devices. ContactMonkey’s email builder allows you to create responsive communications easily.

Follow these best practices to make sure your images are formatted correctly.

Image & File Size Guidelines

Stay within these recommended dimensions to ensure your images are responsible and load properly.

General Tips

Testing

If you’re not happy about sticking within the 600px width, feel free to experiment a bit. Ensure you run numerous tests across multiple devices, email clients, apps, and browsers. You want it to load correctly on every screen without the need to scroll to see the full image.

Turn Auto Width On

Auto width picks the best size for the image based on a combination of image width and available space in the layout. This feature is helpful if you have an image 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 letting ContactMonkey do the rest!

Use Automatic Image Resizing

This option allows extra customization so your images 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 dimension

Think Bigger!

Let’s look at an email with three content blocks forming one row to contextualize what we mean. For your desktop recipients, it may show up like this:

But 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. 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 user's screen.

Manually Resizing Images

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

Compressing Images

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

Reduce image size using your favorite third-party editor

Let’s say we have an image that was initially 1280*850 pixels. Per best practice, we want it to be 750 pixels in width without compromising quality. You can use 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.