A guide to popular image file formats

A digital image is generated when we take a photograph by using a mobile phone or a DSLR camera. Image file formats are of various types with their own pros and cons. It might seem to be a very trivial issue to you. But selecting the right image format is very important and critical depending on the purpose or task at hand.

Most websites on the internet, about 92% use images to give more context to the textual content. Only 8% of the websites don’t use any visual content. Many website owners don’t understand which image format is more suitable for them and massively slow down their website.

We can broadly classify image file format as either belonging to a Vector image format or a Raster image format.

Raster Image Format :

Raster Image formats are most commonly used on the web. It comprises file formats like. JPEG, GIF and. PNG. 

Raster image format uses a fixed number of pixels where every pixel has a defined colour, position and proportion based on the image’s resolution. Raster format cannot scale it beyond 100% without losing quality. The pixels in the Raster image formats are static. If you resize the images, then the quality suffers, and it often leads to blurry and pixelated images.

Vector Image Format :

Examples of vector images formats are file types like .SVG, .PDF, .AI & .EPS.

Vector images formats are more flexible, unlike Raster image format where every pixel has a defined shape, colour and position.

Vector graphics are based on mathematical calculations. It is guided by a system of lines and curves on the cartesian plane. It scales easily depending on the total area and not on any pixel.

Vector image formats can be enlarged easily and endlessly without the loss of quality. You can use this format where resizing is often required. Your company’s logo and other brand assets should be created in the vector format so that you can use the same logo or brand assets and resize it to use it for smaller items like visiting cards and letterhead to large surfaces like billboards.

Let’s see the major file formats below with their pros and cons so you can pick the best format depending on your use case.

1. JPEG – Joint Photographic Experts Group
2. PNG – Portable Network Graphics
3. GIF – Graphics Interchange Format
4. TIFF – Tagged Image File Format
5. RAW
6. BMP – Bitmap
7. PSD – Photoshop Document
8. SVG – Scalable Vector Graphics
9. AI – Adobe Illustrator

1. JPEG – Joint Photographic Experts Group

JPEG Is one of the most widely used file formats, and due to its popularity, it is the default option in most of the cameras.

JPEG file formats are used on the camera because of its small file size, which enables to store maximum images on the memory card as possible. The JPEG images are compressed in-camera. A typical 1GB memory card can hold approximately 595 images with a standard 5 Megapixels camera with default settings. As the quality of the camera/lens goes up the number of images stored goes down.

Some cameras have settings for the quality level of the JPEG images. The camera will perform less compression on the original image if we choose the highest quality.

JPEG file format is the preferred choice when you do not want to enlarge the image and use it personally to use it on email, social media and small prints.

JPEG Pros

• Small file size
• Universal Browser, OS and hardware support
• Default support in all the major image editing tools and software
• A good format to use on the websites, blog and social media

JPEG Cons

• Due to image compression, there is a loss in quality
• Enlarging the image would lead to pixelation

2. PNG – Portable Network Graphics

PNG file format was designed in the ’90s to improve on the existing GIF format. PNG is another image file format that is ideal for use in web browsers.

PNG uses lossless compression technique; therefore, it retains all the image details. One major advantage of the PNG is its small file size even after offering good quality. This is very useful on the internet to load the pages quickly.

Unlike the JPEG format where the image compression is lossy, PNG files are compressed in the lossless format; therefore, it retains the image’s quality. PNG file format is small compared to the JPEG, and it is widely used on the internet as it loads very quickly due to small file size. Another major advantage is the ability of PNG to allow for total or partial transparency which is vital for logos and overlays.

PNG Pros

• It uses lossless compression
• Option to maintain transparency
• Small file size

PNG Cons

• Not good enough for printing on large surface areas

3. GIF – Graphics Interchange Format

Like JPEG and PNG, GIF is also ideal for use on the Internet. It uses lossless compression but limits the file to 8 bits per pixel with a limited palette of 256 colours.

