JPG vs PNG - Comparison of Image Formats

The two image formats JPG and PNG are two widespread image formats, both of which are very well suited for use on a homepage. Both formats basically work very differently and have strengths and weaknesses.
For this reason we have JPG compete against PNG in this article and show in detail under which conditions the image format PNG or JPG is more suitable. In an earlier article we have already explained the most important basics for editing pictures. SEO optimized images are “content” and are an important aspect in search engine optimization.

The image formats can be created with different profiles and/or a modifiable quantization matrix. As a result, the values ​​obtained here of their quality and file size are not comparable to results in other tests.

PNG

The PNG format is an image format with which lossless pictures can be reduced in size. PNG stands for “Portable Network Graphics” and is the successor to the GIF image format. It offers an alpha channel similar to the GIF format. The alpha channel makes backgrounds transparent. A transparent background is e.g. needed when creating icons et cetera.
Color gradients and many fine structures quickly lead to high data volumes in PNG compression. In the following example, the webdesign aus Braunschweig Logo in PNG format was exported in three different quality levels. Clicking on it opens a higher resolution version. The example picture is bicoloured, has no colour transitions and hardly any details. In order to clarify the limits of PNG, the sample image is additionally colored with a color gradient.

PNG Bild in voller QualitätBild 1

Format: PNG
Qualität: hoch
Größe bei 160000px Auflösung (400x400px): 34,3 KB
Größe bei 769129px Auflösung (877x877px): 43,2 KB

PNG Bild in mittlerer Qualität mit Quantisierungswert 10Bild 2

Format: PNG
Qualität: mittel
Größe bei 160000px Auflösung (400x400px): 14,3 KB
Größe bei 769129px Auflösung (877x877px): 21,0 KB

Ausschnitt PNG in voller QualitätBild 1 Ausschnitt

Format: PNG
Qualität: hoch

Ausschnitt PNG in mittlerer QualitätBild 2 Ausschnitt

Format: PNG
Qualität: mittel

PNG Bild in niedriger Qualität mit Quantisierungswert 2Bild 3

Format: PNG
Qualität: niedrig
Größe bei 160000px Auflösung (400x400px): 11,9 KB
Größe bei 769129px Auflösung (877x877px): 15,5 KB

mehrfarbiges PNG Bild in bester QualitätBild 4

Format: PNG
Qualität: hoch
Größe bei 160000px Auflösung (400x400px): 89,1 KB
Größe bei 769129px Auflösung (877x877px): 359,0 KB

Ausschnitt PNG Bild in niedriger QualitätBild 3 Ausschnitt

Format: PNG
Qualität: niedrig

Ausschnitt mehrfarbiges PNG Bild in hoher QualitätBild 4 Ausschnitt

Format: PNG
Qualität: hoch

mehrfarbiges PNG Bild mit Quantisierungswert 10Bild 5

Format: PNG
Qualität: mittel
Größe bei 160000px Auflösung (400x400px): 25,7 KB
Größe bei 769129px Auflösung (877x877px): 77,8 KB

mehrfarbiges PNG Bild mit Quantisierungswert 2Bild 6

Format: PNG
Qualität: niedrig
Größe bei 160000px Auflösung (400x400px): 13,0 KB
Größe bei 769129px Auflösung (877x877px): 22,3 KB

Ausschnitt mehrfarbiges PNG Bild mit Quantisierungswert 10Bild 5 Ausschnitt

Format: PNG
Qualität: mittel

Ausschnitt mehrfarbiges PNG Bild mit Quantisierungswert 2Bild 6 Ausschnitt

Format: PNG
Qualität: niedrig

Image quality of PNG

