+5 votes
272 views
in Web design by (242k points)
reopened
JPG or PNG: differences and suitability of image formats

1 Answer

+3 votes
by (1.6m points)
edited
 
Best answer

What is JPG or JPEG?
What is PNG?
JPG: How does compression affect the image?
Progressive JPG for faster rendering
Compression loss due to image editing
JPG vs. PNG: screenshots
JPG vs. PNG: overview of advantages and disadvantages
JPG or PNG ?: expansion of formats
JPG or PNG: what is each format more suitable for?
JPEG 2000
JNG
APNG
PNG +

image

JPG or PNG: differences and suitability of image formats

Today there are more than a hundred file formats for storing photos and other graphics, although the vast majority have been left in irrelevant resources due to their limited diffusion. On the other hand, JPG and PNG have been one of the main graphic formats for decades (especially on the web). Both have advantages and disadvantages. New image formats like HEIF for photos or WebP for graphics are gaining in popularity but are still far from the level of JPG or PNG..

Index
  1. What is JPG or JPEG?
  2. What is PNG?
  3. JPG: How does compression affect the image?
  4. Progressive JPG for faster rendering
  5. Compression loss due to image editing
  6. JPG vs. PNG: screenshots
  7. JPG vs. PNG: overview of advantages and disadvantages
  8. JPG or PNG ?: expansion of formats
    1. JPEG 2000
    2. JNG
    3. APNG
    4. PNG +
  9. JPG or PNG: what is each format more suitable for?

What is JPG or JPEG?

JPEG is the most common graphic format for photographs . Image compression using this format has already been defined in 1992 by the ISO / IEC 10918-1 standard. The name JPEG goes back to the Joint Photographic Experts Group, who developed this standard. Since normally only three characters are used for file extensions, they ended up agreeing on the JPG extension for image files.

What is PNG?

PNG is a graphic format especially suitable for pixel graphics, screenshots, and logos . The PNG format comes from the acronym for Portable Network Graphics and has been developed by a working group of the World Wide Web Consortium (W3C) from 1994 to later include it in the ISO / IEC 15948: 2003 standard..

PNG is lossless and offers the ability to flexibly determine different color depths and selected color ranges . PNG has also been developed with the intention of creating a modern, free-access alternative to the GIF format that is subject to a license: like the GIF format, PNG has an alpha channel to determine transparent areas in the image that is They need, among others, to create logos and icons for web pages and applications.

In contrast to the GIF format, which only allows one of the 256 possible colors to be transparent, PNG offers a true alpha channel that also allows partially transparent areas, for example when overlaying images..

JPG: How does compression affect the image?

We can stick with the following basic rule: the higher the compression ratio of a JPG image , the worse the quality . In this context, compression is indicated in image editing programs as a quality value: in other words, a value of 100 indicates 100% quality without compression. But the compression level and the file size do not have a linear relationship. Low compression that still maintains high quality can significantly reduce file size.

The rendered image, for example, has a size of 22.16 MB with a resolution of 4000 x 1936 pixels. In the 95 quality category , JPEG compression already reduces the file size to 1.25 MB. Most cameras and smartphones use the value 95 as the default setting for storing photos in JPG format.

image
The original camera photograph with JPG quality of 95.

A compression to quality category 60 reduces the file size to 194 KB, or approx. 15% less compared to quality category 95. The difference is barely visible in the example image:

image
The image with higher compression and JPG quality of 60 is still displayed without problem in the browser, but it is transmitted much faster because the file size is much smaller.

Applying stronger compression begins to significantly reduce image quality, while file size is only reduced to a negligible extent. The blue sky in the example image begins to show color ring artifacts starting at quality category 25. The color transition is no longer smooth:

image
If the JPG compression is excessive (quality category 25 in this case), clearly visible artifacts appear.

If the image is enlarged too much, these artifacts, a product of JPG compression, are already visible in the medium quality categories, as the following example shows. Therefore, you should not alter the JPG quality of images that you want to print with high resolution on paper at any web photography site or physical printing point.

image
With large enlargements, the differences between the JPG quality categories are much more noticeable.

The enlarged image shows that compression artifacts appear mostly on single-color surfaces and high-contrast edges. Therefore, the JPG format is not suitable for surface graphics, screenshots, and icons .

Progressive JPG for faster rendering

Depending on the throughput capacity of the system and the transmission speed, rendering a large photo may take time. JPG photos are made up of so-called coefficients, 8 x 8 pixel blocks that are stored one behind the other by default. Thus, the image is composed by rows .

