Maintaining Transparency in Images when Exporting

We will start with the following image:

At present, we have a White background on the Padlock Layer and also a White background Layer:

We can choose the Magic Wand tool and using a Tolerance of around 20, we can select the White in the Padlock Layer and hit Delete:

We can also hide the Background White layer and should be presented with the following:

The white & gray checkerboard texture represents transparency in PhotoShop, but if we goto File > Save For Web & Devices, and choose a file format that does not support transparency (for example, JPEG), the background will be White:

However, if we choose a GIF or PNG file format, transparency should be maintained. Note there is an option to turn Transparency on and off:

If we cancel this screen and go back and add a Drop Shadow to our padlock, then go back to File > Save For Web & Devices, we will see the difference the shadow's fade makes. The matte option for a GIF will attempt to smooth the transparent areas with a solid color, so you'd choose the matte to match the background color of where the image will be placed. For example, if our image was going on a red background website, we'd choose a red matte:

This may look untidy here, but when it is placed on a red background, it will be a smooth drop shadow. However, if the image was placed on another colored background, or a textured background, it would look very messy. This is where the PNG file format comes in. If we choose the PNG file format, you'll see that the drop-shadow is perfect, but the file size increases quite significantly.

GIF with No Matte:

GIF with White Matte:

PNG: