Did you ever struggle with this choice? Did you wonder what’s the difference? Some people obviously do.
Let’s explore these image formats. And let’s start with a simple rule of thumb:
GIF format is suitable for “simple” images: those without many details or colours
JPG or JPEG format is best suited for photographs
PNG is for everything else and between. If you are not sure – use PNG format.
Of cause, we are talking about publishing images: otherwise, you can store them in any format your editor suggests. It’s only when you upload an image to your web site, or insert it into some software, that you’d have to worry if that default format is the best choice.
And what would you achieve by changing a format? Firstly, it should be a widely recognisable format – and all three of them are. Secondly, you would want to reduce the size of the image file. Again, any of these formats will compress your image. But they were designed to deal with different kinds of images, so while PNG will deliver a reasonable level of compression for any image, in some situations the other two formats may achieve much better results – but the quality of the image may suffer.
And that is why you need to understand what format better suits your needs. Oh, and why didn’t we mention BMP format? We won’t: why to store images as ridiculously large files?
Now we will look at these formats in more details, but for a start, here is a lay-down of major features they support:
|Can store all image colours||Only 256||Yes||Yes|
|Allows for transparent pixels||Yes||No||Yes|
|Stores exact pixels||Unless too many colours are used||No||Yes|
There is not much to explain here. Your editor saves the image into a PNG file, preserving all pixels and transparency options, and with a decent level of compression.
The only question is whether other formats would give you a smaller file.
This format is best suited for photographs. It is the only format of the three, which can store the exif information about the photo: camera model, exposure, etc.
It is also the only “lossy” format: each time you store your image into a JPG file, some small details are lost in the process (that is why it’s always a good practice to keeps the original JPG images). This is a feature of this format: the file does not store individual pixels of your image. Instead, the file contains data, which later allow to reproduce an image closely resembling your original.
The level of control over the format, which your editor will give you, may very, but it will present you with a choice of image quality, or level of compression. Smaller files, with higher compression, will contain less data, so the resulting image will resemble the original to less extent. The only practical way to determine the “optimal” level of compression is to save the image with different options, and examine the results.
This difference with the original will be only in small details – that is why photographs, which consist of millions of small imperfections from the start, may be compressed into JPG files without loosing much quality. A photograph in JPG format can be several times smaller than in PNG format.
On the other hand, pixel-perfect computer-generated images, and images with stretches of the same colour are the kinds of images which may not be suitable for this format. The most common mistake, in my opinion, is to use JPG format for logotypes, without noticing the distortion it creates.
Here is one such example. Everything looks perfect at Oracle products page… apart from Java logo. Let’s follow the link – and things get somewhat worse. Do you like this image? This is a snapshot from JSE 6 page, scaled to 75% of original size, and stored in JPG format. (We downloaded it on the 1st of September, 2013)
One can take the same snapshot and save it in PNG or GIF format, and achieve a better quality – and even better compression. While JPG image on Oracle site is 4.9 kB in size, the PNG file would require 3.4 kB, and GIF file (on the left) – only 2.6 kB.
So what was wrong with JPG image? Let us zoom into both and compare. It’s not so much that the text is less readable: it’s just a thumbnail in the end. But JPG image brings in imperfections into background areas, where they are more noticeable, and that’s what make it dizzy and… imperfect.
Read about GIF format in the next post: GIF, JPEG, PNG? Now to GIF