All important image formats compared. (Graphic: Shutterstock / Lucky clover)

Which image format is best for what? Especially on the web many factors are important: file size, color spectrum, transparency and scalability. We make the comparison.

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

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:

  • photographs
  • 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)

Continue Reading...

All important image formats compared. (Graphic: Shutterstock / Lucky clover) Which image format is best for what? Especially on the web many factors are important: file...

Read Post

All important image formats compared. (Graphic: Shutterstock / Lucky clover) Which image format is best for what? Especially on the web many factors are important: file...

Read Post