Image formats demystified

With so many file formats available, it’s not always easy to figure out where to start, but certain file types give you far more flexibility with particular aspects of your design than others, so it’s good to give this some thought.

Things to consider when choosing a file format

Every file format that’s out there has its pros and cons. There may not be a one-size-fits-all approach to choosing a file format, but there’s a format for everything. If you’ve got a file you’re looking to export or print, and you’re wondering which file format to go for, it’s good to consider the following things:

  • Size—Do you have a lot of room to store your file? Will it need to fit in an email as an attachment?
  • Performance—Will the file be stored online? A large file with a lot of data could slow a website down.
  • Scalability—Will the file be edited or resized upon export? Does it need to be versatile? Certain file types lose a significant amount of detail upon being resized or scaled.

With these things in mind, let’s look at some of the more common file formats.

PNG

PNG (Portable Network Graphics) is a lossless file format, meaning the quality of data and fine detail stored within files of this type will be retained each time it is opened and saved.

PNG files provide an almost perfect representation of what’s on a screen, making it a good choice for screenshots and web graphics. It is a great choice if you’re working with a detailed, high contrast image containing text or line art, such as a logo, as it will not produce visual artifacts.

Another advantage of this versatile format is its ability to retain transparent areas of your graphic, in contrast to the JPG format which will render transparent areas as a solid white colour.

PNG images retain transparent areas.

One of the main drawbacks of PNG is its larger file size when compared to JPG, which can achieve similar results at a smaller size.

This file type is also not ideal for professional-quality printing as it does not support non-RGB colour spaces. In addition to this, PNG does not natively support EXIF data.

JPG

JPG (or Joint Photographic Experts Group—the team that developed the file format—for short) is a good choice for high-resolution web graphics with a smooth variation in colours, such as portraits and photographs of nature.

As JPG files can be saved at a smaller file size while still retaining a similar level of quality to a PNG or BMP file, this format is perfect for standard online graphics.

A unique advantage of JPG is that it allows you to manually adjust the degree of compression of each image, allowing you to balance the image quality up against the file size.

JPG images allow you to manually adjust the level of compression.

JPG is a lossy file type, losing unnecessary colour data as the image is compressed. Each time a JPG is edited and saved, more quality will be lost as a result.

Images with sharp lines and edges should also ideally be saved in a different format due to the noticeable visual artifacts produced between contrasting colours and objects when saving to JPG.

In addition to this, JPG files also do not support variations in opacity and transparency.

TIFF

TIFF (Tagged Image File Format) is the highest quality image format for print graphics that you can go for.

As the image is not compressed when exported to this format, it is lossless, much like a PNG file, making it the most suitable format for printing photos at a large size. Because it is lossless, it is also a good choice for files which are due to be edited further, as it can be altered without losing image quality.

TIFF images retain fine details better than many other image formats.

On the other hand, when picking a format for web graphics, TIFF is not the best choice due to its large file size. As it is generally uncompressed, it can take up a lot of storage space.

This large size also makes TIFF files difficult to send as email attachments and could lead to slower loading times if this file type is used for an online graphic.

EPS

The EPS (Encapsulated Postscript) file format is a vector file format that is perfect for collaborative vector-based designs containing a combination of graphics and text such as layouts, decorations, logos and maps. They are also fantastic when it comes to preserving the quality of composite images or raw images captured by a digital camera.

EPS allows you to edit complex files.

This format is supported by most graphic design programs, and because it is not pixel-based, it is able to be sized and scaled indefinitely without losing any quality. It is also supported by word processing software, making it easy to work with text.

Downsides of the EPS file format include slow saving times, incompatibility with a lot of software, and the fact that it is now considered to be an outdated format, generally replaced by the PDF.

SVG (for web)

SVGs (Scalable Vector Graphics) are an extremely versatile vector-based format that can be easily optimised for web use.

The key difference between SVGs and raster formats such as JPG and PNG is that SVG code can be easily read and manipulated via CSS and Javascript, making this format perfect for vector graphics that need to be displayed at various sizes for different web layouts while retaining a small file size.

Like EPS files, SVGs are incredibly versatile and can be resized or scaled without losing any quality or becoming pixelated.

SVG files will not lose quality upon resizing or scaling, unlike other file formats.

As SVGs are based on points and paths instead of pixels, they are unable to display the same amount of fine detail as a standard image format.

Older web browsers also have a hard time displaying SVG files. Legacy browsers do not support SVG.


Technical author
Caroline is one of our technical authors here at Serif, with a passion for dreaming up and illustrating fictional stories on the side. When she’s not writing, Caroline enjoys walking her dog, travelling the world, and baking one too many cupcakes.
Credits & Footnotes

Image sources:

Ezekiel Toy Store artwork created by and copyright of Sylvain Pfister-Secteur.

Antony Fitzgerald portrait created by and copyright of Ivan Weiss.

Lake photo from Shutterstock.

OVO branding created in-house.