Using the wrong graphics format could kill your search engine friendly website design.
By: Tim Kerber
Choosing The Correct File Graphic Format Its easy to understand why people get confused. They are creating graphics for their web site but there are so many choices when deciding what format to save the graphics in. Here are some of the common graphic file types that people have to choose from:
- gif
- jpg (or jpeg)
- bmp
- png
- tiff
- and many, many more
Why All The Different Formats?
Different files types were created over the years to overcome various obstacles. Before pictures were widely available on the internet, .gif graphics were very common. A .gif graphic file contains 256 colors or less. Not usually appropriate for photographs, but it can handle most basic color graphics just fine. People would use another file type for photographs called "bitmap" or the .bmp format. The problem with .bmp files is that they are usually very large. A new file format emerged to try to shrink down the file size for pictures. That is when the .jpg (pronounced "j-peg") format came about. JPG's are smaller because they compress photos. The compromise is that depending on the amount of compression, the picture loses some of its resolution. A good graphics program can let you see the amount of "loss" versus the file size in real time. That way you can see how much you are willing to compress the photo to achieve the look and size you want.
File Format |
# of Colors |
|
When to Use |
.gif |
256 or less |
Lossless |
Great for basic web graphics such as buttons, cartoons, basic graphics with a small amount of colors.
Also allows you to have a transparent background so that a graphic can blend into a site much better. |
.jpg (.jpeg) |
All |
Lossy |
Full color graphics or photographs can be used with jpgs very effectively. Because you can compress the files a lot, this is the format to choose to get small sizes for pictures.
jpg will not do as good of a job with very basic graphics that would be better handled with a .gif file. |
.bmp |
All |
Lossless |
This is the Windows file format. As with many things with Windows, this file format is also bloated in size :)
bmp's give you exact reproduction of a graphic but they trade off is the files are huge. bmp file graphics are NOT appropriate for a web page but they can still be found on some... |
.png |
All |
Lossless |
This is a file type that is trying to take the place of .gif files. The sizes are up to 30% smaller than gif but handle many of the same things a gif files does.
The downside is that it is not 100% compatible with all browsers. It likely will be in the future. |
.ico |
All |
Lossless |
It is very similar to the gif format but is only used for creating icons. Not appropriate for a web site. |
.tif |
All |
Lossless |
This format is widely supported by professional graphics programs. While they are not appropriate for a web page, tif files are widely used for other graphic projects. |
In A NutShell
Want the short and sweet version of what file format to use on a web site?
For a photographic quality graphic on a site, .jpg is likely the choice you want to go with.
If you have simple graphics such as buttons, menus, cartoons... then .gif is probably the way to go.
Take a look through your web site and see what graphic types you are using. An easy way to do it is by right clicking on the pictures and look at the "properties". This will tell you the file name with graphic type and size.
Here's an example of doing it wrong...
Some of you may remember "Baghdad Bob". Here's a snapshot of a web site that has Bob saved as a .gif file. I right clicked on it to pull up the properties about the picture:

Baghdad Bob should be a .jpg not a .gif
|
|
This picture could have been about 15% of this size if it was saved as a .jpg instead of a .gif
By choosing the appropriate graphic format, not only can you get better looking photos but they can be as small as possible for the look you are going for.
This article originally appeared on Tim Kerber's site www.SmallBusinessWebsite.com.
--------------------------------------------------------------------------
Successful website guru, Tim Kerber, is the owner of www.SmallBusinessWebsite.com, a subscription website specializing in Proven Tactics and Resources For Having A Successful Web Site.
--------------------------------------------------------------------------
I am not affiliated with Tim's website in anyway, but if you are looking to make a profit from your Small Business Website, I highly recommend you take a look at his site. I find a wealth of informative and time-saving tips and techniques on his site. He knows how to turn a website into a profit generating machine with minimum time and effort.
Click here if you want to go back to the HOME page and see more articles on Search Engine Optimization Techniques.
Copyright 2011 Search Engine U.
All Rights Reserved. Reproduction without permission prohibited.
|