If you are trying to choose a format in which to save your image, use this rule of thumb to decide: JPEG for photographs or photorealistic images with lots of colors; PNG for line art, images with lots of text, or transparent images; and GIF for animated pictures.
|Stands For||Joint Photographic Experts Group||Portable Network Graphics|
|Best suited for||Photographs; photorealistic images with a lot of colors||Line art; images with text; transparent images|
|File Extensions||.jpg, .jpeg, .jpe||.png|
|Type of Format||Raster graphics image format||Raster graphics image format|
|Color Management||Yes||Supports color management through the inclusion of ICC color space profiles|
|Indexed Color||No||Yes (for 1-8bit PNGs)|
|Support for Animation||No||No|
|Support for Transparency||No||Yes|
|Support for Metadata||Yes||Yes|
|Support for Multi-page||No||No|
|Support for Layers||No||No|
|Compression Algorithm||DCT-based lossy compression||Lossless DEFLATE compression algorithm|
|Patented||No, but parts of the technology, including its compression methods, have been the subject of multiple patent lawsuits.||No|
|Applications Compatible||Most web browsers and productivity suites||Most web browsers and productivity suites|
|Magic Number||ff d8||89 50 4e 47 0d 0a 1a 0a|
|Uniform Type Identifier||public.jpeg||public.png|
Similarities and Differences
JPEGs and PNGs are similar in several ways. They support comparable levels of color depth and carry support for metadata, interlacing, and color management. Neither format supports animation, layers, or HDR.
Separating the two is the fact that PNGs support image transparency, while JPEGs do not. Moreover, color indexing is available for 1-8bit PNGs but is not supported at all in JPEG.
Other Versions of JPEG and PNG
There are many lesser-known alternate versions of JPEG and PNG. For example, JPEGs do not support HDR, but there is an unofficial JPEG-HDR. There are even lossless JPEG formats. And though PNGs do not support animations like GIFs do, there is APNG, a nonstandard offshoot of PNG that allow animation.
The trouble with using lesser-known versions of JPEG and PNG comes down to support. Not all browsers will properly display all image formats (e.g., Firefox supports APNG, but Internet Explorer does not, and Chrome requires an extension). In most all cases, designers should stick to well-supported defaults to avoid harming user experience.
DSLR cameras usually allow photographers to store their images in a few different graphic file formats, namely RAW, JPEG, and occasionally TIFF. Though JPEGs have the advantage of a smaller file size, they are lossy, leading proamateur and professional photographers to prefer the TIFF or RAW formats for their lossless or high-quality lossy compression.
In post-production, photographers can adjust RAW image data and then save to a new, lossless (but more accessible) file format, such as PNG. File format matters, as most printing services will accept JPEGs and PNGs—and sometimes TIFF—but only some printing services will work with RAW images.
Most websites use a combination of JPEGs and PNGs (and sometimes GIFs) in their designs, as JPEGs and PNGs are used for different reasons. In most cases, JPEGs are used for large images, like photos or big, graphic-heavy website backgrounds, as JPEG's lossy nature allows for smaller file sizes, meaning websites can load designs faster. Design software like Adobe Photoshop has tools that can tell designers how large a file will be when using a certain format and adjusting its settings, before they even save the image. Though PNGs will never result in a smaller file size than JPEGs will when it comes to large images with complex scenes, PNG's lossless compression does sometimes result in a smaller file size for smaller images, particularly those that have computer generated graphics (e.g., a line or square drawn in Photoshop).
Where PNGs are most frequently used is with small images, like web icons, where the lossless compression ensures crisp, clear imagery; PNGs are also used when a transparent background is needed to surround a central image (e.g., when using sprites).
JPEG and PNG use completely different compression methods. JPEG uses a DCT-based lossy compression method that sacrifices quality in favor of smaller file sizes. PNG prioritizes quality and uses the lossless DEFLATE compression algorithm. JPEG's file size can be cut down by adjusting an image's quality percentage during saving, while PNG's file size is less easily adjusted and usually requires a separate program to further compress the image.
Watch the following video to learn how different compression methods affect file size, color depth, and image loading in JPEGs and PNGs.
Because they are lossy, JPEGs should not be edited and resaved multiple times, as this will result in severe image degradation (saving in a single session without closing the file between saves is fine, however). JPEGs that have been resaved many times become pixelated and do not display colors accurately. In contrast, PNGs can be saved and resaved without losing quality. This video shows this generation loss over the course of 600 saves.
With universal browser support for PNG transparency in the last several years, PNGs have grown in popularity, particularly for certain web design elements. However, the vast majority of the trillions of images on the internet, many of which are photos or art, are still JPEGs, and this is not likely to change any time soon.
Numerous companies, including many patent trolls, have claimed to have patents on one form of JPEG technology or another. This has led to numerous lawsuits over the years, with the most recent occurring in 2013 when a company by the name of Princeton Digital Image Corporation sued dozens of big-name companies, including the likes of Amazon, Netflix, and Costco, for using JPEG images on their websites. Patenting of compression methods is the primary reason a lossless JPEG has never become popular. Few want to support or use such a JPEG for fear of being sued.
PNG was developed to replace GIF, which uses a compression method that was previously patented by Unisys. PNGs use a compression method, DEFLATE, that is not patented, thus eliminating the fear of patent infringement.