CATEGORY: email-marketing

Which is the best image format for email?

Images can be rendered in a plethora of file formats – JPG, PNG, EPS, GIF, TIFF, BMP and more. But which is the right format for your mail? Which is going to provide the best results?

Each format produces variances in file size, compression, and quality. To make things more confusing, support for specific file types can also vary between email clients.

So which file type do you choose? Let’s look at the most relevant ones for email marketing.

JPEG (JPG)

JPEG images (Joint Photographic Experts Group) are the most common format used for photographic images in email and online. JPEGs can incorporate millions of colours, but can still be contained in relatively small file sizes.

That is because JPEGs are “lossy,” meaning they retain all colour information, but compress file size by selectively discarding data—and that compression can result in a loss of quality. If you compress the image a lot, the quality loss becomes visible to the naked eye.

JPEG in general is very good at handling photographs, but it is much less successful at handling text, drawings (with straight lines) and similar. Text stored in JPEG may become slightly blurry and it is therefore not recommended to use JPEG for images with text. Artifacts (the little bits of “fuzz” in the space around the letters) in the JPEG cause the text to look blurry or dirty. 

JPGs are:

Great for images when you need to keep the size small
Good option for photographs due to colour volume
Bad for logos, line art and wide areas of flat colour
Not suitable for transparency and cannot be animated
After compression can have artifacts and are “Lossy”

Pro tips:

The less detail an image contains, the more you can compress it
A quality level between 5-9 tends to offer a good balance of size and image quality
The baseline optimised JPEG format can make file sizes smaller by reducing the colour range. It was not always the case, but most browsers now support this

GIF

GIF is an acronym for Graphics Interchange Format. An image of the GIF format can contain up to 256 different colours. This means that GIF is not a good a choice for photographs as the number of available colours is low. On the other hand, GIF provides a good option for handling text and illustrations. Although not the original intent of the GIF format, as opposed to a strictly flat, single-frame file it can include additional frames to bring a little animation and add movement and life to imagery/text.

Fewer colour tones enhance image contrast (with stronger image outlines). Another plus is that GIF compression technique does not remove any information from the image

Another benefit of using GIFs is that they support animation, which is an increasingly popular technique in email design. See our piece What is a GIF and why should you care? for more details

GIFs are:

Great for animated effects
Good for clip art, flat graphics and images that use minimal colours and precise lines
Good option for simple logos and blocks of colour
Good for text images
Lossless
Not great for photographs as they only support 256 colours
Not great for large images, as they have large file sizes

Pro tips:

If your GIF is a simple graphic with limited colours, then you can restrict the palette to less than 256 colours. 32 tends to be enough for logos and simple graphics.

PNG

PNG is an acronym for Portable Network Graphics. It is a newer image format compared to JPEG and GIF. PNG was partly designed to replace GIF and as such, it comes with new features. There are three types of PNG image format:PNG-8 which supports up to 256 colours, PNG-24 which can contain up to 16.8 million colours and PNG-32 that can handle up to 16.8 million colours and has an advanced functionality for transparency.

PNGs are also capable of producing background images without jagged edges. While they can be used for photographs, PNGs typically have larger file sizes than JPEGs since they use lossless compression.

PNGs are:

Lossless
Good for images with transparency
Good for logos and line art
Not supported by all web browsers or early versions of Lotus Notes
Not great for large images, as they have large file sizes

SVG

SVG, Scalable Vector Graphics, is an image format for vector graphics. Unlike JPG, PNG, and GIF format images, SVG images are just plain text documents that describe the lines, shapes, and colours that make up the image. As SVG files are plain text documents, they can be easily manipulated on the web using JavaScript, CSS, and HTML. SVGs also are resolution independent. They look sharp on any screen, while at the same time keeping file sizes low.

The biggest con of using SVG images specifically for email is, unsurprisingly, a lack of support. iOS devices and Apple Mail offer a good level of support for SVG, but where it’s missing is from Gmail, Outlook, and international webmail clients. If most of your subscribers open your emails in Apple Mail or an iOS device, you could start experimenting with SVG. Also, keep an eye out for the developments around AMP as this may also have an effect in the future.

SVG are:

Scalable and responsive

Good for high quality images with small files sizes
Limited to email clients on iOS as this is the only place it is supported.

So which format is best? Unfortunately there is no right answer. You need to decide which is most appropriate for the image that you are using. Some decisions are easier than others for example a GIF is the obvious choice if you are looking to include animation.

How do you handle images in e-shot™?

With the new and improved image editor in the e-shot™ design manager you can easily edit your images within the platform itself. Adjust size, add special effects and more. Take a look in our design manager and see what you can do.

A few things to remember:

e-shot’s image manager limits file sizes to 1MB.
To keep images high resolution we recommend that you upload them in the same dimension measurements as the block measurements.
Some email clients will crop your image if you go above a certain height. We recommend keeping the height below 1000 pixels to prevent this.