PNG, GIF, or JPEG? Which is the Best Image Format for Email?

[ 28 By

With so many image file formats available—BMP, EPS, JPEG, PNG, and GIF to name a few—how do you determine which is right for your email? 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. In this post, we’ll weigh the pros and cons of the three most popular file formats for email: JPEG, GIF, and PNG.

JPEG (JPG)

JPEG images (short for Joint Photographic Experts Group) are “full-color images that dedicate at least 24 bits of memory to each pixel, resulting in images that can incorporate 16.8 million colors,” and are frequently referenced by their file extension, JPG.

JPEGs are also “lossy,” meaning they retain all color information, but compress file size by selectively discarding data—and that compression can result in a loss of quality. In most design programs, you can choose the degree of compression you wish to apply to individual images—just be aware that by doing so, you also will alter the image’s quality. As a result, if you choose the maximum quality option, your image will most likely be indistinguishable from your original photograph, albeit with a correspondingly larger file size.

PROS

check-X

24-bit color w/ up to 16M colors

check-X

Great for photographs

check-X

Great for images w/ more than 256 colors

check-X

Great for making smaller file sizes (usually)

CONS

check-X

Discard a lot of data

check-X

After compression, JPEGs tend to create artifacts

check-X

Cannot be animated

check-X

Doesn’t support transparency

check-X

Not good for text images

check-X

Not good for images with sharp edges

check-X

“Lossy”

As stated in the chart above, JPEGs are great for photographs and images with lots of colors. Check out this example of a colorful JPEG in an email:

litmus-jpg-email

However, JPEGs are probably not the best option for images containing text. Here is a snippet of text saved as a JPEG:

JPEGExampletoUse

By way of contrast, here the same text captured as a GIF (we’ll get to GIFs next):

GIFExampletoUse

As you can see, the text is much clearer in the GIF. Artifacts (the little bits of “fuzz” in the space around the letters) in the JPEG cause the text to look blurry or dirty. Here’s the same example zoomed in:

JPEGzoomedin

As Cripsen.org explains, “these little grey artifacts are part of the way JPEG compression works. The very thing that helps make photographs look more realistic at high compression sticks out like a sore thumb when you save a text or clip art image as a JPEG file.” If large headlines look that bad, can you imagine how illegible smaller copy might get?

GIF

GIF stands for Graphics Interchange Format and is “one of the file formats used to display indexed-color graphics and images in HTML documents on the web.” This means that a GIF will only display a maximum of 256 colors; as a result, GIFs are great for images with simple illustrations and blocks of colors, like logos and icons, but probably not the best option for photographs.

PROS

check-X

Supports transparency

check-X

Can be animated

check-X

Great for images with limited colors

check-X

Great for line drawings & clip art

check-X

Great for text images

check-X

“Lossless”

CONS

check-X

Only supports 256 colors

check-X

File sizes can be quite large

check-X

Not good for photographs

check-X

Not good for images w/ more than 256 colors

One of the major benefits of GIFs is that they preserve transparency, which means that you can use image-editing software to select colors in a GIF image’s color palette to become transparent. This is allows you to put a GIF over a colored background, or even a photograph, and you won’t see a border around the image. Check out the example of our logo as a transparent GIF set against a white background and a dark background:

litmus-gif-logos

However, GIF transparency is not selective. This means that if you make a color transparent, that color will become transparent in the entire image.

Another benefit of using GIFs is that they support animation, which is an increasingly popular technique in email design! Check out this great animated GIF from Jack Spade:

Jack Spade Animated GIF

PNG

PNGs, Portable Network Graphics, offer a wide range of attractive features, including “a full range of color depths, support for sophisticated image transparency, better interlacing, and automatic corrections for display monitor gamma. PNG images can also hold a short text description of the image’s content, which allows Internet search engines to search for images based on these embedded text descriptions.”

PROS

check-X

“Lossless”

check-X

Smaller file sizes

check-X

Great transparency support

check-X

Great for text images

check-X

Great for logos

CONS

check-X

Not great for large images (large file sizes compared to JPEG)

check-X

Cannot be animated

check-X

Not supported by all web browsers

check-X

Not supported in early versions of Lotus Notes

There are two types of PNG formats: PNG-8 and PNG-24. The PNG-8 format is similar to GIFs in the fact that they are saved with 256 colors maximum. The PNG-24 format is able to display millions of colors, but also comes with a larger file size. The rule of thumb here is to choose whichever format is an appropriate balance of color and file size for your particular needs.

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.

A negative of the PNG format is that they are not supported by all web browsers or early versions of Lotus Notes. In the email below, you can see how only the PNGs are disabled, while JPEGs and GIFs render just fine:

lotus-notes-png

WHICH FORMAT IS BEST?

Unfortunately, there is no right answer. You need to determine which file format is most appropriate for the content of that image. If you’re looking to include animation, the GIF format is the obvious choice. Need your photographs to retain their detail and color? Go with a JPEG. To recap:

JPEG File Format

  • Great for images when you need to keep the size small
  • Good option for photographs
  • Bad for logos, line art, and wide areas of flat color

GIF File Format

  • Great for animated effects
  • Nice option for clip art, flat graphics, and images that use minimal colors and precise lines
  • Good option for simple logos with blocks of colors

PNG

  • Lossless
  • Excellent choice when transparency is a must
  • Good option for logos and line art
  • Not supported everywhere

The best tools for judging which image format looks best are your eyes—and Litmus, of course! Preview how your emails (and images) render in over 40 email clients.

ADDITIONAL RESOURCES

GET MORE EMAIL TIPS, STRAIGHT TO YOUR INBOX

Subscribe to our newsletter and receive tips, tricks, stats, and helpful advice packaged in a beautiful monthly newsletter.





  • Derek Harding

    Nice roundup. One nitpick: “PNGs are similar to GIFs in the fact that they are saved with 256 colors maximum”

    This isn’t quite accurate. They can be saved with 256 colors but they are not limited to do so. You can use all 16.7Million colors in the 24bit palette if you wish.

    • Lauren_Litmus

      Hi Derek, thanks for your comment! I’ve edited the post to be more clear that some PNG formats are not limited to 256 colors. I appreciate the feedback!

  • Beyond the Envelope™

    A valid question – thanks, Lauren. My rule of thumb is use JPGs for photography and GIFs for solid colours and animations. The irony is that as designers we want to animate photography, so ideally we’d like to have animated JPGs rather than GIFs which, as you can see in your example, appear pixelated! As for PNGs, I have not used these a great deal due to the support issues you mentioned.

    • Lauren_Litmus

      Thanks for the comment, Paul! Our email designer has a very similar rule of thumb when it comes to using images in our emails!

  • Josef Bauer

    Hi Lauren! I thought GIFs are evaluated negatively by some firewalls and spamfilters (eg. barracuda).

  • Beddoes

    PNG’s have another interesting quality as they seem to avoid being compressed by mobile networks.

    A lot of UK mobile networks tend to compress images sent over 3G/4G to save on data, and this can have some pretty unpleasant effects on solid colours in JPEG and GIF. They usually get darker, making them stand out if being matched with a background colour. PNG to the rescue! :D

    http://blog.campaignmaster.co.uk/2012/11/30/beat-mobile-image-compression/

    • Ollie

      I’ve noticed that my JPG images have been darker on my live tests when I check on my iphone, thanks for the info!

  • Neil Smith

    Worth clarifying this too : “use image-editing software to select colors in a GIF image’s color palette to become transparent.”

    GIF only supports one colour to be made transparent, from the 256 available. It’s 1-bit transparency – on or off only

    You can see the effect on your logo on a black bachground, where the transparent edge is fairly obviously jagged.

    PNG supports 1 bit or full alpha channel transparency, which gives much more even blended results when overlaying an image on a background (colour or over another image). Alpha transparency will get you smooth blends between an image and it’s background.

  • Graeme Watt

    One thing I’ve noticed with JPG’s is how poor they render on Android in comparison to PNG’s. So for that reason, I use PNG’s ahead of JPG’s

  • http://raphaelpungin.com Raphael Pungin

    Do we really need to mention Lotus Notes?

    • http://www.litmus.com Justine, Litmus

      There are some industries where Notes is still very popular!

      • http://raphaelpungin.com Raphael Pungin

        I feel sorry for those industries.

  • http://www.helmword.com Mark Joseph Rivera

    Hi, How about the Retina version?
    Should we also double the size and resolution, and how it should we write it in CSS?

    • http://www.litmus.com Justine, Litmus

      Yes, you’d want to create those images at twice the size you plan to (at regular 72dpi screen resolution), then resize in your media queries. Campaign Monitor has some guidance here: http://www.campaignmonitor.com/guides/mobile/optimizing-images/

      • Guest

        this is great! thanks very much Justine!

      • http://www.helmword.com Mark Joseph Rivera

        this is great! thanks very much for this.

  • Michael Yanni

    You are aware that animated PNGs (APNG) exist, right? Many sites I frequent for animated images use them. http://en.wikipedia.org/wiki/APNG

    • http://www.litmus.com Justine, Litmus

      Animated PNGs don’t have the same support across email clients that animated GIFs would, but they are a great choice for some people!

      • Kiril Reznik

        Animated PNGs degrade to static PNG images on clients with no support. Also, APNGs compression is by far superior to GIF.

  • Pat Eriksen

    So if I were too send out flyers via email and used MS publisher to create flyer ….which ext would I use to embed in email so customer would see it when opened and not as an attachment.
    Appreciate any feed back. New job and I know very little. :)

    • http://www.litmus.com Justine, Litmus

      We’d recommend creating your email in an online program like MailChimp—they will help you host your images and be sure everything is ready to go!

  • Joseph Lawhorn

    “A negative of the PNG format is that they are not supported by all web browsers…”
    Alpha Transparency isn’t supported in IE6, but non-alpha transparency is, so the PNG format itself is. So if you’re just going off of IE5.5 you might as well say JPEGs aren’t supported in all browsers because Lynx doesn’t load images.
    http://caniuse.com/png-alpha

  • Pingback: B2B Nuggets: Influencers, Video Content & Shareable Content | CQ Marketing()

  • Pingback: 8 Tips to Boost Your Website Loading Speed | Design Dubba()

  • Pingback: Image Optimization Checklists for Beginner to Advanced SEOs by Vertical Measures()

  • http://www.gif-king.com/ Chihiro Tanno

    All format is good, its depends creatives and looks and informative..
    for more gif images – at – http://www.gif-king.com

  • Pingback: What’s the Difference Between JPEG, GIF, and PNG? | Foresite Group()

  • Jason Fonceca

    Thanks so much @Lauren_Litmus and/or @Justine, Litmus ! This helped me choose the right format for my “Truth Behind 7 Kanye Myths” infographic (I went with png-24 http://ryzeonline.com/kanye-myths/ ) – much love!