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 at webdesign.
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.
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.
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.
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.
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
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
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
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
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!