JPEG and GIF: Image file formats and their uses

Yesterday I looked at the size issues with images to be used in print or on screen. Now let’s look at the formats available.

There are many image formats, but as a rule, if you’re providing images for print, look for ‘lossless’ formats, which means that no information has been discarded in order to reduce the file size. If the images are for the web, look to be using formats which web browsers can read – i.e. JPEG, GIF or PNG.

Finding an image which has been in a lossless format since its creation is hard. The closer you can get to the original image supplied by the photographer, the better, even back to what’s known as the “raw” image if available. If the image has been in TIFF format since its inception, there shouldn’t have been any quality loss, but the chances are that you’ll get it in JPEG format, and with that, you really don’t know how much quality loss there might have been along the way. Just don’t resize the image any more than is absolutely necessary – every time you do this introduces more loss of quality.

For the web, you want the image file size to be as small as possible without losing too much (or any) quality. Different image formats provide different amounts of file size reduction (‘compression’), but as a rule, use the JPEG format for photos and the GIF format for logos or illustrations with flat colours. The GIF format handles blocks of colour better, whereas the JPEG format is better at handling the sheer number of colours found in a photo. PNG is a smart compromise, offering the best of all worlds, but normally results in a larger file size than GIF or JPEG.

The JPEG format cannot handle transparency, which you’ll need if your image is a cutout (like a logo) that may appear on top of a coloured background. Also, if a JPEG file has been resized or saved badly during its lifetime, blocks of flat colour will lose their ‘flatness’ and you’ll get ‘artifacts’ – we’ve all seen the effect, even if we don’t know what it’s called.

text

text

bus

bus

In summary, as with image size, don’t change file formats either, unless you have to – leave that to your professional designers. However, if you’re publishing photos yourself to your website, keep any resizing and re-saving to a minimum, and use the JPEG format. If you have the appropriate software to test out differing compression amounts (such as Photoshop), use it to compare the size vs quality tradeoff.

Discussion

  1. Liam

    You can further compress JPG and PNG images for free at the tinypng website. Been using it myself for a few years. It produces amazing results with little difference in quality. They also offer a paid Photoshop plugin.

Leave a Reply

Your email address will not be published. Required fields are marked *