There are a few things you need to consider when deciding how to use images within your email messages:
Some email clients automatically have images switched off - This means if you have a very large banner image, or your email is mainly images, the first impression for the recipient will be a lot of blank spaces. They will then likely have to right click to display images, or manually confirm on their email client that they would like to see the images.
For this reason, it is important to have the main message of your email towards the top, and an even amount of text so that the overall message is still conveyed whether images are displayed or not.
ALT text - In the system, when you insert an image, you have the option to add ‘ALT’ text to the image. This text is what your recipients will see in place of the image if they have images turned off. The ALT text should give a fair description of the missing image (e.g. Company Name Banner, Attendee Registration Button etc). This is especially important if you are using images as buttons and calls to action within your email.
Good Image to Text Ratio - Spam filters can’t read images, so if you send a message that is one big image, it will likely get filtered to the recipients junk or spam box. Try to strive for an 80:20 text to image ratio.
Correct Sizing - When you upload your images to the system, you can use the file manager to resize / crop and edit your images. We recommend resizing images to the correct height and width for use in your emails.
You can also do this prior to uploading them via applications such as mspaint or Photoshop.
Don’t Float Images - When you are coding your HTML, always use the ‘align’ property for your images, not float. Some email clients ignore the float property, which will cause display issues in your email.
Always use Block image styles - When you send email newsletters to Gmail and other online email applications, sometimes the images have weird spacing with gaps below each image. Sometimes, the email layout will be broken as a result.
Always style your images with img style="display:block" to prevent these gaps.