Which image format suits your project? JPG vs. PNG

JPG and PNG have been among the most important graphic formats for decades (es­pe­cial­ly on the web). Both have various ad­van­tages and dis­ad­van­tages. Newer formats like HEIF or WebP are becoming more popular but are still far from the wide­spread use of JPG or PNG.

What is JPG or JPEG?

JPEG is the most common image format for photos. The image com­pres­sion used by this format was already defined in 1992 in the ISO/IEC 10918-1 standard. The name JPEG comes from the Joint Pho­to­graph­ic Experts Group, which developed this standard. Since file ex­ten­sions typically use only three char­ac­ters, JPG was agreed upon as the extension for image files.

What is PNG?

PNG is a graphic format that is par­tic­u­lar­ly suitable for pixel graphics, screen­shots, and logos. The PNG format, short for Portable Network Graphics, was developed by a working group of the World Wide Web Con­sor­tium (W3C) starting in 1994 and later doc­u­ment­ed in the ISO standard ISO/IEC 15948:2003.

PNG works loss­less­ly and offers the pos­si­bil­i­ty to set different color depths and flexibly definable color palettes. PNG was also developed with the intention of creating a modern, freely available al­ter­na­tive to the licensed GIF format. Like GIF, PNG also includes an alpha channel to define trans­par­ent areas in the image, which are necessary for creating logos and icons for websites and apps. Unlike the GIF format, where only one of the maximum 256 possible colors can be trans­par­ent, PNG offers a true alpha channel, which also allows for semi-trans­par­ent areas – e.g., for blending.

How does com­pres­sion affect quality when it comes to JPG?

As a general rule, the higher the com­pres­sion rate of a JPG photo, the worse the quality becomes. Image-editing programs specify com­pres­sion as a quality value. For example, a value of 100 means 100% quality with no com­pres­sion. However, the re­la­tion­ship between the com­pres­sion level and file size is not linear. Even small amounts of com­pres­sion that barely affect quality can sig­nif­i­cant­ly reduce the file size.

The photo shown has an un­com­pressed size of 22.16 MB with a res­o­lu­tion of 4,000 x 1,936 pixels. Even at the displayed quality level of 95, JPEG com­pres­sion reduces the file size to 1.25 MB. For most cameras and smart­phones, 95 is the default for saving photos in JPG format.

Com­press­ing the photo to a quality setting of 60 reduces the file size to 194 KB, which is about 15 percent of the size of the version with a quality setting of 95. The dif­fer­ence is barely no­tice­able in the photo:

With stronger com­pres­sion, the image quality sig­nif­i­cant­ly de­te­ri­o­rates while the file size only reduces slightly. In the blue sky of the example image, at quality level 25, artifacts in the form of color bands are no­tice­able and the color gradient is no longer smooth:

When the photo is magnified, JPEG com­pres­sion artifacts are visible even at medium quality settings, as the example below shows. This is why you shouldn’t change the JPG quality setting when you’re ordering high-res­o­lu­tion prints of your photos from an online printing service or photo lab.

The magnified image shows that com­pres­sion artifacts are most prominent in mono­chro­mat­ic areas and around high-contrast edges. For this reason, the JPG format is not suitable for solid-color graphics, screen­shots, and icons.

Pro­gres­sive JPEG for Faster Display

The display of a very large photo can – depending on the system’s per­for­mance and trans­mis­sion rate – take some time. JPG photos are composed of so-called co­ef­fi­cients, blocks of 8 x 8 pixels that are stored se­quen­tial­ly by default. Thus, the image builds up line by line.

In a pro­gres­sive JPEG, the average color value of each co­ef­fi­cient is stored first. This allows a blurry image with rough pixels to be displayed very quickly. Then, color in­for­ma­tion follows for a quarter and a sixteenth of each co­ef­fi­cient. Over time, the display quality con­tin­u­ous­ly improves. Viewers can get an initial idea from the start and don’t have to wait for the line-by-line loading.

Com­pres­sion losses due to image editing

Image editing programs process every pixel of an image as it appears in the file, including pixels whose color has been distorted by com­pres­sion. If you apply a color or effect filter to an image or scale it, it will be re-com­pressed the next time it’s saved, which di­min­ish­es quality. Once edge contrasts or colors are lost, they cannot be recovered. When trying to sharpen an image afterward, com­pres­sion artifacts are par­tic­u­lar­ly in­ten­si­fied. The lower the quality level of a photo, the more sig­nif­i­cant­ly editing affects the quality. In­creas­ing the quality level afterward doesn’t help here.

JPG vs. PNG – screen­shots

