What is the difference between JPG and PNG

JPG vs PNG - image formats in comparison

The two image formats JPG and PNG are two widely used image formats, both of which are very suitable for use on a homepage. Both formats work very differently in web design and have strengths and weaknesses. For this reason, in this article we will pit JPG against PNG and show in detail the conditions under which the image format PNG or JPG is more suitable. In a previous article, we covered the most important basics for editing images. SEO optimized images represent content and are an important aspect of search engine optimization.

The image formats can be created with different profiles and / or a modifiable quantization matrix. As a result, the values ​​achieved here are for quality and file size and cannot be compared with results in other tests.

PNG

The PNG format is an image format with which images can be reduced in size without loss. PNG stands for “Portable Network Graphics” and is the successor to the GIF image format. It offers an alpha channel comparable to the GIF format. Backgrounds can be made transparent with the help of the alpha channel. A transparent background is also required when creating icons.
Color gradients and many fine structures quickly lead to large amounts of data with PNG compression. In the following example, the logo was exported in PNG format in three different quality levels. Clicking on it opens a higher-resolution version. The example image is two-tone, has no color gradients and hardly any details. In order to clarify the limits of PNG, the example image is also colored with a color gradient.

Illustration 1

  • Format: PNG
  • Quality: high
  • Total size 160000px / resolución (400x400px): 34.3 KB
  • Total size 769129px / resolución (877x877px): 43.2 KB

Illustration 2

  • Format: PNG
  • Quality: medium (quantizer)
  • Total size 160000px / resolución (400x400px): 14.3 KB
  • Total size 769129px / resolución (877x877px): 21.0 KB

Illustration 1 detail

  • Format: PNG
  • Quality: medium (quantizer)

Illustration 2 detail

  • Format: PNG
  • Quality: medium (quantizer)

Illustration 3

  • Format: PNG
  • Quality: low (quantizer)
  • Total size 160000px / resolución (400x400px): 11.9 KB
  • Total size 769129px / resolución (877x877px): 15.5 KB

Illustration 3 detail

  • Format: PNG
  • Quality: low (quantizer)

Illustration 4

  • Format: PNG
  • Quality: high
  • Total size 160000px / resolución (400x400px): 89.1 KB
  • Total size 769129px / resolución (877x877px): 359.0 KB

Illustration 4 detail

  • Format: PNG
  • Quality: high

Illustration 5

  • Format: PNG
  • Quality: medium (quantizer)
  • Total size 160000px / resolución (400x400px): 25.7 KB
  • Total size 769129px / resolución (877x877px): 77.8 KB

Illustration 5 detail

  • Format: PNG
  • Quality: medium (quantizer)

Illustration 6

  • Format: PNG
  • Quality: low (quantizer)
  • Total size 160000px / resolución (400x400px): 13.0 KB
  • Total size 769129px / resolución (877x877px): 22.3 KB

Illustration 6 detail

  • Format: PNG
  • Quality: low (quantizer)

Image quality of png

Since PNG is a lossless image format, there is no loss of quality during regular export. In order to reduce the file size, the image information can be quantized. No significant artifacts can be seen between the two-tone image 1 and image 2, even at high magnification. The good image quality in image 2 is due to the simplicity of the motif and, in particular, to the lack of color, despite the low quantization.
With very strong quantization (Fig. 3), aliasing occurs.
With the multicolour motifs, the difference is much clearer. In the case of medium quality, clear halftone dots can be seen on the colored areas. While the two-tone motif was convincing with medium quantization, the result with the multi-colored motif is unsatisfactory. With the lowest quantization, the colors can no longer be mapped at all and the surfaces have raster patterns. While the result was still sufficient with the lowest quality for two-tone motifs, the quality fails completely with multi-colored motifs.

PNG file size

The reduced preview of image 1 is 34.3KB. The original with more than 4.8 times the resolution comes to 43.2 KB, which corresponds to an increase in the file size of 26%.
Image 2 was quantized low both in the preview and in the original image. Due to the small number of colors, no noticeable difference is noticeable even when enlarged. However, the image size could be reduced significantly and is 14.3 KB for the preview and 21.0 KB for the image in the original resolution.
Image 3 was quantized as low as possible (lowest quality). The picture shows clear aliasing (stair formation) on sloping edges. The file size for image 3 could be further reduced to 11.9 KB for the preview and 15.5 KB for the original resolution. The file size increases fairly linearly and has a very good relationship to the resolution.

The image size of the multicolour image in the highest quality is already 89.1 KB in the preview and an impressive 359 KB in the full resolution.
With medium quality, the image is 25.7 KB or 77.8 KB in size.
With the lowest quality it is 13 KB or 22.3 KB.

The average value is not calculated due to the poor quality with medium and low quantization and the resulting lack of suitability. Although the artifacts can be reduced by using higher quantization values, the quantization loses its raison d'être due to the significant increase in file size and other formats such as the JPG presented below are used.

JPG

The JPG (JPEG) format is a format for lossy compression of images. JPG has been the standard compression format in digital cameras for years. Only higher quality devices also offer the option to save photos without compression in RAW image format. When using JPG compression, the digital camera reduces the file size of a photo by a considerable amount.
For image post-processing, however, the use of the RAW format in the camera has a clear advantage in contrast to JPG, because the camera does not apply filters such as noise reduction to the image with the RAW profile. Even with dark areas, the RAW format has the advantage that information is still available in these image areas. The photographer can brighten the dark areas and make details visible. This image information is no longer available with JPG. The use of the RAW format is recommended for the photographer. The JPG format with small file sizes is very suitable for use in web design and the Internet.

