Ensuring your images are consistent and adequately sized will make sure that your recipients see the email you want them to see - not something that is jumbled because of image sizing that aren't 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.
In this article:
Test, Test, Test
Turn Auto Width On
Use Automatic Image Resizing
Think Bigger!
Image & File Size Guidelines
Stay within these recommended dimensions to ensure your images are responsible and load properly.
| Guidelines | Notes | |
|---|---|---|
| File Size | 1MB maximum | Images larger than this may fail to load. Larger images are slow to load. Use image compression software to reduce image sizes if needed. |
| File Type | PNG or JPG | PNGs are best for resolution and transparency, but are larger file sizes. Use JPG if your file is too large to use PNG. Outlook does not support SVG images. |
| Image Dimensions | 600 - 800 pixels | This size is optimal for mobile & desktop devices. |
| Resolution | 72 pixels per inch (PPI) | This PPI will ensure a clear image. A higher PPI is not needed and will slow down load times. |
General Tips
Test, test, test
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 let ContactMonkey do the rest!
Use 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 dimension
Think Bigger!
To contextualize what we mean, let’s look at an email with three content blocks forming one row. 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 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.