Screen­shots of Windows windows or smart­phone apps are fre­quent­ly needed in all types of program doc­u­men­ta­tion. It’s best to create these in PNG format, which is the default setting for almost all screen­shot tools. For example, Android smart­phones au­to­mat­i­cal­ly save screen­shots in PNG format.

Screen­shots contain precise, straight lines with clear contrasts and solid color areas without gradients. Both are sig­nif­i­cant weak­ness­es in the JPG format. The following screen­shots of a dialog box from Windows 10 show the dif­fer­ence between the JPG and PNG formats.

The dif­fer­ence in quality between JPG and PNG becomes more obvious when you magnify the images. The following screen­shot shows JPG artifacts in the area of the color palette and around the black letters on the white back­ground.

Overview of the ad­van­tages and dis­ad­van­tages of JPG and PNG

There are many dif­fer­ences between the formats JPG and PNG. Both image formats have ad­van­tages and dis­ad­van­tages, which are sum­ma­rized in the table.

JPG or PNG? Ex­ten­sions and new formats

Alongside newer formats like HEIF for photos or WebP for graphics, there have been repeated attempts to expand the two well-known image formats JPG and PNG. However, none of these formats have yet achieved anywhere near the dis­tri­b­u­tion level of JPG or PNG.

JPEG 2000

The JPEG 2000 format, which is in­com­pat­i­ble with JPEG, allows for better com­pres­sion with the same quality or lossless com­pres­sion. Certain detailed image regions can be displayed in better quality than less important areas. It supports more than 8 bits per color channel and sig­nif­i­cant­ly larger image di­men­sions. Various pro­gres­sion modes are available for display, and the metadata can contain arbitrary in­for­ma­tion in XML format. Possible file ex­ten­sions include: .jp2, .j2k, .jpf, .jpg2, .jpx, .jpm. Despite numerous ad­van­tages, JPEG 2000 has not yet been able to replace the classic JPG.

JNG

JPEG Network Graphics (JNG) extends the JPEG format by adding an alpha channel, which can be loss­less­ly in­te­grat­ed in the form of a PNG data stream. The format does not have its own reg­is­tered MIME type.

APNG

Animated Portable Network Graphics (APNG) adds an­i­ma­tions to the PNG format, similar to what is possible in the GIF format.

PNG +

Extension of the PNG format to include image layers and multi-page layouts. This format was only used by the now-dis­con­tin­ued program Microsoft Picture It! and did not catch on.

WebP

The image format WebP was developed by Google and released in 2010 to combine JPEG, PNG, and GIF into a single modern format. It supports both lossy and lossless com­pres­sion, including trans­paren­cy (alpha channel) and an­i­ma­tions. WebP delivers sig­nif­i­cant­ly smaller file sizes than JPG or PNG at com­pa­ra­ble image quality. The standard is now supported by all major browsers (Chrome, Firefox, Edge, Safari) and is par­tic­u­lar­ly optimized for use on the web. The file extension is .webp.

AVIF

AVIF (AV1 Image File Format) is based on the modern AV1 video codec and offers very efficient image com­pres­sion while main­tain­ing high image quality. It supports both lossless and lossy com­pres­sion, high color depth, HDR, trans­paren­cy, and an­i­ma­tions. Compared to WebP, AVIF typically achieves smaller file sizes for the same quality but requires more computing power for encoding and decoding. It is in­creas­ing­ly supported by modern browsers and platforms. The file extension is .avif.

JPEG XL

JPEG XL was also designed as a modern successor to classic formats like JPEG, PNG, and GIF, offering both lossless and lossy com­pres­sion. It supports high color depths, large image di­men­sions, an­i­ma­tions, trans­paren­cy and is also backward com­pat­i­ble with JPEG; existing JPGs can therefore be converted without quality loss. Ac­cep­tance is currently still limited, as major platforms like Google Chrome have tem­porar­i­ly ceased support. The file extension is .jxl.

JPG or PNG – which format is suitable for what?

The JPG format was developed for photos and is best suited for them. Es­pe­cial­ly with landscape or portrait shots, the com­pres­sion artifacts are hardly no­tice­able. Thanks to the small file size, websites can be il­lus­trat­ed well with JPG files. Only for product photos with details and sharp edges can artifacts become visible. Also, isolating objects in product photos is made more difficult by the com­pres­sion.

PNG is ideal for all types of graphics with precise edges and solid color areas. This also applies to screen­shots and con­vert­ing vector graphics to raster formats on systems that can’t display vector graphics. The alpha channel allows for trans­par­ent image areas, which is es­pe­cial­ly important for icons for apps and websites.

For quick decision-making on which image format is suitable for your use case, our flowchart can help: