Which image format suits your project? JPG vs PNG

JPG and PNG have been among the most important graphic formats for decades (es­pe­cially on the web). Both have various ad­vant­ages and dis­ad­vant­ages. 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­larly 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­ti­um (W3C) starting in 1994 and later doc­u­mented in the ISO standard ISO/IEC 15948:2003.

PNG works losslessly and offers the pos­sib­il­ity to set different colour depths and flexibly definable colour palettes. PNG was also developed with the intention of creating a modern, freely available al­tern­at­ive 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 colours 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­ni­fic­antly reduce the file size.

The photo shown has an un­com­pressed size of 22.16 MB with a res­ol­u­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­ni­fic­antly de­teri­or­ates while the file size only reduces slightly. In the blue sky of the example image, at quality level 25, artifacts in the form of colour bands are no­tice­able and the colour 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­ol­u­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-colour graphics, screen­shots, and icons.

Pro­gress­ive JPEG for Faster Display

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

In a pro­gress­ive JPEG, the average colour value of each coef­fi­cient is stored first. This allows a blurry image with rough pixels to be displayed very quickly. Then, colour in­form­a­tion follows for a quarter and a sixteenth of each coef­fi­cient. Over time, the display quality con­tinu­ously 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 colour has been distorted by com­pres­sion. If you apply a colour or effect filter to an image or scale it, it will be re-com­pressed the next time it’s saved, which di­min­ishes quality. Once edge contrasts or colours are lost, they cannot be recovered. When trying to sharpen an image afterward, com­pres­sion artifacts are par­tic­u­larly in­tens­i­fied. The lower the quality level of a photo, the more sig­ni­fic­antly 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­quently needed in all types of program doc­u­ment­a­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 auto­mat­ic­ally save screen­shots in PNG format.

Screen­shots contain precise, straight lines with clear contrasts and solid colour areas without gradients. Both are sig­ni­fic­ant weak­nesses 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 colour palette and around the black letters on the white back­ground.

Overview of the ad­vant­ages and dis­ad­vant­ages of JPG and PNG

There are many dif­fer­ences between the formats JPG and PNG. Both image formats have ad­vant­ages and dis­ad­vant­ages, which are sum­mar­ised 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­bu­tion level of JPG or PNG.

JPEG 2000

The JPEG 2000 format, which is in­com­pat­ible 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 colour channel and sig­ni­fic­antly larger image di­men­sions. Various pro­gres­sion modes are available for display, and the metadata can contain arbitrary in­form­a­tion in XML format. Possible file ex­ten­sions include: .jp2, .j2k, .jpf, .jpg2, .jpx, .jpm. Despite numerous ad­vant­ages, 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 losslessly in­teg­rated in the form of a PNG data stream. The format does not have its own re­gistered MIME type.

APNG

Animated Portable Network Graphics (APNG) adds an­im­a­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­par­ency (alpha channel) and an­im­a­tions. WebP delivers sig­ni­fic­antly smaller file sizes than JPG or PNG at com­par­able image quality. The standard is now supported by all major browsers (Chrome, Firefox, Edge, Safari) and is par­tic­u­larly optimised 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 colour depth, HDR, trans­par­ency, and an­im­a­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­ingly 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 colour depths, large image di­men­sions, an­im­a­tions, trans­par­ency and is also backward com­pat­ible with JPEG; existing JPGs can therefore be converted without quality loss. Ac­cept­ance is currently still limited, as major platforms like Google Chrome have tem­por­ar­ily 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­cially 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­trated 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 colour 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­cially 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: