Geek Speak: more on file types
I was going to do another post on file types eventually, but it came up in the last Q&A post so I thought I'd do 800 words on some other considerations when it come to what file type to use when you save your files for web use.
The basic file types we have discussed are:
.xcf – this is the GiMP-native file type which, as we discussed before, can’t be read by your web browser, but preserves all the aspects of your file completely: resolution, layers, the works.
.jpg – this is the most common file format for photos because it doesn’t limit the colors you can use in an image, and it allows you to control file size by using compression. Compression, however, causes some image degradation (as we talked about last time), and .jpg also has another real liability which we will talk about today.
.png – this is an evolved form of .jpg, and it has other upsides as well, again, for today's post.
.gif – this format overcomes the "compression" problem for file size by simply limiting the number of colors you are going to use, and for many applications this is a very fine ideaer, but not so great for photos (as we saw last time). And it has a great application in web design.
Now, the real topic of today's post is "transparency" – that is, the ability to see something behind an image. So the first question to answer is: "Why should I care about transparency?"
Here are two images from my personal blog:
What I've done here is render the two images on a gray background with a red border so that you can see the "edges" of the images. They are both .gif files, but the first one is a normal rectangle that blows out to the actual edges of the file; the second has a lot of transparent space between the edge of the illustration and the edge of the file.
When you put them together, they look like this:
What I did there was to put the box in the background and the Firefox icon in the foreground – and the transparent parts of the icon let the background show through. Cool, yes?
This would be a reason to need and implement transparency in your web-ready images: to create layered effects.
This cannot be achieved with the .jpg file format: it does not support transparency. The good news, mostly, is that .png also supports transparency, but the bad news there are that some versions of Internet Explorer do not support .png. Some of you reading this blog may have found that out already as most of my images in my examples are .png. So for reliable web rendering of transparency, use .gif.
There are other issues related to this, but that's enough geek speak for one day. I'm sure many of you got lost someplace after "The basic file types we have discussed are ...", but someday you'll come back and find out you really did need to know this stuff.
The basic file types we have discussed are:
.xcf – this is the GiMP-native file type which, as we discussed before, can’t be read by your web browser, but preserves all the aspects of your file completely: resolution, layers, the works.
.jpg – this is the most common file format for photos because it doesn’t limit the colors you can use in an image, and it allows you to control file size by using compression. Compression, however, causes some image degradation (as we talked about last time), and .jpg also has another real liability which we will talk about today.
.png – this is an evolved form of .jpg, and it has other upsides as well, again, for today's post.
.gif – this format overcomes the "compression" problem for file size by simply limiting the number of colors you are going to use, and for many applications this is a very fine ideaer, but not so great for photos (as we saw last time). And it has a great application in web design.
Now, the real topic of today's post is "transparency" – that is, the ability to see something behind an image. So the first question to answer is: "Why should I care about transparency?"
Here are two images from my personal blog:
What I've done here is render the two images on a gray background with a red border so that you can see the "edges" of the images. They are both .gif files, but the first one is a normal rectangle that blows out to the actual edges of the file; the second has a lot of transparent space between the edge of the illustration and the edge of the file.
When you put them together, they look like this:
What I did there was to put the box in the background and the Firefox icon in the foreground – and the transparent parts of the icon let the background show through. Cool, yes?
This would be a reason to need and implement transparency in your web-ready images: to create layered effects.
This cannot be achieved with the .jpg file format: it does not support transparency. The good news, mostly, is that .png also supports transparency, but the bad news there are that some versions of Internet Explorer do not support .png. Some of you reading this blog may have found that out already as most of my images in my examples are .png. So for reliable web rendering of transparency, use .gif.
There are other issues related to this, but that's enough geek speak for one day. I'm sure many of you got lost someplace after "The basic file types we have discussed are ...", but someday you'll come back and find out you really did need to know this stuff.
