Image Formats – JPEG, PNG, GIF, TIFF
JPEG, PNG, GIF, TIFF, … there are so many image formats. But when is which image format suitable? You want to ensure the best possible picture quality on all channels and devices without compromising quality or loading time. What format should you use, for example, for a logo or print publication? What are the advantages and disadvantages of all these image formats? What is the difference between raster and vector graphics? We will answer all these questions in this article.
© Jogy
© Jogy
© Jogy
© Jogy
© Jogy
© JogyComparison of the most important image formats
Below you will find our list of the 11 most popular image formats and their best use. But here is a short overview for those who are in a hurry.
| Vector / Pixel | Compression | Pro | Contra | Application | |
|---|---|---|---|---|---|
| JPEG | Pixel | With loss | The JPEG image format is supported by all operating systems. It is one of the most widespread image formats. The image quality to file size ratio is good. | JPEG does not support transparency or animation. In addition, there may be a loss of quality after multiple storage. | Size and detail of images for sending, saving or uploading to websites |
| GIF | Pixel | Without loss | The GIF format has a very small file size. It also supports animations. | There are better and newer image formats available today. Furthermore, only 256 colors are supported. | Websites, chats, buttons, navigation menus, icons and graphical texts |
| PNG | Pixel | Without loss | The PNG format supports the alpha channel for transparency. This is newer and more modern than the GIF format. In addition, compared to other image formats, the image format does not discard information when saved again. | The biggest disadvantage is the file size. In comparison to the JPEG format this is huge. Moreover, the format is not supported everywhere. | Icons, transparent or semi-transparent areas in images or logos – this again especially for websites. |
| TIFF | Pixel | Normally not compressed: without loss. But if compressed: with loss | No loss of quality because not compressed. High quality and accuracy. Channel transparency is also supported as well. | The format is not supported everywhere and it is not compatible with web browsers, which prevents it from being used on web pages. In addition, the file sizes are very large. | |
| SVG | Vector | Without loss | The SVG format offers a very high quality. By using vectors there is no loss of quality after scaling or zooming. | Needs special software for editing or HTML knowledge. | Printing, logos and for websites. |
Lossy and lossless compression
Some properties of image formats with terms like “lossy and lossless compression” or “raster” and “vector” may sound unfamiliar to you. So the first thing we’ll do is explain to you what this is all about. Compressing files saves a lot of storage space and also makes it easier to share files. Which file compression you should use depends on whether you want to keep the original data of a file.
Lossy compression means that data is partially removed from the image or information about pixels is reduced. The colors are then recalculated by a mathematical formula. There may be a visible loss of quality. But often the image quality does not play a very big role – e.g. on social media, where the images are only flown over anyway.
Lossless compression maintains image quality while attempting to preserve the small file size. It groups all pixels into the same color category, which facilitates indexing, and often removes the meta data of an image.
So when do you need a lossy – and when a lossless compression?
If you don’t mind losing part of the quality of the file to save disk space, choose an image format with lossy compression. If saving disk space is not your priority and you want to keep your file in its original state, choose lossless compression.
Image formats with vectors and rasters
Image formats with raster
Raster images are composed of a series of pixels or individual blocks to create an image. JPEG, GIF and PNG are all image formats with raster image extensions. Due to their defined size, pixels have a fixed share of the image. If you now enlarge or distort an image, the pixels are stretched to fill the space. This distorts them, resulting in blurred or unsharp images.
To maintain pixel quality, you cannot resize raster images without affecting the resolution. It is therefore important to remember to save raster files exactly in the dimensions required for the application. Of course you can always save the image in a smaller size (but in the same image format) without quality loss. However, enlarging does not work without noticeable loss. I’m sure you’ve noticed that before.
Vector Image Formats
Vector images are much more flexible image formats. They are built from proportional shapes and not from pixels. EPS, AI and PDF are perfect for creating graphics that require frequent resizing. Your logo and brand graphics should have been created as a vector and you should always have a master file to hand. The true beauty of vectors lies in their ability to change size at will. As small as a stamp or big enough to fit on a house wall. Everything always in the same high quality.
If you’re not sure if you have a vector version of your logo, here’s a little trick for you: call the company that printed your business cards or the supplier who embroidered your logo on a shirt. They often still have a vector file of your logo that they can send you for your records.
High versus Low Resolution
Have you ever heard a designer talk about DPI or PPI? DPI stands for “dots per inch” and PPI means “pixels per inch”. These units of measurement are essential for determining whether the density of pixels in an image is appropriate for the application you are using. The most important thing to consider when determining the required DPI or PPI is whether you are using the image for print or web.
- Websites display images at 72 DPI, which is a low resolution, but images at that resolution look really sharp on the web.
- This is not the case with printing. For printing an image it is essential that it is not less than 300 DPI.
These specifications are essential, as the image formats can vary greatly in this respect.
Do not try to cheat the system. You can conjure up a lot in Photoshop or alternative image editing programs – but unfortunately creating pixels from the air is not one of them. Pulling an image from the web and trying to fit it to the dimensions of your print project just won’t work. You will end up with a pixelated image that appears stretched and distorted.
11 different image formats
© JogyThe JPEG image format is the most commonly used image format. The image format developed in 1992 by the “Joint Photographic Experts Groups” 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, images lose their quality during processing and repeated storage. Image processing programs allow the user to choose how much the image should be compressed. JPEG is not suitable for logos or symbols that require adequate scalability. JPEG image formats are perfect for colourful photos and images with fading shades.
© JogyThe PNG extension is an improved image format version of the GIF extension. Since the GIF had only limited possibilities, the PNG format was introduced. The limited color support of GIF (see next section) was one of the reasons for developing PNG. Computers became more and more advanced and were able to produce a greater variety of colours. PNG images are compressed in two stages, namely pre-compressed and lossless data compression, also called “deflate”. This method, which delays the compression process, does not reduce the file size and makes it larger than the more aggressive compression of other image formats, such as the lossy JPEG format. PNG and JPEG do not differ much in quality when it comes to detailed photos. The file size of PNG is only much larger. PNG is therefore best suited for images with areas with lots of full color and sharp transitions.
© JogyWhen we think of GIF image formats, our first thought goes to funny cat images. The Graphic Interchange Format is a bitmap video format developed by Steve Wilhite in 1987. Lossless data compression is established by the Lempel-Ziv-Welch algorithm. The algorithm encodes 8-bit data as 12-bit codes of fixed length. Due to the 24-bit RGB color support (up to 256 colors), the GIF extension is not suitable for color-rich photos. Spot color graphics are recommended for this file type. Since the GIF extension is quite old, it is not really suitable for modern use. However, since the file type is used for banner ads, it is replaced by more dynamic HTML 5 formats like SVG.
© JogyA TIFF is a large raster file that does not suffer any loss of quality. This type of file is known to use “lossless compression”, which means that you keep the original image data no matter how many times you copy, resave or compress the original file. Although TIFF image formats can restore their quality after manipulation, you should avoid using this file type on the web – loading can take a long time. A nightmare for any professional photographer’s website. TIFF files are also often used when saving photos for printing.
© JogyVektorbasierte Bildformate helfen Designern, Bilder zu erstellen, die für eine unbegrenzte Skalierung geeignet sind. Das SVG, ein vom W3C entwickeltes XML-basiertes Vektorformat, unterstützt Designer bei der Erstellung von Designs, die ohne Qualitätsverlust einfach skaliert werden können. Das SVG-Dateiformat wird von den meisten modernen Webbrowsern unterstützt. SVG-Erweiterungen werden durch gzip komprimiert. Da die Dateien XML-basiert sind, können sie von vielen verlustfreien Datenkompressionsalgorithmen analysiert werden. Dies macht das Dateiformat sehr vielseitig und macht es bei vielen Designern zur Erstellung von Drucksachen und Logos beliebt.
Beispielbilder mit Vektoren
© JogyPSDs are files that Adobe Photoshop, the most popular graphics editing software of all time, creates and stores. This type of file contains “layers” that make it much easier to change the image. This is also the program that creates the raster file types mentioned above. The biggest disadvantage of the Photoshop image formats is that Photoshop works with raster images and not with vector images.
© JogyPDFs were developed by Adobe to capture and review rich information from any application, on any computer, with anyone, anywhere. I’d say they’ve been pretty successful so far. When a designer saves your vector files in PDF format, you can view them without any design editing software (if you downloaded the free Acrobat Reader software). He also has the option of using this file for further processing. This is by far the best universal tool for sharing graphics.
© JogyEPS is a file in vector format designed to create high-resolution graphics for printing. Almost any type of design software can create an EPS. The EPS extension is more of a universal file type (similar to PDF) that allows you to open vector-based graphics in any design editor – not just the most popular Adobe products. This ensures that you can transfer files to designers who do not use Adobe products, but may use Corel Draw or Quark.
© JogyAI is by far the most preferred image format by designers. Why? It has established itself as something like a standard in the graphic arts scene. This allows different agencies to work on the same project. Adobe Illustrator is the industry standard for creating artwork. Therefore it is most likely the program in which your logo was originally created. Illustrator creates vector graphics, the easiest file type to edit. Adobe’s Illustrator can also create all the above file types. Pretty cool stuff! It is by far the best tool in the arsenal of all designers.
© JogyINDDs (Indesign Document) are files that Adobe Indesign creates and stores. Large publications such as newspapers, magazines and e-books are often created with Indesign. You can combine files from Adobe Photoshop and Illustrator in Indesign to create content-rich designs that include advanced typography, embedded graphics, page content, formatting information, and other advanced layout options.
© JogyA RAW image is the least processed image type in this list. It is often the first format that an image has when it is created. When you take a photo with your camera, it is immediately saved as a RAW image. RAW is so to speak the “negative” of an image that has yet to be developed. Today this happens digitally, mostly already within the camera a developed JPEG picture is created, so that you can view it immediately and transfer it to the PC.
RAW image formats are valuable because they capture every element of a photo without processing it or losing small visual details. Eventually, however, you will pack them into one of the raster or vector image formats so that you can transfer and resize them for different purposes.
Various RAW image formats
There are several RAW image formats in which you can create images. Many of them are native for certain cameras. Here is a brief description of the four most common RAW image formats:
- CR2: This file extension stands for Canon RAW 2, which is actually based on the TIFF image format, making it inherently high quality like other image formats.
- CRW: This file extension is the predecessor of the CR2.
- NEF: This file extension stands for Nikon Electric Format. These image formats actually allow an extensive editing without changing the image formats, provided that the editing is done with a Nikon device or Nikon Photoshop plugin.
- PEF: This file extension stands for Pentax Electronic Format
- ARW: The file extension stands for the Sony RAW format.
Summary of the different image formats
There are many different image formats with different characteristics and optimal applications.
Here you have to distinguish between raster and vector image formats. Raster formats, in comparison to vector formats, cannot be resized losslessly.
The best known of the image formats is JPEG, also called JPG. It requires little storage space, but does not offer the best quality.
