This question is especially important for sharing images on the web. However, this discussion can also apply in other situations, such as sharing a library of photos via USB drive…
First, let’s consider that there are many file types for images available. Some are specific to a piece of equipment. For example, my Canon DSLR saves photos as .CR2 files. Some image types are designed for a specific use. Those of us in video production are quite familiar with Targa (.TGA) files as a common image type that is commonly readable in most graphics and video apps.
When it comes to sharing images to a wider audience, say, via a website, we need a more common image type that is accessible via many different distribution methods. Images formats designed for use in web design fit the bill quite well – after all, the premise behind the web is that end users on any computer or other platform can view the images incorporated into a website. Thus, what works for web design works in many other situations as well…
Until about 10 years ago, the question was JPEG or GIF? Now, PNG offers the qualities that GIF supplied except for one: the venerable animated GIF. Animated GIF files are actually bundles or stacks of images that play in sequence, creating a looping animation (an animation that plays repeatedly), and this special ability has kept them quite popular in the past few years.
Animation aside, the two formats to choose from these days are JPEG and PNG. In order to decide when to choose which format to use, let’s look at their capabilities and limitations:
JPEG (.JPG) is the most common image format around. It’s the default for photographs and is the format that many cameras save compressed images with (more on compression here). Generally, when it comes to managing file size, JPEG is the format of choice. Not only does JPEG offer file compression to use less disk space and transmit more quickly over the web, it offers variable compression. This means that, when saving an image with an application, the amount of compression can be scaled up or down. When an image is compressed more (usually a lower number setting), it creates a smaller file. More compression also results in more visual distortion of the image – pros call these little changes made to the image artifacts.
Most photo editing apps like Photoshop allow you to see the changes in a photo during the Save process – take the controller down to a lower setting, and you’ll see a mushy looking image and a tiny estimated file size. The image to the right shows lots of artifacts, especially around the letters. Adjust the controller to the high and, and it becomes difficult to see any changes in the image. The image is also a much larger file. If file size is no matter – perhaps you are creating a library on a USB drive to view on a TV or to get printed at a shop – a JPEG file using a high quality compression setting is a safer bet than a PSD file or some other less-common format. For web purposes, pros typically balance visual quality against smaller file size to allow web pages to load as quickly as possible. Each image in a web page downloads when the page appears, so speed is important.
Knowing this about JPEG files, you may ask why PNG files are also an option. Great question! Although JPEG offers much in technical ability, it also has limitations. PNG files offer some extra capabilities… before we break it down, it’s important to understand that there are two different modes, or flavors, of PNG. The indexed color variety and the 24-bit variety. Indexed color images use a relatively small color palette to keep file sizes down. While JPEG and 24-bit images offer a range of millions of colors, the amount of data needed to store images containing millions of colors is high. If the palette is small – 256 colors or less – one can store a large sized image using much less data than an equal sized JPEG. If you are saving an image of a solid colored arrow over a solid color backdrop, only a handful of colors are at play, making it easy to store the image with very few bits of data.
The 24-bit variety of PNG is like JPEG without the compression option. PNG 24-bit offers lossless image quality, an advantage in some situations. Without compression, though, a 24-bit PNG file will be noticeably larger than a JPEG file created from the same photo. So, other than images with only a few colors, why would we want to use the PNG format?
There is one more special characteristic that PNG files offer – transparency. By their very definition, images are rectangles. Images are created with an array (grid) of pixels that are always laid out in a rectangular shape – yet we see all sorts of shapes in the real world. To work around the rectangular shape limitation, PNG files also store transparency information for each pixel, allowing shapes to be superimposed or layered in web browsers and other applications. The image to the right demonstrates that you can even make pixels partially transparent. Very handy!
Knowing these details, you can now think through the image creation process and make the best choices for the purpose. If it’s a photo or other image containing a wide range of colors AND you are OK with it being rectangular in shape, JPEG is your likely choice – especially when file size matters. If it’s a logo that only contains a handful of colors AND it’s a non-rectangular shape, then a transparent PNG is the best option.
See you next time!