 Re: IE support transparent background on PNG? | |
Hi,
I just tested your link on both Firefox and IE and I see no difference! the header bg on both show the same color.
Have you ever check your advance browser settings in IE which needs to be configured?
.Png and .Gif are used in webpages because they support transparency while Jpeg does not.
Here is something worth filing.
What is a JPG image?
A JPG image file is a format created by the Joint Photographic Expert Group. JPG files are best suited for complex images such as photographs and very intricate graphics. The features of JPG are:
* Can have up to 16.7 Million colors in an image.
* Uses a method of compression (squishing) that is called lossy. This means that the image suffers some loss of quality or distortion.
* Most graphics editors allow you to control the trade off between compression and quality.
* Most of the time the controls in the graphics editors that control the trade-offs make no sense to anyone!
* Cannot be made transparent. This is a feature that GIF offers and will be discussed later on.
As a general rule, a complex image with many colors will be smaller as a JPG than a GIF file. So if you are presenting a photograph, JPG is usually the way to go.
What can I do to make my JPG images load faster?
Take a close look at the two identical pictures below. You can see that they are very detailed and colorful. Are you sure they are really the same?
Don't start playing Where's Waldo! The difference between the two pictures is that the one on the left contains about 27,000 distinct colors and the one on the right only 256. The file on the left is 34,000 bytes and the one on the right about 17,000. This means that the picture on the right will load twice as fast as the picture on the left. The difference in quality is very hard to detect, but you just saved your reader some time.
It is important that when you reduce colors that you do not use dithering. The process can actually wind up increasing the size of your picture file.
Another trick is to reduce the size of your image, not with the HEIGHT/WIDTH attributes of HTML, but with your graphics editor. Be careful of distortion and color loss.
You can also present what are referred to as thumbnail images. These are tiny pictures representing the full size ones. You then make the small image a link that if selected will then display the larger image. This way you give your reader a choice as to whether they want to see the big picture. (pun intended)
Why can't I use JPG for everything?
I the example below are two images. The one on the left is a JPG and the one on the right is a GIF. If you look closely you will see that there is a substantial amount of distortion in the JPG image. The GIF image is crystal clear and quite attractive.
But wait, there's more! The JPG picture is almost three times the size of the GIF. 6,000 bytes vs 2,000 for the GIF. Why?
As I mentioned earlier, JPG is good for compressing complex, detailed pictures. It is also lossy which means that some details are lost when the image is compressed. In the case of simple graphics, the JPG format is obviously the wrong choice.
What is a GIF Image?
The GIF format is another form of image compression. There are two GIF standards, the one we are working with is called 89a. As you can see from our last example in our JPG discussion, it is great for simple graphics. It also has the following features, and limitations:
* The image can contain up to 256 colors and no more.
* You can reduce image size by using less colors.
* One color can be selected to be the background color which allows the underlying page color to show through. This is called transparency.
* Can also create an effect called interlace where the image is drawn as a blur that comes into focus as the image loads.
* The process is lossless. The image suffers no loss of quality when compressed.
* When created with an animation editor, multiple GIF images can be put together like a set of cartoon cels, allowing for simple moving pictures.
When should I use a GIF Image?
It is very evident that the GIF format is completely different from JPG. As with any tool, picking the right one for the job at hand. GIF is the ideal choice of format in the following situations:
* Nice, bold page banners.
* Simple icons, especially arrows and such.
* When you want a transparent background.
* If you need animation.
What is this transparent background you keep mentioning?
The GIF-89a standard allows you to pick one color that for practical means, is invisible to the browser and allows the underlying color or image to show through.
Then two images above are in fact identical, except for one minor detail. The image on the left I created telling the graphics editor to make the background color purple (which is not a color I used). The image on the right has its background color set to black. Our obedient browser is displaying the images just as I intended.
You should be aware that most graphic editors set the default background color to black. This is not always desirable.
Do your GIF images suffer from the JAGGIES?
|