In order not to falsify the test results through another recompression, the sections were scaled without interpolation and saved in PNG format without loss.

Illustration 7

  • Format: JPG
  • Quality: q = 100 (máximo)
  • Total size 160000px / resolución (400x400px): 66.0 KB
  • Total size 769129px / resolución (877x877px): 152.3 KB

  • Format: JPG
  • Quality: q = 84 (medium)
  • Total size 160000px / resolución (400x400px): 28.9 KB
  • Total size 769129px / resolución (877x877px): 62.5 KB

  • Format: JPG
  • Quality: q = 84 (medium) with psychovisual recognition
  • Total size 160000px / resolución (400x400px): 15.6 KB
  • Total size 769129px / resolución (877x877px): 44.9 KB

  • Format: JPG
  • Quality: q = 50 (low)
  • Total size 160000px / resolución (400x400px): 22.0 KB
  • Total size 769129px / resolución (877x877px): 46.1 KB

Illustration 7 Detail

  • Format: JPG
  • Quality: q = 100 (máximo)

  • Format: JPG
  • Quality: q = 84 (medium)

  • Format: JPG
  • Quality: q = 84 (medium) with psychovisual recognition

  • Format: JPG
  • Quality: q = 50 (low)

Illustration 8 color gradient

  • Format: JPG
  • Quality: q = 100 (high)
  • Total size 160000px / resolución (400x400px): 92.0 KB
  • Total size 769129px / resolución (877x877px): 315.7 KB

  • Format: JPG
  • Quality: q = 84 (medium)
  • Total size 160000px / resolución (400x400px): 28.5 KB
  • Total size 769129px / resolución (877x877px): 66.2 KB

  • Format: JPG
  • Quality: q = 84 (medium) with psychovisual recognition
  • Total size 160000px / resolución (400x400px): 13.8 KB
  • Total size 769129px / resolución (877x877px): 46.2 KB

  • Format: JPG
  • Quality: q = 50 (low)
  • Total size 160000px / resolución (400x400px): 19.8 KB
  • Total size 769129px / resolución (877x877px): 40.8 KB

Illustration 8 detail

  • Format: JPG
  • Quality: q = 100 (high)

  • Format: JPG
  • Quality: q = 84 (medium)

  • Format: JPG
  • Quality: q = 84 (medium) with psychovisual recognition

  • Format: JPG
  • Quality: q = 50 (low)

Image quality with JPG

A JPG compression with a quality value of 92 achieves the JPG image format a good visible image quality. With a quality value of q = 84, the one common Value, pronounced artifacts can already be seen, which are shown as the formation of blocks in the area of ​​edges. At q = 50, the number of artifacts continues to increase, and they become even more pronounced. At q = 50, a clearly recognizable gradation in the color gradient can also be seen in the multicolour example. The number of colors is noticeably reduced with this degree of compression.

JPG file size

The file size of the two-tone motif of 152.3 KB (877x877px) can be reduced significantly by 59% with a compression quality of q = 84 to 62.5 KB. A further reduction through stronger compression results in a file size of 46.1 KB at q = 50. However, this results in significant losses in quality. With the help of psychovisual recognition with q = 84, the file size can even be reduced below the value with q = 50 and is only 44.9 KB. The quality with psychovisual recognition at q = 84 is significantly better than compression with q = 50.

Psychovisual recognition is analogous to psychoacoustic compression such as MP3 audio, where only the one for the human ear relevant Information can be saved in the MP3 file.

The file size of the multi-colored motif of 315.7 KB (877x877px) can be reduced with a compression quality of q = 84 to 66.2 KB even more clearly than with the two-color motif by a whopping 79%. A further reduction through stronger compression results in a file size of 40.8 KB at q = 50. However, this also results in significant losses in quality. With the help of psychovisual recognition with q = 84, the file size of 46.2 KB is above the file size of q = 50 only 40.8 KB, but the file with psychovisual recognition at q = 84 is of better quality. However, the quality of the compression with psychovisual recognition is also worse in the multicolored example than with a compression of q = 84 without psychovisual recognition.

Direct comparison and conclusion on PNG or JPG

Both JPG and PNG have been standard in web design for many years. Most images can be displayed optimally with the two image formats.

With the PNG format, motifs with few colors and high-contrast edges, such as typography, logos, etc., can be used to achieve very good visual results with a small file size. The edges stay clean with no compression artifacts. Images with little detailed information can be reduced to a very small image size using PNG compression.

With the JPG format, all types of images can be highly compressed. The particular strengths of the JPG format lie in the good compressibility of detailed images like in photography. In such cases, PNG creates much larger files.

What is remarkable is the fact that an original PNG image that was compressed with JPG in between and is ultimately saved as PNG again, can be significantly larger than the original image. This is often due to the fact that with the help of PNG compression, especially with simple motifs, extremely small image sizes can be achieved, but the intermediate step through JPG compression adds additional compression artifacts. These artifacts are interpreted by the renderer as image information when they are encoded again in the PNG format, and thus lead to a correspondingly larger image file size.

Is WebP an Alternative?