The two image formats JPG and PNG are among the most commonly used formats and are both excellent for use on websites. Both formats are used differently in web design and each has its strengths and weaknesses. In this article, JPG and PNG are compared to show which format is best suited for which purpose. SEO-optimized images are an essential part of content and play a crucial role in search engine optimization.
The image formats can be created with various profiles and/or a modifiable quantization matrix. Therefore, the values achieved here for quality and file size are not comparable with results from other tests.
PNG
The PNG format is a lossless image format that allows for efficient image compression. PNG stands for ‘Portable Network Graphics’ and is the successor to the GIF format. Like the GIF format, it features an alpha channel, which allows for transparent backgrounds. However, color gradients and fine details can quickly lead to large file sizes in PNG compression.
Image quality of PNG
Since PNG is a lossless format, there are no quality losses during export.
While objects like charts are depicted cleanly and the file size remains small, the situation changes with more detailed images that have many color tones.
To reduce the file size, the image information can be quantized, which results in aliasing and pixelation, especially in multi-colored images where the difference becomes much more noticeable. At medium quality, visible pixelation is already noticeable. While two-tone images can still look good at medium quantization, multi-colored images perform poorly.
Although artifacts can be reduced by increasing quantization, this causes the file size to increase significantly, making quantization less beneficial. In such cases, formats like JPG, which are presented below, show their advantages.
JPG
The JPG (JPEG) format is a lossy image compression format. For years, JPG has been the standard compression format in digital cameras. Only higher-end devices offer the option to store photos without compression in the RAW format. When using JPG compression, a digital camera significantly reduces the file size of a photo.
For image editing, using the RAW format in the camera offers distinct advantages over JPG because the RAW profile does not apply filters like noise reduction. The RAW format also preserves details in dark areas, which can be lightened to reveal more detail. This information is lost in JPG files.
For photographers, using the RAW format is recommended. However, for web design and internet use, JPG is ideal due to its smaller file sizes.
To avoid distorting the test results by re-compressing, the images were scaled without interpolation and stored losslessly in PNG format.
Image quality in JPG
A JPG compression with a quality value of 92 achieves good image quality. At a quality value of q=84, which is a common value, visible artifacts appear, such as blockiness around edges. At q=50, the number of artifacts increases and becomes more pronounced.
At q=50, the multi-color example also shows noticeable banding in the color gradient. The number of colors is significantly reduced at this compression level.
JPG File Size
The file size of a two-tone image with 152.3 KB (877x877px) was reduced by 59% to 62.5 KB with a compression quality of q=84. Further reduction through stronger compression results in a file size of 46.1 KB at q=50. However, significant quality loss occurs here. Using psycho-visual detection (with q=84), the file size can be reduced even further below the regular compression value of q=50, reaching only 44.9 KB.
Psycho-visual detection is analogous to psychoacoustic compression, such as with MP3 audio, where only the relevant information for the human eye is stored in the JPG file.
Reducing the resolution with compression at q=84 significantly reduces the file size and still provides a good, web-suitable result.
Direct Comparison and Conclusion on PNG or JPG
Both JPG and PNG have been standards in web design for many years. With these two formats, most images can be displayed optimally.
The PNG format is particularly suitable for images with few colors and high contrast edges, such as typography, logos, etc., as it provides excellent visual results with small file sizes. The edges remain clean without compression artifacts. Images with little detail can be compressed into a very small size with PNG.
The JPG format excels in compressing all types of images, particularly detailed images such as photographs. In such cases, PNG would generate much larger files.
It is noteworthy that an original PNG image that has been compressed with JPG and then saved back as PNG can end up being significantly larger than the original image. This is often because the PNG compression can produce extremely small file sizes for simple images, but the JPG compression introduces additional artifacts. These artifacts are then interpreted as image data when the file is re-encoded to PNG, leading to a larger file size.