Image Sizing & Optimization

Images are a critical part of telling your story and creating engagement with your readers, but you can't insert “any sized” images and expect them to render correctly. They also might not have the same aspect ratio as other images.  

Before importing and using an image, there are some adjustments you need to make. This is not overly complex but does involve cropping the images to a specific size/ratio before inserting into an email design.  

Optimal file size: In addition to pixel width and height, you need to consider the overall file size. It is recommended to stay below 1MB for any image or graphic file -- this will help with email load times. Smaller is always better when it comes to image file size! 

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 utilizing the same aspect ratio so when they are side by side they are the same width/height.  

ALT Tags 

Additionally, we recommend you add descriptive ALT tags to all images in your emails as well. 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.  

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 for and end up displaying a solid color instead. If you want to create an image with text overlay, this should be done outside in photoshop or a program like Canva. The text will not wrap or scale with the image since it is not a live text overlay.