As a graphic designer, you want to ensure the best image quality across all channels and devices, without slowing down the page load time. JPEG, PNG, GIF, TIFF… There are so many formats to choose from. So which formats are suitable for logos, navigation menu icons, and printed material? What are the pros and the cons of these formats?

Image type Vector/

Raster Lossy/lossless compression Pros Cons Suitable for JPEG Raster Lossy Supported by all operating systems Size/quality ratio is good Does not support transparency Does not support animation Loss of quality after it’s saved multiple times Images High detail High quality pictures Web GIF Raster Lossless Assures very small size of images Supports animation There are better/newer image formats available supports only 256 colors Buttons Navigation Menus Icons Graphic Texts Web PNG Raster Lossless Supports alpha channel transparency (more advanced than GIF’s transparency) Doesn’t discard information Bigger file sizes than JPEG not widely supported Icons Flat areas of logos Transparent or semi-transparent images Web TIFF Raster Usually uncompressed (lossless), but may be compressed (lossy) Isn’t compressed, so no loss of information High quality and accurate images Supports channel transparency Not widely supported Size is incompatible with web usage Large file sizes Printed material SVG Vector Lossless High quality No loss of information once scaled/zoned Keeps layers intact Not widely supported Printed material Logos Web

Lossy vs. lossless compressions

Some terms may sound unfamiliar such as lossy and lossless compression or raster and vector, so let's introduce these: Compressing files saves a lot of space and makes it easier to share files. The type of file compression you use depends on whether you want to preserve the original data of a file.

Lossy compression means that data from an image is partially deleted; Colors are averaged out through a mathematical formula.

Lossless compression preserves image quality, while keeping the size of the file small. Lossless compression groups all the pixels into the same color category, making indexing easier.

When do you use a lossy instead of a lossless compression? If you want to save space, and you are not concerned with losing some of the quality of the file, choose a lossy compression. If saving space is not your priority, and you want to keep your file in its original quality, go for a lossless compression. If you want to reduce the file size, you can revert back to its original state.

Raster vs. Vector

Going for vector as opposed to raster depends on whether you want to scale or resize images. Raster images are built-up in pixels, which means that when you enlarge an image, you stretch the pixels and lower the quality. Vector images are made-up of points, curves and lines that are defined by mathematical equations. Without going into further detail, it basically means that enlarging an image does not affect the quality.

When do you use a vector program and when do you use a raster file format? That depends on what you are creating.

Vector: If you are designing an illustration with clear contrasts between the elements of the design.

Raster: For images with blending colors and continuous tones (such as photographs).

Image file formats

JPEG

The JPEG file format is the most common file extensions for images, which was created in 1992 by the Joint Photographic Experts Groups. JPEG is a lossy compression for digital images. The compression used is the discrete cosine transform, which converts the frame into a 2D domain through a mathematical process.

Due to the lossy compression method, the images lose their quality when edited and saved multiple times. Software tools give the user the option to choose how much the image should be compressed. JPEG isn’t suited for logos or icons, which require proper scaling possibilities. JPEGs are perfect for color-rich photos, and images with blending color tones.

GIF

When we think about GIF, the first thing that comes to mind are funny animated images. The Graphic Interchange Format is a bitmap video format created in 1987 by Steve Wilhite. The lossless data compression is established through the Lempel–Ziv–Welch algorithm. The algorithm encodes 8-bit data at fixed-length 12-bit codes.

Due to the 24-bit RGB color support (up to 256 colors), the GIF-extension isn’t suitable for color-rich photographs. Graphics with solid colors are recommended for this file type. Since the GIF extension is pretty old, it’s not really suitable for modern usage. Nevertheless, the file type is still used for banner ads, but is being replaced by more dynamic HTML-5 formats.

PNG

The PNG (Portable Network Graphics) extension is an improved version of GIF extension. Since the GIF had limited capabilities, the PNG format was introduced. The limited color support of GIF was one of the reasons why PNG was developed. Computers became more advanced and were able to create a wider variety of colors.

PNG images are compressed in two stages, the pre-compression stage and the lossless data compression stage, called DEFLATE. This method, which delays the compression process, does not decrease the file size, making it bigger than the more aggressive compression in the lossy JPEG format.

PNG and JPEG do not differ much in quality when it comes to detail-rich photographs. However, the file size of PNG is much bigger. PNG is, therefore, best used for images which contain areas with a lot of solid color and sharp transitions.

TIFF

TIFF, created by Adobe Systems in 1986, is a popular file format amongst graphic designers, publishers and photographers. TIFF is based on a lossless format which ensures image quality even post-editing. TIFF is very versatile and with variants such as BigTIFF, users can create file sizes up to 4GB.

Since TIFF extensions are big file sizes, they are less suited for web usage, and are therefore better for editing and preservation.

SVG

Vector-based images help designers create images that are fit for infinite scaling. The SVG, an XML-based vector format developed by W3C, helps create designs that can be easily scaled without quality loss. The SVG file format is supported by most modern web browsers.

SVG extensions are compressed through gzip. Since the files are XML-based, they can be analyzed by many lossless data compression algorithms. This makes the file format very versatile, making it a format of choice when it comes to creation of print materials and logos.

Different image formats in your marketing department

Most of the digital illustration magic in the corporate setting happens in the marketing department. The process of creating marketing material to publication is often managed with design software such as Photoshop and InDesign.

Although Photoshop and InDesign are perfect tools for creating, saving and converting different image extensions, they not support collaboration amongst co-workers and partners.

To ensure that everyone within an organization can access MarCom content, businesses often turn to Digital Asset Management software. DAM is ideal for managing, distributing and creating MarCom content. Since most DAM solutions are offered as a SaaS, they support on-demand access from any location and device.

Digital Asset Management allows users to download files in almost all file extensions, including JPEG, GIF, PNG, AI and PSD.

Although InDesign is the go-to software when it comes to creating high-quality MarCom content, not everybody knows how to use it. Thanks to templates which can be easily stored in a DAM, creating high-quality, on-brand MarCom content can now be done by everyone within an organization.

Other related articles