Not all image formats are created equal. All have different uses and different attributes.
Know exactly what image format to use for web use, print, social platforms, logos and much more with this handy cheat sheet.
|File Type||Extension||When to Use|
|JPEG||.jpg||JPEG files are best used for photos and other high-quality images that need to be clear and sharp.|
|GIF||.gif||GIF files are best used for small illustrations, logos, cartoons, or black-and-white images as they only support 256 colors.|
|TIFF||.tiff||TIFF files are best used for printing and editing since they store a lot of image information.|
|PNG||.png||PNG files are best used for screenshots, text-based graphics, and web graphics. They can also support transparency in web designs.|
|WEBP||.webp||WEBP files are best used for displaying high quality images on the web at smaller file sizes than other formats.|
Share this image on your site!
JPEG vs PNG vs GIF – What’s the Difference?
Whether you’re browsing the web on a PC, scrolling on a tablet or thumbing through a magazine, there’s one universal commonality – high quality imagery.
As technology has improved, the graphics in what we read and browse on a daily basis has become consistently sharp. While this looks easy enough to an end user, anyone working with images on a routine basis knows how much complexity there can actually be.
Even if you’re new to working with graphics, you’re likely still aware that there are a multitude of file formats for images. Older standards such as bitmap and TIFF have been around since what was essentially the beginning of computer graphics. Newer formats – GIFV and SVG, for instance – are slowly carving out their niche in the world.
While there are dozens of different formats, today we’re going to be looking at the three most common types. These are GIF, JPEG and PNG. Whether you’re working with images for web or for print use, these are the most common file formats that you’re going to encounter. Chances are you’ve heard of these but don’t have a clear grasp on what the technical differences are or how to know which one to use. With that said, let’s take a look at the formats and when to use them.
The oldest of the three, GIF images have been around since the late 1980s. The compression format is lossless, which means that you can save the file over and over and the quality won’t degrade. These are strong advantages to the standard, as a GIF file takes up significantly less space than an uncompressed image while not sacrificing quality.
While those are great attributes, the GIF standard does have one major drawback: It only supports 256 colors. This makes GIF a format best suited for basic images such as logos or simple drawings. A photograph saved as a GIF would suffer from a loss of color depth and shading.
Still, there is another aspect of GIF that has helped the format endure as long as it has. GIF supports animation. This makes it ideal for use in a number of scenarios where it might otherwise not be. Sports blogs and websites have started to use GIF images to show highlights. Unlike a video, a GIF can play directly in a mobile browser, letting writers use it to show clips that are being referenced in the writing. This same use case applies to other areas of the web, such as how-to pages that use GIFs to illustrate ideas.
Best for: Logos, simple graphics, animations and video clips where image quality isn’t a high priority.
Avoid it for: Saving photos, printed documents or graphics that need a large color palette.
The JPEG format is virtually synonymous with digital photography. Virtually all modern cameras offer it as a default setting. This is owed to the fact that the standard offers what basically is an unlimited color palette. The compression algorithms keep the file size that’s smaller than what a GIF file produces without limiting the colors you can use. The overall quality of the image will be degraded since JPEG uses lossy compression. This might sound concerning, but it’s rare for it to be an issue as long as the creator of the file uses the correct settings.
While all of this sounds great, JPEG does have some weaknesses. Because of the compression algorithm that’s used, text and basic graphics will develop a sort of fuzziness when saved as a JPEG. It’s a tremendous option for photographs, where the color palette is likely to be broad and the loss of quality imperceptible. However, the compression aspect means it’s not an ideal format for more simple images.
There can also be a bit of a learning curve with using JPEG. The standard allows for the user to adjust the ratio of picture quality to file size. For most people this boils down to trial and error. If you play with saving photos of varying color complexity at different quality levels, you’ll soon develop a feel for the safe range of compression.
Best for: Photographs and graphics that involve gradients or other broad color ranges.
Avoid it for: Logos and line drawings.
As the youngest of the image formats we’re discussing here, the PNG standard is a bit of a mixed bag. It’s not a format that you’ll use all the time, but it does have its uses. There are actually two variants of the format: PNG-8 offers lossless compression on an indexed color palette, while PNG-24 offers lossless compression with the same support for thousands of colors that you’d find in a JPEG.
PNG-8 acts as a more modern version of the GIF standard. Its lossless format and color palette match what is found in a GIF. However, a PNG-8 image will result in a smaller file than a GIF with the same data. This is beneficial if you’re working with hundreds of images or building a high-traffic website. Saving a few kilobytes on one file isn’t drastic, but it adds up in those scenarios. PNG-8 also offers better support for transparency than a GIF file.
Conversely, PNG-24 works as a sort of high-fidelity image format. The quality is lossless and the color palette is just as wide as what’s available in a JPEG. This does come at a cost to the file’s size, though. A PNG-24 file can be multiple times as large as a JPEG file with the same information. In most situations it won’t be worth the increase in file size since JPEG files have a very minimal reduction in quality. The most common use case where a PNG-24 format will make sense is if you’re working with materials that will ultimately be printed.
PNG-24 does have one other trick up its sleeve, and that is support for transparency in images. If you’re working in an environment where you’ll need transparency as well as optimal image quality, PNG-24 is what you’ll likely end up going with. Otherwise you’ll resort to JPEG in most cases.
Best for: (PNG-8) Situations where you might otherwise use a GIF but don’t need it to animate, or when you need better transparency functionality than a GIF.
Avoid it for: (PNG-8) Anything that needs animation or where file sizes need to be minimized.
Best for: (PNG-24) High-resolution or high-contrast images that will ultimately make their way to print, or similar images for web use that require transparency.
Avoid it for: (PNG-24) Photos that will be hosted on the web.
Hopefully this article has worked to demystify some of the confusion you may have had about the various image formats that are available. While we’ve only scratched the surface of what’s available, you should now have a working understanding of the most common image types and when to use them. Having this much of a grasp on the subject will be enough in most cases, although you’ll still want to learn more when you can.
A big part of choosing the format you want to work with comes down to your own preferences and needs. Don’t be afraid to experiment with a few different formats on the same image. With enough time and practice, you’ll find that picking the right format becomes an almost automatic process.
Latest posts by Jamie Spencer (see all)
- Best Fonts for Bloggers: How to Choose the Right Typography for Your Blog - March 27, 2023
- How to Write a Blog Introduction - March 27, 2023
- 5XX Errors: A Guide to Understanding and Resolving Server Errors - March 27, 2023
17 thoughts on “Image Formats Cheat Sheet – All you need to know about JPEGs, TIFFS, GIFs, PNGs & BMPs”
good summary :)
– PNGs pretty much have the option animations (but not every software supports it, since it’s non-standard, some (I think) Mozilla people just extended the official standard)
– When I save painted stuff from MS paint in bmp, then I loose detail, how is BMP lossless only? (at least lots of software uses some way to make it lossy to reduce size)
– some png’s with text/screencontent are smaller than their jpeg counterparts (all depends on the compression settings of the jpeg) and still look better since they are lossless
– actual RGB color space is very uncommon for jpg
– what do you mean by indexed color option? that it’s supported but not mandatory? gif uses indexed color after all, so why is there an x in the table?
I’m wondering whether heif or avif will grow enough to end up on such a sheet one day :)
Fabulous tool, excellent website. Could you please share some tips on optimal file sizes for a website (not social media platform), eg. banner, image boxes common to wordpress themes.
Thank you for sharing your knowledge!
Hello, I have translated your pictures into traditional Chinese,
And publish these pictures on our blog ：http://6fdesign.blogspot.tw/2017/08/jpegpnggiftiffbmp.html
Plus your blog logo and your web site,
Thank you so much! love you~
You are an awesome individual.!!!! Thank you so so much!
Great post I can’t seem to locate the downloadable PDF version though. I only get a jpeg when I click on the image. Is there a PDF version available for download? Cheers! Tracey
There isn’t one, but I will get round to doing it in the next few weeks though.
thanks. this helped me with my homework.
Nice Share. Very helpful for image editors. And Image Compression Play better role also.
Indeed this is really a great JOB, especially for the upcoming and existing Photographers. Thank you so much Sir for the wonderful Job!
Thanks for the super helpful infographic!
However, I noticed a typo…. this doesn’t make sense: “Gif images is that is allows you to preserve transparency” in the little green box.
I always feel weird pointing out random people’s typos, but I feel like if I had one posted, I would want to know… :)
I will amend. Many thanks.
NIce infographic, could you share which tool did you use?
I’m trying to find a nice tool for my team.
Adobe Illustrator & Photoshop. :)
Can I translate your info graphic to my language?
I will put your credit at the end of image also.
Sure you can. Send me a link when you’re done. :)
Oh my goodness, yes—please make a printable version! :)
I love it, but is there any way to print it?