Since PNG is a lossless image format, there are no quality losses during regular exporting. To reduce the file size, the image information can be quantized. Between the two-color image 1 and image 2 no appreciable artifacts can be seen even at high magnification. The good picture quality in picture 2 goes back to the simplicity of the subject despite the low quantization.
Very strong quantization (Figure 3) causes aliasing.
With the multicolour motives the distinction is much clearer. At medium quality, clear halftone dots are noticeable on the colored areas. While the two-color motif was able to convince with medium quantization, the result in the multi-colored motif is insufficient. At lowest quantization, the colors can no longer be imaged and the areas have raster patterns. While the result at low quality for two-tone subjects was still sufficient, the quality of full-color motives is completely gone.

PNG file size

The preview size of image 1 is 34.3KB. The original image with more than 4.8-fold resolution comes to 43.2 KB, which is just an increase of the file size of 26%.
Image 2 was quantized with a low vlaue in both the preview and the original image. Due to the small number of colors, no significant difference is noticeable even when magnified. The image size could be significantly reduced and is 14.3 KB for the preview and 21.0 KB for the image in original resolution.
Image 3 was quantized as low as possible (lowest quality). The picture shows clear aliasing (staircase formation) on oblique edges. The file size for image 3 was further reduced to 11.9 KB for the preview and to 15.5 KB for the original resolution. The file size increases quite linearly and stands in its 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 at the full resolution with a proud 359 KB. At medium quality, the image is 25.7 KB or 77.8 KB.
At the lowest quality, it is 13 KB or 22.3 KB.

The calculation of the average value is dispensed with due to the poor quality with medium and low quantization and the lack of suitability. Although the artifacts can be reduced by higher quantization values, the quantization loses its right to exist again due to the then increasing file size and other formats like the JPG image format.

JPG

The JPG (JPEG) format is a format for lossy compression of images. In digital cameras, JPG has been the standard compression format for years. Only higher-quality devices also offer saving of photos without compression in RAW image format. When using JPG compression, the digital camera reduces the file size of a photo by a significant amount.
For image post-processing, however, the use of the RAW format in the camera has clear advantages, in contrast to JPG, because the camera in the RAW profile does not use destructive filters and saves all possible image information. Apply Noise Reduction to the image. The RAW format has the advantage, even with dark areas, that information of dark areas is still available. The photographer can lighten the dark areas and make details visible. This image information is lost in JPG.
For the photographer, the use of the RAW format is recommended. However, for use in web design and the Internet, the JPG format with small file sizes is very well suited.

In order not to falsify the test results by a recompression, the sections were scaled without interpolation and stored lossless in PNG format.

JPG in voller QualitätBild 7

Format: JPG
Qualität: q=100 (maximal)
Größe bei 160000px Auflösung (400x400px): 66,0 KB
Größe bei 769129px Auflösung (877x877px): 152,3 KB

multicolour JPG mit Quantisierungswert 10Bild 8

Format: JPG
Qualität: q=84 (mittel)
Größe bei 160000px Auflösung (400x400px): 28,9 KB
Größe bei 769129px Auflösung (877x877px): 62,5 KB

JPG in voller QualitätBild 7 Ausschnitt

Format: JPG
Qualität: q=100 (maximal)

multicolour JPG mit Quantisierungswert 10Bild 8 Ausschnitt

Format: JPG
Qualität: q=84 (mittel)

multicolour JPG with enabled guetzliBild 9

Format: JPG
Qualität: q=84 (mittel) mit psychovisueller Erkennung
Größe bei 160000px Auflösung (400x400px): 15,6 KB
Größe bei 769129px Auflösung (877x877px): 44,9 KB

Multicolor JPG in lowest quantiser 2Bild 10

Format: JPG
Qualität: q=50 (niedrig)
Größe bei 160000px Auflösung (400x400px): 22,0 KB
Größe bei 769129px Auflösung (877x877px): 46,1 KB

multicolour JPG with enabled guetzliBild 9 Ausschnitt

Format: JPG
Qualität: q=84 (mittel) mit psychovisueller Erkennung

Multicolor JPG in lowest quantiser 2Bild 10 Ausschnitt

Format: JPG
Qualität: q=50 (niedrig)

JPG in voller QualitätBild 11

