blog

“When to Use JPEG and PNG”

30 november 2015 | by João Pedro Gomes

This is a quick guide that reflects my own opinion upon working several hours with PNG and JPEG. People know the formats but, in fact, the majority don't know the difference between each other. When your are working with images, certain file formats may be better than others. I will teach you to select the best file format depending on what your goals are for the image.

Advertisement
Sorry, but I need to pay my articles

JPEG - Joint Photographic Experts Group (.JPG/.JPEG)

> Designed in 1986, is pronounced "jay-peg"
> 16-bit data format, Million of Colors, Big compression algorithm (small file size)
> This format uses a system that merge near colors to save some file size. Color details that human eye can't see will be sacrificed
> Supports CMYK, RGB and Grayscale color modes

When to use?

1. When file size is more important than max image quality
2. You have a huge size image
3. Your image have a lot number of colors
4. Your image has not any transparency

My advice?

JPEG is excellent for camera regular photos that you will not edit in future. If you want to edit the images in future, save the image in .TIFF (or .PSD/.PSB if you know how to use photoshop). In cameras world, save the file in RAW (the better is L+RAW = Larger JPEG + RAW). JPEG, in fact, reduces the file size up to 15% more without losing quality but isn't the ideal for editing in future because is a compression with losses.

PNG - Portable Network Graphics (.PNG)

> Designed in 1996, is pronounced "ping" or "P-N-G"
> 24-bit data format, 16 Million Colors, Lossless compression (no data loss, larger file size than JPEG), supports Alpha Channels
> This format includes benefits from both GIF and JPEG
> Supports RGB, Indexed Color, Grayscale and Bitmap

When to use?

1. When image quality is more important than file size
2. When you need to use transparency or fading
3. If you want to keep image near the original

My advice?

PNG allow an excellent system of alpha channel that allow transparency to be set on a scale between 100% opaque and completely transparent, allowing for a faded, translucent look. So, PNG is awesome if you want a good quality image that is similar in look to the original. PNG is also awesome for edited images in photoshop or another image editors. I use PNGs, both for web and not, and I only avoid PNG's in web when it's huge file size, consequently increasing the page loading time.

Did you like this article?

Show me some support with your like on my facebook page