Ultimate guide to graphic image file formats

Having entered the hallowed portals of today’s digital world, you have to be able to speak its language if you want to survive and flourish. No matter what your calling is, a web designer, a photographer, a graphic designer or just a casual surfer, you can’t avoid dealing with image files and their formats.

So don’t be caught napping- arm yourself with the necessary arsenal and learn to distinguish between the various image file formats that are generally used, else you’re left out in the cold.

Just as you have .doc, .docx, .rtf as an extension for word files, every image file has an extension and the last three letters will tell you what file it is.

Depending on the program and the purpose for which it is created, different extensions are used to save image files and it’s very important to know the difference between each file format. However, before doing so, you would need to understand the difference between a raster image and a vector image.

Computer graphics are used to create images: Raster images or vector images. If you zoom a Raster image, you will find that it is made of small squares called pixels. Digitised photographs, artwork and non-line art images are examples of Raster compositions. The most common Raster formats are GIF, JPEG, TIFF, PCX and BMP files.

Vector graphics can be used to create shapes, lines, polygons, whatever shape you fancy and hence are not used to draw photo images. They are usually based on certain mathematical formulae and are considered ideal for creating logos, letterheads and even fonts. Vector images are more versatile and are considerably smaller than their Raster counterparts. EPS, CGM, WMF, SVG are examples of vector image formats.

Images have a tremendous impact on website performance and attention must be paid to image formats to ensure quality and fast loading time. 

As image files can quickly fill up hard drives and use up assigned cloud storage space, they need to be compressed. 

Compressed files can be easily shared with others. So while compressing an image file, it’s important to use the correct format. Failing to do so can result in degradation of image quality or larger file size than intended.

All image files fall into two distinct categories: Lossy and Lossless. Simply put, Lossy refers to compromising image quality in exchange for a file of smaller size, whereas Lossless refers to image formats where the compression can be reversed and the original image retrieved.

You can use free online image compression tools to speed up your workflow.

PNG and TFF files are examples of lossless format, whereas JPEG is an example of the lossy format.

 Let’s take a look at the ‘big three files’ formats that are used for images on the Web.

GIF (Graphics Interface Format)

Like JPEG, this format has been around for some time and it supports animation- all those blinking images that you see on the Web are GIF. It’s a very popular format and one that we see every day in the form of emoticons, icons, navigational buttons and other small animations. As the GIF format is limited to 256 colours, it isn’t particularly kind to photographs. If an image has less than 256 colours, GIF renders them perfectly, but if it exceeds that, then all the colours will be approximated within its 256 colour palette. That’s why it’s great for monochrome images.

JPEG aka JPG (Joint Photographic Experts Group)

This is perhaps the most widely used image compression mechanism that is used for photographs and complex still images. JPEGs are good for the web as the file sizes are smaller. Compressed image files are generally of JPEG format because it can display millions of different colours, and make subtle distinctions between light and dark shades. It is supported by most operating systems, many web browsers, digital cameras and any Internet-enabled device. With many compression levels possible, JPEG renders well with small image sizes with the quality intact. Progressive JPEGs afford greater attraction to viewers as an initially fuzzy image renders in a focused manner alongside image loading.

PNG(Portable Network Graphics)

Compared to JPG and GIF, PNG is relatively recent as it was invented to overcome the limitations of GIF. It is used for still images and can retain all the details of the original image. The 24-bit variety can display more than 16 million colours while the 8-bit version supports 256 colours. As PNG supports transparency, such images can be superimposed over other images to create different backdrops. PNG images don’t degrade while editing but these files tend to be larger than JPG files.

TIFF (Tag Image File Format)

TIFF is good for pixel-based images that need to be printed. It is used for archiving or storing superior raster type graphics. TiFF files are large but retain quality and data. It is lossless and each time a file is edited and saved, there is no loss of quality (if uncompressed). They are generally not used to display web images because of file size.

PSD (Photoshop Document)

This is the default format for Photoshop files and this format is best for photographs as Photoshop creates raster images. This is used only when there is a need to preserve transparency, layers, text and so on. However, the files can only be opened by Photoshop. Photoshop can be a complex application to understand, so why not give our free Photoshop Beginners tutorial a try?

RAW

This is a file format, where information is not compressed but is received directly from the digital camera. The images live up to their name because they're untouched. This means that the quality of images is superior and editing can be done to rectify problem areas without degradation of image quality. The files size of RAW images is large as they contain a lot of uncompressed data.

BMP (Bitmap)

These are Windows image files that are uncompressed and large. Often referred to as Paint Images, bitmaps are generally of superior quality and render well on Window Machines. Bitmaps are made up of pixels that are placed in such a way as to create a picture or a design. They are usually bright and vibrant to look at. Unfortunately, they are not good for the Web and are limited to Windows programs only.

PDF (portable document format)

Today, this format has become an industry standard to transfer and reliably share documents. Documents are displayed electronically and the format is independent of the browser, the OS, or the hardware that it is viewed on. Data of all kind can be embedded in the file and it is very easy to use.

EPS (Encapsulated Post-Script)

This is a file extension for graphics files in Adobe Illustrator. Essentially the file contains vector images that can be resized to fit your needs. Used in printing, the vector images retain original quality even when the size is altered.

SVG (Scalable Vector Graphics)

Stated to be the most common vector graphics format that is supported by many modern browsers. Highly suitable for plans, designs and complex diagrams. Zooming doesn’t cause any loss of quality in an image- so it renders well on small devices as on large. However, it is not recommended for photographs.

If you want to push your website design up a couple of notches, knowing how to add compelling images is one way to go about it. Generally, you’d need to use the JPEG format for Web design and use PNG, GIF or SVG only when you particularly need to use them.

Article created by: Pankaj Shah | DCP Web Designers