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.
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
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
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.