*1: GIFs have limited transparency support, they will often have a matte colour surrounding the image (ideal for white/other solid colour backgrounds). If there is no matte colour, then pixels display as "sharp" (no anti-aliasing).
*2: There are exceptions when using PNG-24 with solid colours, for example a solid colour graphic with fully transparent background or semi-transparent solid colour.
Gradients
Logos
Photos
Transparency
When saving an image containing a gradient, the best format to use is a JPG/JPEG (top-right). It produces a very small file size (2.984K) and is a close match to the original (top-left). The GIF (bottom-left) contains "banding" and is larger than the JPG/JEPG. While the PNG-24 (bottom-right) also closely resembles the orginal, it is also much larger than the original.
The GIF (bottom-left) format is ideal when saving images with solid colours, for example a logo. It results in a much smaller file size and doens't contain artifacts (extraneous dots/pixels) that appear in the JPG/JPEG (top-right). While the PNG-24 (bottom-right) produces a good quality image, it is almost double the size of the GIF.
Photos usually contain gradients so like in the first example, the JPG/JPEG (top-right) format is best suited. The GIF uses "dithering" a mixture of 2 different pixel colours to recreate the gradient. Once again the PNG-24 produces a good image quality but results in a large file size.
If your image has a tranparent background (as represented in Photoshop as a checked background, the JPG/JPEG (top-right) format will add a background colour as it does not support transparency. GIFs (bottom-left) have limited transparency support, it does not support partially transparent pixels, so it relies on a selected "matte" background colour to give the illusion of transparency. This can be seen in the bottom-left example below as shades of pink around the curve. PNG-24 supports full transparency and would be the ideal choice, especially if the background is not a solid colour.
