File Format Graphics On Different Media

Which File Format To Use For Your Graphics

TIFF? GIF? JPEG? They all sound familiar, but what do these file formats mean and when to use them? We are here to give you a breakdown on each of the common file formats and help you decide which format is most suitable for your needs.

Raster Vs. Vector

One of the main factors why various file types exist is the difference between raster and vector images. Raster images are comprised of pixels while vector images are made up of pre determined mathematical formulas that connect curves and lines (paths). This results in pixelation and blurriness when a raster image is enlarged. On the flip side, vector images appear the same, as the mathematical formulas are constant. However, vector images are usually much bigger in size. The various file formats takes into account of these differences.

JPG/JPEG (Raster)

JPG File Format

Both JPG and JPEG stand for Joint Photographic Experts Group. In fact, they are interchangeable and mean the same thing. The only reason why there are 2 versions is because the Windows operating system requires all file extensions (.jpg) to be 3 characters long.

JPG is a raster file format that compresses images to a smaller size. Because you can scale the amount of compression – from lowest quality level of 0 to the highest of 12 – you can easily get a smaller file size if required. However, the drawback is that the more you compress the images, the higher the loss in quality/detail. Additionally, the compression causes data to be permanently lost every time a JPG file is opened, edited and then saved. This is why graphic designs are usually not stored in this format.

On the other hand, JPG is used for photographs because it keeps the files small and thus fast to upload. At the same time, the human eye is unable to detect the loss in colour detail of complex-looking photographs.

When to use it: Photos in print, Online Photos, Quick photo previews

PNG (Raster)


PNG File Format

A PNG Photograph using a transparent background


PNG is a raster file format that stands for Portable Network Graphics. Unlike JPGs, PNG uses lossless compression. This means that images retain quality and data even after they are being constantly edited. Furthermore, since PNG supports transparency, graphics can be created on a transparent background. This is especially important in graphic design because it allows designers to add effects such as drop shadows or glows. The downside is that PNG files tend to be significantly bigger than JPG files, especially for high-resolution photos. As such, it becomes slower and more difficult to share such photos.

When to use it: Web graphics – especially those with transparency, Images that require repeated exporting and saving, Logos

GIF (Raster)




GIF, an older raster file format, is short for Graphics Interchange Format. It can only display up to 256 colours, due to the fact GIFs were created in the 8-bit era thirty years ago. As such, GIFs are bad choices for photography or detailed graphics. The lack of colours also means that GIF files are very small. Like PNG, the format supports lossless compression.

However, GIFs are primarily used today because GIF files support animation. It is the most accessible format that allows easy frame control in animated graphics. In recent years, incorporating animation in social media (such as memes) has become one of the most popular trends. This has led to a resurgence in the popularity of GIF files.

When to use it: Animations, Email images, Memes

TIFF/TIF (Raster)


TIFF file format


Like JPG/JEPGs, both TIF and TIFF have the same meaning. Short for Tag Image File Format, they are very large raster files. These files can be saved in a variety of colour formats (CMYK for print, RGB for web and even grayscale) and compression forms. Ultimately, TIFF is a lossless file format that is known for maintaining image quality. The format can contain details and features such as layers, image tags and transparency. Hence, they are known to be “print-ready”. That being said, TIFF files are unsuitable for web usage because for the same reasons. They are simply too large and not optimised for browsers.

When to use it: High-quality print graphics, photo prints.

EPS and AI (Vector)




EPS stands for Encapsulated Postscript. Unlike the previous 4 raster formats, EPS uses a vector format. This means that images can be resized without any drop in sharpness or quality. Moreover, EPS files are known as “raw” or “working” files because they contain the fundamental elements of a graphic. Essentially, they can be manipulated easily. However, the disadvantage is that these files can only be opened using graphic design software. In Singapore, these softwares commonly include Adobe Photoshop or Illustrator.

AI is short for Adobe Illustrator Artwork. Similarly, AI is a vector format that serve the same purpose as EPS files, just that AI is proprietary (owned) by Adobe. Thus, they can only be opened using the Adobe Illustrator software.

As a result, designers are usually the ones that use EPS and AI files. While designers will send a copy of their EPS/AI file to clients, they would also convert such files to the more common raster or PDF formats (explained below).

When to use it: Creating original graphics or logos, Editing or manipulation of graphics.

PDF (Raster and Vector)


PDF file format


PDF, which stands for Portable Document Format, is one of the most popular and versatile file formats. In essence, it is a combination of raster and vector images. They key advantage of PDF is that they render files as they were originally created. The PDF files embed texts and graphics, allowing anyone to view high-resolution vector images easily. Additionally, the files can be viewed in multiple softwares – Phone, Tablet or PC – regardless of the Operating System (OS). But the catch is that PDF files are difficult to edit, and unsuitable for web graphics.

When to use it: Sharing of files, Documents, Printing

Have a question regarding the various file formats? Ask them in the comments below! On a related note, check out our article describing the differences between RGB and CMYK colour schemes.