PNG or JPG Which One To Use?

JPG Vs PNG

Image file formats are standardized means of organizing and storing digital images . There are a lot of different image file types floating around, and knowing which one is right for you may not be the simplest thing to figure out. When working with images, certain file types may be better than others, depending on what your goals are. PNG (Portable Network Graphics) and JPG ( Joint Photographic Experts Group) are by far the two most commonly used image file formats on the web. These formats have become the most popular because of their compatibility with modern browsers, broadband speeds, and the needs of average users.

Finding the optimal settings for your image requires careful analysis along many dimensions . Before going for an analysis, you must be aware of a few key factors such as types of compression, colour depths, Resolution etc.

Compression

Image compression is a type of data compression applied to digital images, to reduce their cost for storage or transmission. There are two types of compression:

1. Lossless Compression
2. Lossy Compression

Lossless Compression

Lossless means that the image is made smaller, but at no detriment to the quality. With lossless compression , every single bit of data that was originally in the file remains after the file is uncompressed. All of the information is completely restored.

Lossy Compression

Lossy means the image is made (even) smaller, but at a detriment to the quality. lossy compression reduces a file by permanently eliminating certain information, especially redundant information. When the file is uncompressed, only a part of the original information is still there . If you saved an image in a Lossy format over and over, the image quality would get progressively worse and worse.

Colour Depths

Colour depth is used to describe the maximum number of colours that are used in the image. The higher the number of colours then the more realistic the image will appear. There are also different colour depths (palettes):

1. Indexed color
2. Direct color

Indexed color

Indexed means that the image can only store a limited number of colours (normaly 256), controlled by the author, in something called a Color Map . Indexed color is when each pixel does not store color information, but rather an index into a color table. The color table can contain any colors. For encoding a predominantly pink picture, for instance, we can use a color palette containing mainly just shades of pink which will give a pretty good result without using much color information at all. This can save a lot of memory and was practical in the early days of hardware.

Direct color

Direct color means that you can store many thousands of colours that have not been directly chosen by the author Direct color is when each pixel encodes its own color information. So for instance a pixel would contain the information 0.5Red, 0.2Green, 0.1Blue on 3x8bit typically. This is how we typically store picture information today.

Resolution

The resolution of an image is determined by the number of individually addressable points that make up the image, whether it is the number of pixels that make up a screen image, or the number of dots that make up a printed image . The more dots that are used to create an image, then the more detail the image can resolve and the sharper it appears when viewed.

JPG vs. PNG: Which Should I Use?

PNG and JPG are by far the two most commonly used image file formats on the web. These formats have become the most popular because of their compatibility with modern browsers, broadband speeds, and the needs of average users.

PNG

PNG stands for Portable Network Graphics. It was developed as an open alternative to GIF, which used the proprietary LZW compression algorithm discussed earlier. This format is a lossless compression file format, which makes it a common choice for use on the Web. Unlike JPGs, which create artefacts and blur images at a certain point, a PNG file will always look at least as sharp as the original image. Unfortunately, PNG files also tend to be a bit larger than JPG files, especially when they're high resolution.

PNGs create transparency in one of two ways. One of these methods employs the same approach used by GIFs, with a single color defined as transparent, and the other is to set an alpha channel . One of the advantages of PNG single-color transparency is that it doesn't remove a color from the available palette. However, the alpha channel is a much smoother method, as it is far better at blending colors, and allows you to select different levels of transparency in specific regions. The transparent areas of the PNG will blend and adjust naturally to whatever is behind the image when the background of the page isn't a solid white or black color.

PNG is a good choice for storing line drawings, text, and iconic graphics at a small file size. By converting a PNG file to JPEG you can save a lot of space, most of the time between 50-70%, which might be ideal if you are dealing with dozens or hundreds of images. However, if the focus is on image quality , PNG is certainly the best format.

JPG

JPG format is a lossy compressed file format. This makes it useful for storing photographs at a smaller size than a BMP. JPEGs images were designed to make detailed photographic images as small as possible by removing information that the human eye won't notice. JPEG will have poor quality around sharp edges etc. but it excels at photographs . Compared to PNG offers better compression, larger palette and more features, including transparency.

JPG is a common choice for use on the Web because it is compressed. For storing line drawings, text, and iconic graphics at a smaller file size, GIF or PNG are better choices because they are lossless . However, because of the lossy nature of JPG, it is not an ideal way to store art files. Even the highest quality setting for JPG is compressed, and will change the look of your image, if only slightly. JPG is also not an ideal medium for typography, crisp lines, or even photographs with sharp edges, as they are often blurred or smeared out by anti-aliasing. What is potentially worse, is that this loss can accumulate saving multiple versions of artwork can cause degradation with every save. Even so, it is common to see these things saved as JPG, simply because the file type is so ubiquitous.

JPEG's ability to reduce file size up to 15% without losing quality makes it useful for web pages especially for colorful photos. JPG compression is great if you're just trying to send someone a picture through your phone or in an email, two situations where you might not necessarily want to send large files. Although most JPGs look fine from a distance under normal compression, there is a noticeable loss of quality whenever users zoom in on a JPG image. The effects of JPG compression have been greatly exaggerated in the image below to show the loss of quality that occurs.

Photo editing programs like Adobe Photoshop and Gimp , all save JPEGs by default to the .jpg extension, on both Windows and MACs. And if you were wondering, you can change the extension both ways and the file will continue to work. Unfortunately, JPGs don't support transparency . JPG files have an unlimited color palette, but they blend pixels together to reduce the size of the image.

Summary

As you can see, both JPEG and PNG have their own upsides and downsides . While PNG is more suitable for the web, JPEG is still the preferred format when it comes to photos and digital art.