Optimization of marketing messages goes beyond concise copywriting and keeping messages short. Readers are viewing emails and marketing content on many different screen sizes and with varying levels of connection speeds, so it's important to consider not only the amount of content being delivered, but also the size. Optimizing images for fast download speeds while keeping image quality high can be tricky, but with the right tools and some fine-tuning, images can be sized appropriately.
EMAIL SIZE MEASUREMENTS
The two important measurements of email size are: the HTML size and the total email size.
HTML SIZE
Gmail and Yahoo will clip emails larger than 102kb of HTML. This refers to the HTML and styles, but does not include images. To optimize for this size limitation, it's best to keep messages concise and avoid unnecessary redundancy and nesting in the HTML code. Clipping could result in:
missing content
not showing the unsubscribe link if it's at the bottom of the message, which could result in readers marking as spam
not tracking the email, since the tracking pixel is placed at the bottom of the HTML body to prevent interrupting other images from downloading quickly
TOTAL EMAIL SIZE
The total email size includes all the HTML, styles, and images. All of this content needs to be downloaded when the reader opens the message. Most of the more frequently used inboxes will automatically download images when the message is opened, but some inboxes still require the reader to choose to download images. Try to keep the total email size less than 1MB.
DOWNLOAD SPEEDS
While email read times have been increasing overall, marketers only have about 3 to 4 seconds to get their readers attention. It's important to optimize messages to ensure the fastest download speeds for readers on a variety of connections.
The following shows the download time for a 1MB total email size:
Source: chamaileon.io
IMAGE OPTIMIZATION
RESOLUTION
The quality of print images are usually saved at 300dpi (dots per inch), while web graphics should always be saved at 72ppi (pixels per inch). Reducing your photos and graphics to this resolution ultimately decreases the file size.
FILE FORMATS
JPG: Used for photography, such as product and lifestyle shots. JPGs are often the largest in file size, but they allow for compression. These images should be compressed to reduce the quality to an acceptable limit.
PNG-8/GIF: Used for flat graphics such as text, logos, and social media icons. GIFs can also be used for animations. That's GIF, not JIF.
PNG-24: Best used for images that include a combination of photography, text, and graphics.
RETINA
Modern monitors and mobile devices have higher pixel density resolutions, which requires that images be larger to render crisply. A 100x100 pixel image would need to be sized at 200x200 pixels to be crisp on a screen with a pixel density @2x, which is the most common retina resolution. Some devices even have 3x or 4x pixel density, and others fall somewhere in between. Ahem, Samsung Galaxy @1.5x... why!? 😩
Our suggestion is to only increase the size of images for retina when they contain text, or if the image is already a small file size and contains graphics like a logo or social media icon. Increasing a photo-realistic JPG image of a product or lifestyle shot won't be worth the increased file size.
TOOLS
Photoshop: The most frequently used tool for optimizing images is Photoshop. When saving images for use in email or the web, you'll want to select the Save For Web option. This gives you control of the image format and quality. Here is an article from Adobe explaining optimizing images.
Other tools: