This article will explain the differences between the three file types; jpegs, gifs and pngs, and explain when it is best to use each method. To save an image to be used on the web, you should go to File > Save for Web & Devices. (Ctrl + Alt + Shift + S / Apple + Option + Shift + S).
Pronounced Jay-Peg, it is a commonly used file type for Photographs and this is no exception when saving for the web. Any full colour image or photograph should be saved in this format where the degree of compression can be increased as much as possible to reduce the size or the image without losing quality. A compression of around 60 – 70% normally reduces the file size without losing to much detail.
You can think of gifs as being the opposite of jpegs. Use gifs for type, line drawings, vector shapes and avoid saving photographs or full colour images. Gif files are compressed by the amount of colours present in the file – the maximum used is 256, but you can save a gif as just 2 colours – an image with just black and white pixels for example with no greys in between.
When saving as a gif you can also save transparency in the image, which in web design means that images can be overlaid over other elements. It will not pick up semi transparent colours like a png file – you have to have fully transparent areas and opaque colours.
Simple animations can also be saved as gifs, where 256 colours are available for each frame. In the latest versions of photoshop the whole animation and frame process can be completed from start to finish. To view the animation panel in photoshop go to: Window > Animation.
Png pronounced Ping can be used for transpancy where gif files can not. Pngs can preserve areas of colour which are semi transparent. This could be used for example to create a button with a drop shadow. With an opaque button, a transparent background but with a semi transparent shadow, this button can then be placed on a variety of backgrounds.