JPGs, PNGs, and GIFs, oh my!

JPGs, PNGs, and GIFs, oh my!

I know of a woman who didn’t do much cooking. In fact, she used her roasting pan as a cat litter box. The problem arose when she volunteered to make Thanksgiving dinner. If you’re thinking, she couldn’t…, you’d be wrong. She could, and did. She washed up the litter box and cooked the turkey. Now that I have some of you gagging in revulsion, I ask the really important question. does it matter what file format you use? If you don’t want to be caught using the litter box for roasting your turkey, graphically speaking, then read on, my curiously disgusted friend.

If you didn’t study graphic design in school, all those abbreviations just sound like a foreign language. What difference does it make?

First, when you understand the advantages and limitations of the format, you can make good decisions about how to use the format appropriately (like, not using the cat litter box for roasting the turkey. I just brought that up again to see you gag and yes, it was a wee bit funny), and scalability (resizing an image, generally this implies how much bigger you can make the image) of a given graphic.

So, let’s get started. The two main categories of graphics are vector and raster images. This is really the difference between a drawn illustration (think Peanuts cartoon or comic book – like a comic strip of the roasting pan incident) and a photograph (like getting out your camera and taking a photo of the guests’ faces when they finally understand why the cat is upset). The illustration type is called a vector drawing because of how it’s drawn on the computer. Applications such as Adobe Illustrator use mathematic descriptions of curves and angles to form shapes. The beauty of a vector drawing is that they can be scaled up to huge dimensions and the lines, curves and angles will remain crisp because the mathematical formulas can be scaled. If you are not creating the graphics or sending files to printing houses (ones with the big presses), you probably won’t encounter these too often. Those that create these type of graphic will work in applications such as Illustrator and will save the files in the native application format to preserve quality. But will then save the graphic as either a PNG or GIF, both of which are raster images.

A raster image is based on pixels, and now for scalability, it does matter how many pixels are in the image. For more information on pixels, dpi and ppi, have a quick read of 300 dpi – A False Claim..

JPG – Joint Photographic Experts Group

JPGs are arguably one of the most common image formats used. They handle the data contained in a photograph really well. When handled appropriately, JPGs are a very acceptable format. Issues arise when folks receive a JPG, do some stuff with it, then save it again as a JPG, then do more edits and again save it as a JPG. You should never JPG a JPG! For more information on best practices when working with JPGS, check out Why Should I Care About Image Compression?. The other limitation of a JPG is that it does not handle vector graphics too well. For example, you would not want to save your logo as a JPG.

So use for photos, provided you start with a good quality image and don’t repeatedly save it as a JPG and you’ll be happy with the quality, both for web and for print.

GIF – Graphics Interchange Format

This is a pixel-based (raster) image format as well but is limited to a maximum of 256 colour. That is not sufficient for a photograph, which can use millions of colours. This format is best for simple illustrations without gradients. Since it uses the RGB colour space, the colours may shift a bit when printed (meaning, it may not look the same as it did on screen. If you want to know more about controlling the colours, read How Big Should My Crayon Box Be?) It can save simple animations as well. But it cannot hold any transparency information. It uses lossless compression, so the image will not degrade with every save.

If the graphic is an illustration, has a very limited range of colours, has no drop shadows or colour gradients, doesn’t need to have a transparent background, or needs to be animated, then this is a good option for the web. If you wish to control the colours as best as you can for printing, consider reading How Big Should My Crayon Box Be?

PNG – Portable Networks Graphic

Again, another pixel-based (raster) image format. This is a really good digital format as it utilizes the sRGB colour space. This makes it a reasonable option for photographs as well as illustrations. Remember the colour shift that can happen when you print a GIF? The same will happen with a PNG since it uses sRGB and not CMYK. It does support transparency, can be used for vector graphics, and it uses lossless compression, meaning there will not be degradation of quality everytime you save it.

If you do not need to animate, this is a good option. Since it has a reasonably sized colour space, it also handles photographs acceptably well. It is quickly becoming the predominant format on the internet. Since it uses RGB, consider reading the above post on managing colour.

PDF – Portable Document Format

This is a good format for when the document is predominantly text, with some illustrations and images. It will preserve the vectors (text and illustrations) with lossless compression. You will want to choose the highest quality of lossy compression for any images included in the document. Press-quality is the best (equal to retaining 300 ppi) and highest-quality is sufficient for home and office printers (equal to 150 ppi). It is the one common format that preserves vector information that is independent of any particular application.

Typically, if the document is predominantly text, this is a fantastic option. But it is becoming more common to use this format to share predominantly image graphics. For example, Amazon (and other book distributers) ask for the book cover to be a PDF generated from a program like Photoshop.

TIF – Tagged Image File Format

You may not have come across this one. It is very common among graphic designers, publishers, and photographers. It is a high-quality image format that can contain vector masks (information to hide parts of the image) and uses lossless compression, so is the format of choice for archival organizations. In other words, it’s a good safe format to save images, particularly as a master image to preserve the quality. It also can handle saving a file with either RGB or CMYK colour space information. Where you may come across this is in your digital camera. It may be one of the options as a format for the camera to save the image as. If you have the space on your memory card, it is a better option than JPG because of the compression done on a JPG. You always want to keep the best quality image you can, until you are ready to save a version to publish.

If you are not working within a graphic program like Photoshop and using the native file format, this is a great option for master files, then save as a JPG or PNG to produce a version of graphic that you can publish.

This Post Has 2 Comments

  1. Hello there,

    My name is Aly and I would like to know if you would have any interest to have your website here at promoted as a resource on our blog ?

    We are in the midst of updating our broken link resources to include current and up to date resources for our readers. Our resource links are manually approved allowing us to mark a link as a do-follow link as well
    If you may be interested please in being included as a resource on our blog, please let me know.


  2. I am extremely impressed with your writing skills and also with the layout on your blog. Is this a paid theme or did you customize it yourself? Either way keep up the nice quality writing, it is rare to see a nice blog like this one nowadays.

Leave a Reply

Close Menu