It is internet friendly due to 8-bit limitation with small file size, and it is widely used for showing animations. It is used on many websites as a guide and tutorial to demonstrate how to complete certain tasks. 

GIF Pros

•  The minimal file size is ideal for use on the web
• It contains animation which is ideal for webpages

GIF Cons

• Limit of 256 colours
• Does not support partial transparency

4. TIFF – Tagged Image File Format

TIFF belongs to the category of Raster Image format. It is widely used in the publishing industry. It is not compressed because it offers very high quality and takes up lots of storage space on the computer and a memory card.

TIFF files provide the opportunity to do extensive post-processing as the file is usually uncompressed. Some high-end cameras offer TIFF as the highest-quality image format.

It is aimed towards preserving the image quality rather than optimize for the file size.

TIFF Pros

• High-quality image
• Ideal for storage and extensive post-processing

TIFF Cons

• Large file sizes
• Limited support on web browsers

5. RAW

RAW image file formats are mostly available on the advanced compact cameras, DSLRs and the mirrorless cameras.

It is the option you want to use if you desire the highest quality image from your camera. It is a preferred option for professional photographers. The main reason for the RAW file format’s high quality is that it offers up to 16,384 different colours compared to just 256 in the JPEG format. 

Due to very high quality and retaining of all the information originally captured, post-processing in editing software can be done for white balance, contrast, saturation, sharpness etc.

It requires more storage space to save the photos on computer and memory cards, and each file can easily be in the range of 20 – 40 megabytes. Before using the image for any purpose like web, print, etc., a basic understanding and knowledge of editing software are necessary.

RAW Pros

• Image captured is of the highest quality with more colours
• Post-processing to get the desired quality

RAW negatives

• Knowledge of photo editing is required
• Not ideal for use on the web without processing

6. BMP – Bitmap

Microsoft created bitmap in the ’90s for using it on the Windows platform. Like PNG, it is also a lossless file format, and nowadays it is also recognized by other programs like Macs.

A bitmap is large files and offers little to no compression as colour data is stored in each pixel. Therefore it is ideal for the use in print but not for the web.

BMP Pros

• Ideal for printing
• Supported by all the modern browsers and Operating systems

BMP Cons

• The large file size makes it non-ideal for the web
• Not used widely nowadays

7. PSD – Photoshop Document

As the name suggests, it is the image format used to create, save, and edit image documents on Adobe Photoshop. It is the most widely used software by graphic design professionals across the world.

The major advantage of working with this file format is that it allows you to manipulate multiple individual layers rather than on the main image. It is more flexible in terms of manipulating image and fine-tuning because of layering.

PSD Pros

• Heavy manipulation of the image is allowed
• Once editing is done, PSD file format can be saved as any other file format

PSD Cons

• The file size is large due to layering
• Cannot be used on the web browsers

8. SVG – Scalable Vector Graphics

SVG was developed by W3C ( World Wide Web Consortium ) as a markup language to render the browser’s 2-dimensional image.

It is not based on the Raster file format. It uses XML text to outline the lines and shapes similar to how graphs are created using mathematical formulas.

SVG allows you to scale up your image infinitely without loss in quality. Due to this, SVG is the ideal format for logos, illustrations and anything else you want to keep free and highly responsive.

SVG Pros

• Small file size
• Can be scaled infinitely without the loss in quality
• Supported on all the major web browsers

SVG Cons

• A not ideal format for images and complex drawings
• Not supported by basic image editors like MS paint

9. AI – Adobe Illustrator

Adobe Illustrator is another file format developed by Adobe to offer an infinite scale up and scale down for an image.

Unlike PSD, Adobe Illustrator would allow you to be upscale and downscale an image without losing quality. Being a file that can be opened and manipulated only by Adobe Illustrator software is not supported by any web browsers or by default image viewers.

AI Pros

• Scale up or scale down an image easily without losing quality

AI Cons

• Large image files
• Not suitable for using it on the web directly and requires Adobe Illustrator