One of the best parts of working for an association management company is the opportunity to work with a diverse group of coworkers and clients. Everyone has their own deep wells of expertise and industry knowledge. As the NPR graphic designer, I don’t have any sage advice about strategic planning or hammering out the yearly budget, but I do have years worth of technical knowledge and design advice to dole out to my unsuspecting colleagues.
So, consider this the first in a series of answers to questions that you never knew you wanted to know about graphic design. For this first round, my lovely coworker asked:
“What is the difference between a jpeg and png file? I sometimes have both file options, which should I choose?”
Fabulous question! Both images formats are ideal for screen use and have been widely adopted, which means very few software compatibility issues and support from all major browsers. You really can’t go wrong with either image format. However there are a few differences that can help you choose the best one for your particular needs. Here is a brief rundown of the major differences:
File-size: The size of images (shown in units of kilobytes, megabytes, and gigabytes) continues to be a concern. Large images fill up hard drives quickly, and can significantly slow down a website if too large. If you were to export the same image, with the same dimensions to both formats, jpeg format will usually offer the smaller file size.
Compression method: Lossy vs. Lossless compression. The reason jpegs will usually offer smaller file sizes is because the format uses “lossy” compression. This means that every time you save a jpeg image, it compresses the file a little more. Essentially, it tries to eliminate a little bit of data to make a smaller file. The cycle of opening/saving/recompressing can increase the amount of jpeg artefacts which appear as blocky, pixelated areas in the image.
In contrast, png files use lossless compression. No data is lost when you open and resave a png file. (And this is why the file size is larger than jpeg.) This lossless compression is advantageous when working with images with large areas of flat color: the colors will stay solid and will show fewer compression artefacts.
Transparency: Jpegs do not support transparency. Png files do allow transparency. Transparency information does increase file size, but the need for a transparent background usually makes this file size gain a non-issue. If you need transparency, a jpeg just isn’t going to work.
Color range: The jpeg format was designed specifically for photographs. It supports millions of colors and does a fantastic job showing subtle transitions in color.
Pngs actually come in a couple different “flavors” in terms of color support. The two most common are png-8 and png-24. Png-8 limits you to 256 colors. These 256 colors are determined by your image: it is not forcing the image into some predefined color palette. This is obviously not going to give you beautiful photographs, but could be ideal for a logo. Png-24 supports the same 16 million colors as jpegs. Both png formats support transparency.
What format should you choose and where and when should you use it? It depends on your goals:
- If you only want one file to keep track of and file size doesn’t matter: go with a .png with a transparent background. This will be your most versatile option. Do be aware that this will not be the best option if you need it for high-quality, professional printing. (Maybe a topic for a future blog post!)
- If you need the image for the web and don’t need a transparent background: jpeg may be the winner due to its smaller file size.
- If you need an image for a social media post: Try both! Depending on the artwork, you may have better results with one format over another. Facebook, in particular, has a reputation for its over-zealous image compression. Use whichever option looks best after uploading.
That covers the essentials of these two image formats. Hopefully, this information helps you navigate your image options with more confidence and helps your organization look its best!
