The PNG-24 Image Format & 3 Ways You Can Use ItWritten by: Haily | Learn how you can use this image format to achieve various creative and simple web design effects.

Introduction to the Format

What's unique to this format is its support of alpha transparency. PNG-24 (aka 24 bit PNG) images, like GIF images, support transparent pixels, but unlike GIF images, PNG-24 images support pixels with various levels of transparency. This means that these such images support certain effects such as shadows, glows, and varied transparencies. Here's a comparison of the transparency options provided by the major image formats:

PNG-24

PNG-8

GIF

JPEG

Learn More: Learn more about how the major image formats differ and when to use which one.

How to Save an Image as PNG-24 in Adobe Photoshop

In Photoshop, you can save an image as PNG-24 by going to File > Save for Web & Devices and selecting PNG-24 under Format.


1) Images and Icons

You can also use the format for regular images and icons throughout a website. Of course, it really only to be flashy that one would use this. Like anything flashy, be careful not to use it excessively. An example would be our site preview icons that we sometimes use in our articles, like the one below, but you can also use it for much smaller images as well as for different effects, not just necessarily glows or shadows.


2) Semi-transparent backgrounds

One simple technique would be to create a 1x1px image with a single pixel of any color at a certain level of transparency. Then you can set this image as the background of a content module. Apply this type of background to a content box in a page that has an ornate full page background, and you could prodcue an effect very similar to what YouTube profiles allow for customization:



While it looks cool, be sure not to over do it. For a website layout, the above example would definitely be over doing it, but in YouTube's case, you wouldn't expect such high design standards for a profile design anyway. Also keep the level of transparency low. Keeping the text legible is extremely important. Lastly, this is a great alternative to using CSS to change the transparency of the entire content box (including the text). This simple technique that will do it only for the background.

3) Overlayed Text

You can also use the PNG-24 image format to provide a semi-transparent text background for text placed over an image. We use this technique for our homepage news updates.

New Flower Stock Photos Read More >>

If you are interested in how I set this up, it's available as an HTML/CSS Script.

Important Tip

Lastly, one should also note the format is supported by the latest version of the major web browsers, but it's a relatively new format that you may still get an occasional visitor without support for 24-bit PNG images. When that occurs, the image is simply displayed with a default background color behind transparent or semi-transparent pixels, usually gray.

   

| Written by: Haily | Added: Mar 19 2010 | Last Modified: Mar 20 2010 | Views: 2,133 | (Log in to rate) |

Member Comments