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. 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.
- Ideal Dimensions: 600 to 650 px
600px width is the best image size for email but you have some room to play around
with the height. When setting image height, consider the overall file size in terms of MB
and the amount of copy you plan to include. - Always use high-resolution images
Many people use devices with high-resolution retina displays, so you want your graphics
to be as detailed and crisp as possible. Stick with PNG formatting when possible. This file type is best for retaining resolution and transparency (if that’s what you need). PNG files are
also much larger than JPGs, though, and don’t always work as well for photos. Consider your goals for each email campaign when deciding which file type to use. - Max file size of 1MB for images
Make your file sizes as small as possible without sacrificing image quality. The goal is to ensure that your email loads quickly. Larger images will take longer to load, and your employees may end up clicking away. - Test, test test
If you’re not happy about sticking within the 600px width, feel free to experiment a bit. Just make sure you run plenty of tests across multiple devices, email clients, apps, and browsers. You want it to load properly on every screen without the need to scroll to see the full image.
Pro Tip: Toggle 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
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 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:
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 users screen. 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
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.
Compress without compromising quality
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.
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:
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!