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/ |
Lossy/lossless compression | Pros | Cons | Suitable for |
| JPEG | Raster | Lossy |
|
|
|
| GIF | Raster | Lossless |
|
|
|
| PNG | Raster | Lossless |
|
|
|
| TIFF | Raster | Usually uncompressed (lossless), but may be compressed (lossy) |
|
|
|
| SVG | Vector | Lossless |
|
|
|
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.
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).
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.
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.
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, 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.
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.
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.
