Use rich media in emails

Business Benefits

Ensure your media renders correctly for all readers.


Follow the guidelines and limitations for each type of rich media, like keeping images under 600px wide and 1MB file size.

  • Image dimensions: Emails are still designed for a 600px width, so to avoid images or GIFs getting clipped, keep them within 480–590px. Retain the remaining area for padding.
  • File size: All email content is downloaded from an external site when you open the email. Large file sizes slow email downloading time. Keep images as small as possible: no more than 1mb. If you can retain image quality, smaller is better. Additionally, Gmail is notorious for clipping email messages if the underlying code has a file size greater than 102 KB. Since CSS3 animations involve additional lines of code, ensure that your HTML template does not exceed the limit.

Upload the media directly into your email marketing platform if possible, or use a hosting site such as Flickr or Photobucket.

Avoid embedding media, as it does not render well in most inboxes, especially on mobile. Most email marketing platforms will automatically optimize an image if it’s uploaded, which is why it’s best to upload it directly onto the platform rather than using an external hosting site.

Add in alt tags that describe the content of when you add media to your email.

Once you’ve added your media, click on it, find and enter image options, and enter the description in the alt text box. Alt tags are used if an email client can’t or won’t display media, and to describe the media if someone is using accessibility settings.

Repeat any vital information, like an offer or deal, in the body of the email.

For example, if you’ve added a GIF that promotes 20% off with a discount code, repeat this information as text in the body of the email. This ensures that it is seen even if the media does not load when someone opens the email. On mobile especially, images and media are often not automatically loaded.

Test all emails containing rich media by sending a test to different inboxes and devices.

You can do this manually by setting up test accounts on Yahoo, Gmail, Hotmail, and Outlook, and sending a preview to each. Access the email on your phone or tablet to see how it renders on mobile devices. Outlook in particular often has problems with media and formatting, so double-check how your email renders in the application.

Alternatively, Litmus is an inbox testing service that will display your email across a variety of devices and inboxes, saving time and effort.

Last edited by @hesh_fekry 2023-11-14T11:50:44Z