With the many different picture formats the overview can be lost. Some support transparency, others have a wide range of colors, and still others can only compress in a lossy way. Some are good for the web, others can not be displayed properly in every browser. The following comparison should help you make the right choice:
The differences between JPG, PNG, GIF, SVG and Webp
|image format||compression||color range||transparency||particularities|
|JPG / JPEG||lossy||about 16.8 million colors||No|
|GIF||lossless||Maximum 256 colors||Simple transparency (index)||Simple animations|
|PNG-8||lossless||Maximum 256 colors||4-bit transparency with 16 levels per pixel||No animations|
|PNG-24||lossless||about 16.8 million colors||Simple transparency (index)|
|PNG-32||lossless||about 16.8 million colors||Alpha channel|
|SVG||lossless||about 16.8 million colors||Alpha channel||Vector graphics can be scaled up without loss. Animations are possible as well.|
|webp||lossless||16.8 million colors (YUV420)||Alpha channel||Animations possible|
|lossy||16.8 million colors (RGBA)|
For photographs: JPG and JPEG
In addition to the JPG format, higher-quality cameras (such as SLR cameras) also output images in RAW format. The raw data format, which is stored without processing the camera, that is with all the raw data and thus allows the photographer a more detailed image editing, should not be our topic here. The most widespread are finished photographs in JPG format. A 16-bit color space per pixel is the minimum in which high-quality images should be displayed digitally. Therefore, the format also offers no support for transparencies, since this is not required for real photos and thus the file size can be stored.
What is the difference between JPG and JPEG?
To make it short: The two expressions mean the same thing. The image format created by the Joint Photographic Experts Group originally had the file extension .jpeg . In earlier versions of Windows, however, only three-digit file extensions were permitted, which introduced the extension .jpg under the same meaning . However, since Macintosh users could use the original four-digit extension .jpeg , both are still needed today. In the meantime, the multi-digit extensions are also permitted under Windows, so that on both operating systems all two endings appear again and again.
Lossy compression also greatly reduces file size. However, one should always keep the original file, as compression not only removes redundant data, so the original quality can not be recovered from the compressed image.
For that you should use JPG:
- Pictures with high color depth and dynamics
- With Google’s Webp (below) there is a new alternative to the older JPG format
The widespread image format GIF on the web
Thanks to social media, animated GIF images are very popular on the Web. Exactly this is currently the only meaningful use of the format: small logos and icons with low color depth. For other purposes the format is only conditionally recommendable. On the one hand, you only have the option of index transparency, on the other hand, your color spectrum with 256 colors is very limited. Depending on the application, vector graphics are more likely to be used for logos and icons because they can be scaled arbitrarily, enabling responsive design.
What is the difference between index transparency and an alpha channel?
If index transparency is mentioned, then only one bit per pixel with the information transparency “yes” or “no” is stored per pixel. For example, shadows can only be displayed to a limited extent because a realistic shadow in a logo becomes partly black and more transparent to the outside. Exactly this information can be visualized with an alpha channel. A typical color model for this is RGBA (red, green, blue and alpha). For each area then eight bits per pixel are stored.
For that you should use GIF :
- Little animations on the web (for example for social media)
- Due to small logos and icons, PNG or SVG is often more useful
PNG: for more transparency
PNG-8 can be compared with GIF, the other versions with JPG. The main difference lies in the better transparency and in the JPG format in a lossless compression.
PNG-8: The GIF alternative without animations
PNG-8 provides, as the name implies, eight bits plus four bits per pixel for transparency (ie 16 steps). As a result, on the one hand, as many colors as in the GIF format are supported, but on the other hand, a better transparency is possible. Due to the lack of animations, PNG-8 is only a logical alternative for simple logos, icons and graphics with a small color spectrum.
The image formats PNG-24 and PNG-32
Both versions of the PNG format use the same color space, each with eight bits per channel, allowing more than 16 million colors to be displayed per pixel. While PNG-24 supports simple index transparency, PNG-32 uses the other eight bits for an alpha channel and thus 256 transparency levels. The common belief in the Web that PNG-24 has an alpha channel is wrong. He became acquainted with Adobe, because in Photoshop and Illustrator only from PNG-8 or PNG-24 is mentioned. But if you use an alpha channel with PNG-24, Adobe has to produce a PNG-32 in order to accommodate the other eight bits. However, you will not be informed about it.
Overall, the PNG format with RGB color space is often associated with a relatively large file size. This is partly due to the support of transparency and lossless compression. The format is therefore useful for graphics with many different colors and a required transparency. With true multilevel transparency, even the larger 32-bit format needs to be accessed.
The PNG format is ideal for this:
- The 8-bit variant can be used for logos, icons and simple graphics
- The two larger variants are for graphics with required transparencies and a large color space
- In addition to JPG on the Web widespread and also useful
- If re-editing or exporting is required (enabled by lossless compression)