In our digital world, where would we be without the JPEG image? We pretty much all take it for granted. However, without it, how would we be able to take photos with a digital camera? How would we be able to design graphic images with our chosen design app? How would be get images into our blogs, social media posts, websites and . . . the list goes on?
Are you still taking it for granted? It’s been around since 1992 and is a dominant force in image formats. It was initially developed for digital photographs; the clue is in the title - Joint Photographic Experts Group. Over the years it has found popularity in handling the majority of images that we use in our digital world. However, just a minute old JPEG, hope you are not getting too big for your boots. Dare I mention transparent backgrounds. There, I’ve said it now, let’s talk about transparency.
Transparency
While JPEG images are very popular, they are unable to cope with transparency. Step forward the PNG - Portable Network Graphics - image format which was introduced in 1996. It’s advantage over JPEG is its ability to display transparent backgrounds. This is demonstrated in the below example. Here I am looking to display the Digital Alchemist logo in a semi-transparent circle on top of a photograph. You can see the PNG works really well, whereas the JPEG is unable to format the transparency and simply puts a white box as a background - not the desired effect. 1-0 to the PNG file.
So if you need transparent images, you’ll need to use PNG files.
Photographs v Graphics
I should mention that both the JPEG and PNG images are both raster formats. Essentially, think of them as a grid of lots of tiny coloured dots that build up a picture. OK, so if they are both raster formats and PNG is so great at transparency, why don’t we ditch the JPEG and use PNG for everything I hear you ask. Well there are two basic types of images; photographs and graphics.
Take a look at these two images: on the left a photographic image and on the right a graphic design. Now let’s compare the file sizes
Photo: JPEG 210kb PNG 1102kb
Graphic: JPEG 92kb PNG 44kb
So you see the photograph is a much smaller files size when using a JPEG format and the PNG is better for graphics.
JPEG
PNG
Image Compression & Quality
In the next example you can see the effect of reducing the JPEG quality (compressing the file) so that it’s down to PNG file size. There is a noticeable drop in the crispness of JPEG image. There is no winner or loser here, you should just have an appreciation of the purpose of each format and use them where appropriate. If you are using images for web or social media then reducing file size is a major consideration for optimising download speeds. If on the other hand you are working on a hi-resolution artwork file for a large format poster or roll-up banner etc, then quality of image would take priority over an optimum file size.
My rule of thumb:
Photos = JPEG
Graphics = PNG
Colour Mode: RGB v CMYK
When working with images for the Internet then you’ll only be concerned about RGB images.
RGB: Red Green & Blue
This is the colour mixing method that your display screen will be using to reproduce an image. When you work in print media you are more likely to be working with CMYK colours.
CMYK: Cyan, Magenta, Yellow and blacK
This is the colour mixing traditionally used by printing presses.
Since PNG was originally developed for Internet use, it only handles RGB images, whereas JPEG has provision for both RGB & CMYK. That's an extra point for JPEG.
Summary
There are dozens of image formats that you could use, however the most popular for everyday use in terms of digital media are JPEG and PNG. At a basic level your choice comes down to two considerations . . .
1: If you need a transparent background you'll need PNG.
2: Photographs favour JPEG, and graphics PNG.
