Image file formats: When to use which format
By: Raul Tiru
Tags: Web Design, Image Processing, Design, Image, Photography

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 compressionProsConsSuitable forJPEGRasterLossy

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

GIFRasterLossless

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

PNGRasterLossless

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

TIFFRasterUsually 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

SVGVectorLossless

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

Start creating high-quality content

Read our whitepaper and discover how a DAM can help.

DOWNLOAD COMPARISON GUIDE

PREVIOUS STORY

← 9 tips to become happier

NEXT STORY

[Logo inspiration] Examples of Good, Bad, and Ugly Logos →