Close this search box.

Image format in an email: which one to choose?

Friends, I warn you: this article will be short, brief and to the point. As you probably know, to insert images in an email it is necessary to prepare "slices" or "cuts" from your image editing or design software (Photoshop, Sketch, Figma...). Or export your visuals. And when you create an emailingit's rare for there to be no images of them (whether background images or still images) but which formats to choose for these visuals ? Jpeg, gif, png, svg, webP, tiff, avif, heif...

So many acronyms and extensions, and so many questions about the type of file authorized in an emailing. We've decided to dedicate an article to this subject, to make your life easier. It's just the way we are.

Straight to the point: supported image formats in email

An image in an email can have, for the moment, one of the following three formats: JPEG, GIF, or PNG. Other formats are not fully supported by all mail clients (see Image Formats category on the CanIEmail).

So yes, I can see you coming: we also wrote an article on svg and apng formats used in an emailbut the results are not necessarily conclusive, or require several workarounds. So let's leave these particular extensions aside for the moment, to focus on the three image formats correctly supported in an email.

Each format has its qualities and its defects.

  • JPEG (acronym for Joint Photographic Expert Group) The JPEG format allows you to display up to 16 million colors. It is therefore a good idea to use it for photos, products, "complex" gradients, common visuals... It will undoubtedly be the most used format in your HTML integration. However, be careful with the quality of the export: JPEG can be quickly heavy in terms of weight. Make sure you export with sufficient quality parameters for the web. The JPEG does not support transparencyTherefore, your images are bound to have square corners. The most common file name extensions for files using JPEG compression are .jpg and .jpeg.
jpg or jpeg image format in an email
An image in JPEG format with a gray background included in the image, since no transparency is possible.

  • GIF (acronym for Graphics Interchange Format) The GIF format is based on a limited number of colors. It is therefore your ally in reducing the weight of your images. However, it is to be preferred for flat colors, icons, pictos, or simple logos, not exceeding 256 colors. The GIF format also allows to keep the transparencyIt is however binary: it is not an alpha channel allowing several degrees of opacity, as the PNG format offers. The gif also allows you to create so-called "animated" gifs with several states within the file. This variant, very useful to simulate video in email for example, is often very heavy. It is therefore possible, via this image format, to insert slideshows and animations in an email. You will find different plugins like Motion to design animated gifs on Figma, or tools to optimize your gifs on our library of email marketing resources. The file name extension used is .gif.
extension gif visual emailing
An image in GIF format with animation.

  • PNG (acronym for Portable Network Graphics) The PNG format was created to replace the GIF. It can do almost everything that the GIF format can do and even more. It is, by letting us go to the vulgarization, a mixture of the two formats quoted previously: It allows as well to understand up to 16 million colors (or more)as of manage transparency thanks to the presence of an alpha channel. On the other hand, it does not allow animation (except in its derived format APNG)and its weight is often higher than the previous formats. The file name extension used is .png.
png emailing transparent background
A PNG image with a checkerboard background allows you to observe the transparency.
format png image email
The same image in PNG format with a yellow background filled in on its container.

What about the recommended weight?

We will not address the subject of weight of an image in an email here, since it has already been discussed. I therefore strongly invite you to consult the article cited above to learn more about this subject.

However, keep in mind that you need to optimize the weight of your image files. Play on the export quality for example to improve this point. And of course, Think about the format you choose for your visuals in your email - the weight depends on it!

The author

Laisser un commentaire

Your email address will not be published. Les champs obligatoires sont indiqués avec *