In progressive JPG , an average color value of each coefficient is saved first. Thus, it is possible to display a blurry image with thick pixels in a very short time. Color information is then saved for one-fourth and sixteenth of each coefficient. Over time, the rendering quality improves. But thus, the observer can intuit the content of the image from the beginning and does not have to wait for the construction by rows.

image
At the first level, only coarse pixels from a progressive JPG photo are recognized.
image
As time goes by, the JPG photograph is displayed with increasing resolution.

Compression loss due to image editing

The   programs image editing process each pixel of an image as it is in the file, ie also process the pixels whose colors have been altered by compression. Applying a color filter or effects to an image, or resizing it, compresses the image again when saved, degrading the quality.

Once contrasts are lost at the edges or colors , there is no way to get them back. Above all, when trying to get a sharper image afterwards , compression artifacts are reinforced. The lower the quality category of a photo, the greater the effect that subsequent edits will have on the quality. In these cases, it is useless to increase the quality category again later.

advice

The JPG format allows the image to be rotated in 90 ° intervals without loss of any kind. But the image editing program needs to support this function. Otherwise, the image will suffer losses from a new compression. Some programs also allow rectangular cutouts without the cut-out area being re-compressed when saving.

JPG vs. PNG: screenshots

Any software documentation always requires screenshots of Windows windows or smartphone applications . Screenshots must be created in PNG format, normally all capture programs are set like this by default. The smartphones Android also saved screenshots in PNG format by default.

Screenshots contain precise, straight lines with clear contrasts and monochrome surfaces with no color evolution. Both aspects represent weaknesses of the JPG format . The following screen shots of a Windows 10 dialog box show the difference between the JPG format and the PNG format.

image
In PNG format, the screenshot represents the window exactly as it appears on the screen.
image
In JPG format, light artifacts appear on monochrome surfaces and text areas.

When enlarging the images, the difference in quality between JPG and PNG becomes much more noticeable. The screenshot below shows the JPG artifacts in the color palette area and around the letters on a white background.

image
If large magnification is done, JPG artifacts can be seen clearly in the screenshot.

JPG vs. PNG: overview of advantages and disadvantages

JPG and PNG formats are very different. Both image formats have advantages and disadvantages that we have summarized in the following table.

  Jpeg PNG
Compression Subject to loss, adjustable Without losses
File size Very low, depending on compression Notably larger than JPG
Colors 16.7 million Up to 16.7 million, but there may be shallower color depths, this reduces the file size.
Progressive rendering Yes No
Transparency No Yes with alpha channel
Lossless editing 90 ° swivel and cuts if program supports Yes
Metadata in the image EXIF and IPTC standard Possible but not standardized (not readable for all programs)
GPS position in the image Possible, depends on camera functions No
Automatic saving on smartphone Photographs Screenshots
Maximum image size Longest side: 65,535 pixels Depends on the system, theoretically unlimited

JPG or PNG ?: expansion of formats

Throughout history there have always been attempts to expand the list of image formats with such popularity as JPG or PNG. But at the moment, no format has managed to even come close to the degree of dissemination of JPG and PNG.

JPEG 2000

The format, incompatible with the original JPEG, allows better compression with the same quality and without loss. Image areas can be represented with a higher quality than less important ones. More than 8 bits per color channel and larger image dimensions are allowed . Different progression modes can be selected for the representation and the metadata can contain any information in XML format. Examples of possible file extensions: .jp2, .j2k, .jpf, .jpg2, .jpx, .jpm. Despite its many advantages, to date, JPEG 2000 has not been able to replace the classic JPG.

JNG

JPEG Network Graphics (JNG) extends the JPEG format by means of an additional alpha channel , which can be losslessly integrated in the form of a PNG data stream.

APNG

Animated Portable Network Graphics (APNG) adds animations to the PNG format, just as the GIF format does.

PNG +

Extension of the PNG format with image layers ( layer ) and multi-page layouts . This format was only used by the discontinued program, Microsoft Picture It! and it was never able to settle on the market.

JPG or PNG: what is each format more suitable for?

The JPG format has been developed for photographs and for these it is the most suitable. Especially for landscape or people snapshots , compression artifacts are barely visible. Thanks to the small image size, the JPG format is perfect for illustrating web pages with images. Only some visible artifacts may appear in product images with high detail and sharp edges. Clearing objects in product images is also complicated by compressions.

The PNG is suitable for all types of charts that appear monochrome surfaces and sharp edges . The same applies to screenshots and converting vector graphics to grid formats on systems that cannot render vector graphics. The alpha channel allows transparent image areas, a very important feature for application icons and web pages.


...