Post by lhw on Aug 24, 2005 12:04:15 GMT -5
Repost from CFoT...thought it might do some good here as well.
Since we have a few good graphics makers here that use different software programs (i.e. PhotoShop, Paint Shop Pro, etc...), I thought I'd start-up a generic "Tips and Tricks" thread for those wishing to get started in it. Perhaps later, we'll start one up for each of the major software versions.
Anyway, I thought a good place to start would be File Formats. Hopefully this will give you a better understanding of what the more commonly used kinds of graphic files are, and what they can do (NOTE: Not all of them...just a few).
File Formats
Color Depth - In understanding what a file format can give you, you first need to understand color depths. When you see terms like "8-bit image," or "24-bit image," it's actually telling you how many colors can be represented in the image. The following chart should help as a reference point:
BMP - i.e. "Bit-Map." I don't recall if it was IBM, Microsoft, or a joint effort on their parts, but BMPs have been around since early Windows and OS/2 versions. In fact, they're still a mainstay in current OS's today, and can now support a 32-bit color depth.
While BMPs are now a world-wide format, they have one serious downfall: there is no compression used in saving the image, so the filesize is often very, very large. Still, you will find that it is still very common to use a BMP file as a Windows wallpaper. Not a good choice to use on web pages...although, they will work -- just expect a lot of complaints on how slow it takes to load all your images.
GIF - i.e. "Graphics Interchange Format." The GIF file format was developed by CompuServe (at one time, the largest Bulletin Board System [BBS] in the world), and became hugely popular due to one major feature: it uses the LZW compression algorithm. Unfortunately, it's limited to only 256 colors.
On the plus side, it has two features which have maintained its popularity even today: transparent backgrounds, and animation (and the option to create an interlaced file for you geeks). The transparent background was GIF's first key feature (next to the file compression), and is still widely used...eventhough the image was still rectangular in shape, it no longer had to LOOK like it was. A very useful feature when your background color scheme may change from time to time.
Later, when they moved from the 87a to 89a format, animation was added. You see all the animated smilies at the bottom of the page? Those are all animated GIFs with transparent backgrounds. Pretty cool, huh?
Unfortunately, as video cards and monitors advanced to handle more realistic images / color depths, GIF's usage as a universal file format wavered as it is still limited to only 8-bits per pixel. Still, you'll find that it's still the most widely used format on the World-Wide Web.
JPG / JPEG - i.e. "Joint Photographic Experts Group." This was the first "True Color" file format that really became usable on the Web. While capable of displaying images in equal quality to BMPs, with it's adjustable compression ratio, the file sizes are often smaller than GIFs...plus, you get much more color depth.
Unlike GIFs, though, JPG files do not support animation or transparent backgrounds. What makes this file format so popular is it's color depth, and small file size. Unfortunately, it's compression aspect can be a two-edged sword.
When you save a JPG, the more you compress the file, the more "grainy" it becomes. Usually the naked eye won't see most of these differences, but they become apparent when you try to uncompress the file...since the JPG algorithm discards "unused" pixels during compression, when you try to uncompress it, your image will seem pixelated. i.e. You can't return a heavily compressed JPG into the original quality before the compression.
Still, when making graphics / sigs for the Web, this is the file format you should be using most often.
PNG - i.e. "Portable Network Graphics." While being around for quite a few years, PNG is still considered the "new kid on the block." It was developed as a non-proprietary image standard, but has been slow to gain any real support...despite it's ability to support a 48-bit color depth.
One thing that PNG tried to do was combine the benefits of a GIF image with that of a JPG image. And to a degree, they succeeded: PNG offers you "True Color" depth, while also providing the option of a transparent background, and image compression.
While this may sound like a God-send, there are issues with the PNG file format. For starters, Microsoft's Internet Explorer browser does not fully support PNG. Yes, it will display the image, but IE does not support the transparent background option. If you use IE to view a PNG image with a transparency, IE will display the transparency as a solid color. Thus, you lose an aspect of what you are trying to display.
While Mozilla based browsers DO support this, it should be noted that both types of browsers load PNG images very slowly...due to PNG's "open source" compression, different software save PNG files slightly different. Having to support all these different compression aspects is what causes the browsers to slowly display PNG images.
Also, the compression ratios are not as tight as those offered by JPG, so you will often have a PNG file that is larger than the equivalent JPG file.
While usable on the Web, PNG files should be avoided unless needed for a specific application. i.e. A "True Color" image which requires a transparent background. If your image is a "solid rectangle," stick with JPG as the file format of choice.
I hope this gives you a better understanding of the basic graphic files. I look forward to seeing what our other experts have up their sleeves. ;D
Since we have a few good graphics makers here that use different software programs (i.e. PhotoShop, Paint Shop Pro, etc...), I thought I'd start-up a generic "Tips and Tricks" thread for those wishing to get started in it. Perhaps later, we'll start one up for each of the major software versions.
Anyway, I thought a good place to start would be File Formats. Hopefully this will give you a better understanding of what the more commonly used kinds of graphic files are, and what they can do (NOTE: Not all of them...just a few).
File Formats
Color Depth - In understanding what a file format can give you, you first need to understand color depths. When you see terms like "8-bit image," or "24-bit image," it's actually telling you how many colors can be represented in the image. The following chart should help as a reference point:
- 1-bit (2^1) - Also referred to as "monochrome". Only holds 2 colors, typically just black and white.
- 4-bit (2^4) - An image with up to 16 colors.
- 8-bit (2^8) - An image with up to 256 colors.
- 16-bit (2^16) - An image with up to 65,536 colors.
- 24-bit (2^24) - Also known as "True Color." An image with up to 16,777,216 colors.
- 32-bit (2^32) - An image with up to 4,294,967,296 colors.
- 48-bit (2^48) - An image with up to 281,474,976,710,656 colors.
BMP - i.e. "Bit-Map." I don't recall if it was IBM, Microsoft, or a joint effort on their parts, but BMPs have been around since early Windows and OS/2 versions. In fact, they're still a mainstay in current OS's today, and can now support a 32-bit color depth.
While BMPs are now a world-wide format, they have one serious downfall: there is no compression used in saving the image, so the filesize is often very, very large. Still, you will find that it is still very common to use a BMP file as a Windows wallpaper. Not a good choice to use on web pages...although, they will work -- just expect a lot of complaints on how slow it takes to load all your images.
GIF - i.e. "Graphics Interchange Format." The GIF file format was developed by CompuServe (at one time, the largest Bulletin Board System [BBS] in the world), and became hugely popular due to one major feature: it uses the LZW compression algorithm. Unfortunately, it's limited to only 256 colors.
On the plus side, it has two features which have maintained its popularity even today: transparent backgrounds, and animation (and the option to create an interlaced file for you geeks). The transparent background was GIF's first key feature (next to the file compression), and is still widely used...eventhough the image was still rectangular in shape, it no longer had to LOOK like it was. A very useful feature when your background color scheme may change from time to time.
Later, when they moved from the 87a to 89a format, animation was added. You see all the animated smilies at the bottom of the page? Those are all animated GIFs with transparent backgrounds. Pretty cool, huh?
Unfortunately, as video cards and monitors advanced to handle more realistic images / color depths, GIF's usage as a universal file format wavered as it is still limited to only 8-bits per pixel. Still, you'll find that it's still the most widely used format on the World-Wide Web.
JPG / JPEG - i.e. "Joint Photographic Experts Group." This was the first "True Color" file format that really became usable on the Web. While capable of displaying images in equal quality to BMPs, with it's adjustable compression ratio, the file sizes are often smaller than GIFs...plus, you get much more color depth.
Unlike GIFs, though, JPG files do not support animation or transparent backgrounds. What makes this file format so popular is it's color depth, and small file size. Unfortunately, it's compression aspect can be a two-edged sword.
When you save a JPG, the more you compress the file, the more "grainy" it becomes. Usually the naked eye won't see most of these differences, but they become apparent when you try to uncompress the file...since the JPG algorithm discards "unused" pixels during compression, when you try to uncompress it, your image will seem pixelated. i.e. You can't return a heavily compressed JPG into the original quality before the compression.
Still, when making graphics / sigs for the Web, this is the file format you should be using most often.
PNG - i.e. "Portable Network Graphics." While being around for quite a few years, PNG is still considered the "new kid on the block." It was developed as a non-proprietary image standard, but has been slow to gain any real support...despite it's ability to support a 48-bit color depth.
One thing that PNG tried to do was combine the benefits of a GIF image with that of a JPG image. And to a degree, they succeeded: PNG offers you "True Color" depth, while also providing the option of a transparent background, and image compression.
While this may sound like a God-send, there are issues with the PNG file format. For starters, Microsoft's Internet Explorer browser does not fully support PNG. Yes, it will display the image, but IE does not support the transparent background option. If you use IE to view a PNG image with a transparency, IE will display the transparency as a solid color. Thus, you lose an aspect of what you are trying to display.
While Mozilla based browsers DO support this, it should be noted that both types of browsers load PNG images very slowly...due to PNG's "open source" compression, different software save PNG files slightly different. Having to support all these different compression aspects is what causes the browsers to slowly display PNG images.
Also, the compression ratios are not as tight as those offered by JPG, so you will often have a PNG file that is larger than the equivalent JPG file.
While usable on the Web, PNG files should be avoided unless needed for a specific application. i.e. A "True Color" image which requires a transparent background. If your image is a "solid rectangle," stick with JPG as the file format of choice.
I hope this gives you a better understanding of the basic graphic files. I look forward to seeing what our other experts have up their sleeves. ;D