Format: JPG
Qualität: q=100 (hoch)
Größe bei 160000px Auflösung (400x400px): 92,0 KB
Größe bei 769129px Auflösung (877x877px): 315,7 KB

multicolour JPG with quantiser 10Bild 12

Format: JPG
Qualität: q=84 (mittel)
Größe bei 160000px Auflösung (400x400px): 28,5 KB
Größe bei 769129px Auflösung (877x877px): 66,2 KB

JPG in voller QualitätBild 11 Ausschnitt

Format: JPG
Qualität: q=100 (hoch)

multicolour JPG with quantiser 10Bild 12 Ausschnitt

Format: JPG
Qualität: q=84 (mittel)

multicolour JPG with enabled guetzliBild 13

Format: JPG
Qualität: q=84 (mittel) mit psychovisueller Erkennung
Größe bei 160000px Auflösung (400x400px): 13,8 KB
Größe bei 769129px Auflösung (877x877px): 46,2 KB

Multicolor JPG in lowest quantiser 2Bild 14

Format: JPG
Qualität: q=50 (niedrig)
Größe bei 160000px Auflösung (400x400px): 19,8 KB
Größe bei 769129px Auflösung (877x877px): 40,8 KB

multicolour JPG with enabled guetzliBild 13 Ausschnitt

Format: JPG
Qualität: q=84 (mittel) mit psychovisueller Erkennung

Multicolor JPG in lowest quantiser 2Bild 14 Ausschnitt

Format: JPG
Qualität: q=50 (niedrig)

Image quality of JPG

A JPG compression causes a good visible image quality at a quality value of 92. At a quality value of q=84, which represents a common value, already pronounced artifacts are evident, which form as blocks in the area of ​​edges. At q=50, the number of artifacts continues to increase and become more pronounced. At q=50, the multicolor example also shows a clearly discernible gradation in the color gradient. The number of colors is noticeably reduced at this level of compression.

JPG file size

The file size for the two-color subject of 152.3 KB (877x877px) can be significantly reduced by 59% with a compression quality of q=84 to 62.5 KB. A further reduction due to greater compression results at q=50 in a file size of 46.1 KB. However, this results in significant losses in quality.
Using psychovisual detection with q=84, the file size can be reduced even below the value at 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 e.g. in MP3 audio, where only the information relevant to the human ear is stored in the MP3 file.

The file size of the multicolored motif of 315.7 KB (877x877px) can be reduced even more clearly with a compression quality from q=84 to 66.2 KB than with a two-color motif by a whopping 79%. A further reduction due to greater compression results at q=50 in a file size of 40.8 KB. However, this also results in significant losses in quality. With a psychovisual detection with q=84, the file size of 46.2 KB is above the file size at q=50 of 40.8 KB, but the file with psychovisual recognition at q=84 has a better quality. Tkough the file size is smaller the quality of the compression with psychovisual recognition is worse in multicolor examples than in compression of q=84 without psychovisual recognition.

Direct comparison and conclusion PNG or JPG

Both JPG and PNG have been standard in webdesign for many years. With both image formats, most images can be displayed very well.

The PNG format can be used especially for motives with few colors and with high-contrast edges, such as in typography, logos et cetera. Uner these circumstances PNG achieves very good visual results with a small file size. The edges stay clean without compression artifacts. Images with little detail information can be reduced to a very small image size with PNG quantization.

The JPG image format is very universal in use case and can be used to compress all types of images very effevtively. The strengths of the JPG format are good compression of detailed images as in photography. In such cases, PNG generates significantly larger files.

Noteworthy is the fact that an original PNG image, which in between was compressed with JPG and ultimately saved again as PNG, can be significantly larger than the original image. This is often due to the fact that JPG compression adds additional compression artifacts. These artifacts interpreted as image information when re-encoded into the PNG format by the renderer and thus lead to a correspondingly higher image file size.
Keep that in mind!

We are here for you

To contact form

Categories: