Images are a critical part of telling your story and creating engagement with your recipients. Use the below recommendations and best practices to ensure images render as intended.
Optimal File Size
Tl;dr: Keep image sizes below 1MB. For your hero image, the ideal dimensions for desktop screens is 600-700 pixels (wide) and 300-500 pixels (tall). For mobile, that decreases to 350 pixels (wide) and 200 pixels (tall).
In addition to pixel width and height, consider the overall file size of the image. It is recommended to stay below 1MB for any image or graphic file -- this will help with email load times. In general, smaller file sizes are better.
Additionally, Apple devices feature a 2x resolution on their displays. We recommend you double the intended image size so it displays optimally on Apple devices. Example: if you need a 300px (pixels) wide image, crop and save the image at 600 pixels wide.
To determine the size of the image, consider how many columns are in the content block/row you are working on. For the Ascent360 Email Designer, this is easy to figure out based on the numeric value in the row properties of the designer. The largest value is 12 and that would be for a single column row. The row breakdown and sizing goes as follows (this table assumes the email width is 600px).
Column Value | Column Width (%) | Column Width (Pixels) | Image Width |
12 | 100% | 600px | 1200px |
10 | 80% | 500px | 1000px |
8 | 60% | 400px | 800px |
6 | 50% | 300px | 600px |
4 | 33.33% | 200px | 400px |
2 | .167% | 100px | 200px |
The image height will be dependent on the aspect ratio of the images being used. Make sure all images are using the same aspect ratio so when they are side-by-side they are the same width/height.
Note: you can crop and resize images within the A360 ESP (email tool). In the image 'content properties', click Apply Effects.
ALT Tags
Additionally, we recommend adding descriptive ALT tags to all images in your emails. These tags can be used to identify what the image is without the user downloading/viewing the image on their email client and they also assist visitors that require assistive software like screen readers or other text to speech software that read the page contents aloud to the user.
To add Alternate Text to an image, click the image element in the email design and type your ALT text in the Alternate text box:
Tips for Alt Tags:
Every image should have an Alt Tag unless the image is strictly decorative
The Alt Tag should describe the information of the image, not the image itself
If the image has information in it, the Alt tag should also have this descriptive information
All images and buttons within your email should contain a hyperlink so they link out to relevant content. Consider linking some text content as well.
Background images are not recommended as many email clients cannot properly render the code and end up displaying a solid color instead. If you want to create an image with text overlay, this should be done in an external program like Photoshop or Canva. The text will not wrap or scale with the image since it is not a live text overlay.
