Home Blog What images do you use for email?

Share this post

Welke afbeeldingen gebruik jij voor e-mail?

What images do you use for email?

Written by Team e-Village / 18 May 2017 / Design / Technique

An email without images is very rare. These days, animations and videos are also increasingly common. But these GIFs and videos are not supported by all email clients. That is why it’s important that the right images are used in emails. This prevents unclear images, or excessively heavy emails.

Images types

Which types of image formats can be used for email? You can choose .jpg, .png or a .gif. A .png and .gif are most relevant to email. Unfortunately, .gif is not supported by all email clients. In Outlook for instance, GIFs and videos are not displayed properly. That is why it’s a good idea to think about which image types to use. When to use which type has to depend on the type of image. Are they photographs, logos, product images, in colour or black-and-white?

JPG images

The jpg format is especially suited for photographs. Think for instance of product images. The jpg format is intended to compress these types of images. One of the things that happens when saving an images as a .jpg is that colour information is left out. This means an unnecessarily large amount of quality is lost. The amount of compression can be set. The more you compress an image, the more colour information is lost, and the more quality diminishes. Even when you save the same image as a .jpg again and again, more information (and as a results, quality) is lost. Take this into account when using jpg format (see example 1 at the bottom of this blog).

GIF images

The gif format is used for images with few colours. Think for instance of a logo or a text-only banner. Just like a .jpg, the gif format is intended to compress images. The compression is achieved by, among other things, reducing the colours to a maximum of 256. This type also supports transparency. But the result of a .gif image with transparency is often sub-optimal (see example 2 at the bottom of this blog).

Instead of a .gif you’re better off using a .png. The big advantage of the gif format over the .png is that .gif also supports animation. Everyone remembers the nervously blinking images you used to find on web pages. This may have become a faux pas, but animating an image does give you the option of alternating products in a banner, among other things. Of you can subtly focus attention on a product by turning it in to a ‘cinemagraph’.

Cinemagraph

Figure 1: cinemagraph

PNG images

Just like the gif format, the png is also most suitable for images with few colours. If an image does not require animation, your best option is the png format. The png format has two versions, 8-bit and 24-bit:

  • An 8-bit .png has the same application as a .gif. The advantage of an 8-bit .png compared to a .gif is that the .png can achieve up to 25% more compression. That is why the 8-bit png format is preferred over the gif format (see example 2 at the bottom of this blog).

  • A 24-bit .png has more colours available than the 256 in a .gif or 8-bit .png: 16.7 million colours, that is. And that makes a 24-bit .png the desired format for a button or a logo on a transparent background. The edges of the image are completely sharp when using a 24-bit png image (see example 2 at the bottom of this blog).

When do you use which type?

  • The jpg format is used for photographs.

  • The gif format is used for animated images.

  • The png format (8-bit) is used for images with few colours such as logos and banners with text.

  • The png format (24-bit) is used for logos and icons on a transparent background.

Examples of the image formats

In order to further clarify the pros and cons of every image format, here are some examples.


Example 1:

A photograph is best saved in jpg format (top left). A gif file is not much lighter (21 kb), but the quality is considerably worse. You can see the image becomes grainy (top right). A 24-bit png file (bottom right) is fine in terms of quality, but also almost twice as heavy (79 kb) as a .jpg. This is not ideal for your email load times as well as being inconvenient for your mobile readers.

JPG 48kb

JPG (48kb)

GIF 21kb

GIF (21kb)

PNG-8 19

PNG-8 (19kb)

PNG-24 79kb

PNG-24 (79kb)

Example 2:

When the quality of the .jpg (top left) is set to 100%, there will hardly be any loss of quality at all. But the .jpg is over 3 times as heavy as the .gif (top right). The 8-bit .png (bottom left) is the lightest, at 4 kb.

JPG 14kb

JPG (14kb)

GIF 14kb

GIF (4kb)

PNG-8 4kb

PNG-8 (4kb)

PNG-24 6kb

PNG-24 (6kb)

Using TinyPNG and TinyJPG you can very easily compress images yourself. Do you have any cool tips or know any useful tools? Let us know! Join the LinkedIn group E‑mailmarketing Nederland and share your knowledge with your colleagues.

Scroll omhoog