February 7, 2015

PNG vs JPG for blogs and websites

There are some questions that come up again and again, however much you answer them. One such question, relating to use of graphic file-format on websites, is whether to use .png or .jpg images. As technology evolves, the answers are also likely to change as has happened in the case of .gif format. Nobody now asks whether to use.gif in place of other formats, unless it is a simple animation.

We’ll try to give all that a lay blogger needs to know, in simple terms.

PNG and JPG are both widely used graphic formats and both compress images to make them small, without perceptible quality loss for the purpose of websites. So which of the two to use on your blog or website?

Use PNG when the picture has objects with sharp edges and there are not too many colour gradients. That includes computer graphics and drawings. Use this format also if you want transparency; that means, the transparent parts of the graphic will show up the background under it, as shown below.

We placed a PNG file of eyes (with
transparent background) over
a London scene.
Here, we placed a JPG file of eyes
(with white background) over
the same London scene.
Use JPG in all other cases, and that includes all types of photographs.

Also remember that PNG is a lossless format while JPG is lossy. That means, if you keep editing the image and store it in PNG format, the quality of image will remain as it was (unless you have done something during editing that mars the quality); on the other hand, if you edit the file again and again and save it in JPG format each time, the quality will keep going worse.