Since the beginning of the Internet, image formats such as JPEG, GIF and, a little later, PNG have been used on websites. Developed in the 1980s and 1990s, these formats are still the most widely used today. In addition, lightweight, powerful formats such as Google’s WebP and the High Efficiency Image File Format (HEIF) have been developed in recent years that are better optimized for today’s digital experiences.
To make the decision easier for you, let’s take a closer look at the strengths and weaknesses of the individual formats:
When JPEG was developed in the late 1980s, the digital world was still in its infancy. As the P in JPEG indicates, the origins of the standard lie in photography. JPEG was designed to make photos accessible as bytes over a network. For this purpose, all components of the image are saved by means of “lossy compression”, but unnecessary pixels are removed:
- This is particularly annoying with illustrations, where missing pixels are immediately apparent.
- The same applies to logos if the color scheme cannot be reproduced exactly.
- In addition, JPEGs support poorly transparent backgrounds or animations, as they are often used today.
- With lossy compression, details are lost every time you save, so image accuracy deteriorates over time.
The GIF format, developed around the same time, uses “lossless compression”. As the name suggests, the original data can be perfectly reconstructed from the compressed files.
This makes GIF much more suitable for illustrations / graphics and also preserves the exact color code of logos.
It is also possible to save images with a transparent background. And as everyone knows, GIFs can be animated. The main disadvantage of GIFs is the huge file size, which affects the performance of a website.
PNG is a raster graphics (bitmap) file format that also supports lossless compression. Due to patent problems with the GIF format, PNG was developed as an improved, non-proprietary alternative in the mid-1990s. The format was specially designed for use on the web and supports transparency. It is the most widely used image format on the web today. However, PNG could not overcome the size problem. Depending on how they are used, PNG images are often larger than JPEG.
In 2010, Google released WebP as a new lightweight image format that uses both lossy and lossless compression and tries to produce images smaller than JPEG. WebP enables transparency and can be animated. However, this format is more about achieving faster loading times for the images than achieving higher image quality. WebP is a good example of how difficult it is to introduce a new format. Despite the support of Google, WebP is used by less than one percent of the websites, mostly Chrome and Android native applications.
HEIF was developed in 2015 by the Moving Picture Experts Group (MPEG) with the help of Nokia and Apple. HEIF supports both single images and image sequences and enables both lossy and lossless compression. HEIF formats are on average around 30-40 percent smaller than JPEG. Since edits are saved separately within the same file, the quality of the original file is always preserved.
With HEIF it is possible to create 3D-like images.
Image sequences in cinemagraph style, such as the moving images known from the Harry Potter films, are also supported. HEIF allows movement to be displayed at the moment of recording, creating an immersive experience. The format also enables features such as High Dynamic Range (HDR), which offers greater color brightness, and Adobe Wide-Gamut RGB, which can store a wider range of colors. Since OS11, Apple has been saving pictures on its devices in HEIF format and converting them to JPEG files when sending them to other devices.
The coexistence of different formats is required
Since JPG, GIF and PNG were developed in the early days of the Internet, most devices and browsers support them. They’re the lowest common denominator that works for almost everyone, but they load more slowly and offer a limited user experience. For your website, you should therefore be prepared for the coexistence of old and new image formats. While the newer formats such as HEIF or WebP probably cover your marketing needs better, PNG & Co allow your audience to see your images perfectly, even if they use old computers, smartphones and browsers.
EXTRA: 5 criteria that make a really good website