When designing email newsletters and marketing campaigns, it is important that you consider the limitations presented by email readers. Many users, either by personal preference or email client defaults, are blocking images from being downloaded in the HTML-formatted messages they receive. Thus, it is a good practice for email designers to prepare for both image “off” and “on” scenarios.
Here are some of the basics you need to know about using images in email:
Obstacles to Using Image-based Email Campaigns
- Blocked or Disabled: It is estimated that approximately 35% of email recipients block all or some of their images; and, by default, several popular webmail services and email clients, such as Google and Outlook, are set to disable images automatically. Many users do not change the default, and therefore never see your images within your email marketing campaigns. Each email client has its own way of rendering blocked images: some display a box with a red “X” placeholder, while others simply gray out the area. If you neglect to take these default settings into account, you run the risk of recipients reporting your email messages as spam; unsubscribing from your email list because they can’t read your message; and poor email deliverability since fewer messages are actually making it to the inbox.
- Spam Filters: Spam filters can’t “read” images, so creating an HTML email that’s nothing more than one big image, with little or no text, will trigger spam filters. With a rising surge in image-based spam, your legitimate email marketing campaigns can end up being blocked from delivery, or delivered to the junk folder. We strongly recommend that you avoid using images as your sole content.
- Mobile Devices: Most messaging received on mobile devices are text based, so your images are never seen. As more and more portable devices are used for sending and receiving email, you’ll want to ensure that you’re sending both mobile-optimized HTML and text-based versions.
Workaround for Image Obstacles
- Keep your introduction text based. We recommend not using large banners or clickable graphics in the header. Since most recipients preview their messages in a small email preview pane, consider what the preview pane looks like when there are no images, and add a few lines of text that clearly states your message. This will be especially helpful to those recipients that elect to receive text-only versions on an email.
- Provide ALT text to describe images. As stated above, many recipients receive email with images blocked (perhaps by the default of their email client). To ensure that a brief image description is displayed in place of the image for those recipients who have their image reader turned “off” or the reader is set “off” as a default, use ALT tags (ALT text displays useful text before the image is loaded). This will give users an indication of what they will see if they choose to download images. Remember that ALT text must be able to essentially replace an image; and any meaning the image provides should be provided by the ALT text.
- Include photo captions under images. If you place the caption within the image, the message will not be seen if the images are disabled or blocked, so add a caption under contextually-important images.
- Do not use image-based emails. Avoid using multiple images. Since most image-based email is detected as spam, your message and content may never reach the recipient.
- Don’t use one large image as the sole content of your email. If your email consists of only one large image, or multiple images, and your recipient’s reader has images turned off, the first thing they’ll see is your unsubscribe link.
- Use smaller images to reduce load time. When sending embedded images by email, it’s important to keep the image size small (under 25k) so they transfer faster and are more easily viewable by your recipient. Embedded images are a part of the message as opposed to linked images which reside on a remote web server. With embedded images, you are dependent on the recipient enabling image downloads on their email client. The advantage of uploading images to a web server is that they’re not contained in the actual email message, so there is no file size associated with the images that you are using in your email. By using an absolute path to the image being referenced (an absolute path contains the full URL: e.g., http://yourwebsite.com/images/imagename.gif), your image will load quickly, correctly appear in your recipient’s email, and keep your email campaigns user-friendly…which will help you avoid the image spam filters and increase open rates.
Use the Least Possible Amount of Images
Images should be used sparingly. Keep text and image ratio in mind when crafting your newsletter. Although there is no hard and set rule as to what a safe ratio is, a good rule of thumb to follow is for every image you want at least one paragraph of text (we recommend a 30/70 image to text ratio). Too many images can overshadow your content and message especially when sending out high volumes of email. Although images and colors attract attention, too many images can detract from your message, which ultimately affects your click through and conversion rates.
Optimize Images for the Preview Pane
Most people view their emails through default sized preview panes within their email clients. The average preview pane is around 300-500 pixels high, so you want to ensure that you include the most important bits on information within this area. Keeping this in mind, you’ll want to keep your images small.
Lastly, we recommend that before sending, you preview and test your message with images off so you know exactly how your subscribers will see it! By following the guidelines above, you can create and send successful email campaigns.
Email Marketing Blog 
