Graphics, Pictures and ImagesGraphic image files can come in many types. The file extensions typically designate the graphic type. Here are some of the more common file extensions you might encounter on the Internet:
There are others too, but these are the most common. For Internet web page use you will want to save your files as either .GIF or .JPG file type. Only .GIF, .JPG or .PNG file types are suppored for image files in general use on the Internet. The .GIF file format can provide animation and/or transparancy, but is limited to 256 colors. This is not as bad as you might think for several reasons. Many browsers can only display a limited number of colours, no matter what your system is capable of, and the human eye can only distinquish about 248 unique colors at any one time anyway. In some cases, even when you don't want animation or transparency, .GIF format files are the best choice as they can often be smaller file sizes for the same image display size.
Examples of no transparancy, transparancy and animation.
All graphics are rectangles. Here are the same three graphics but with borders drawn around them to show their edges. The background grid has been replaced with a mottled parchment-like image so the outlines will show better. The images remain exactly the same.
Choosing whether or not to use solid or transparent backgrounds on your images, whether to have static or animated images, whether to use borders or no borders and which background to use can make considerable differences in how your web page or auction listing will look. Only one color, usually the background, can be set as transparent in a .GIF format file. I like to see a single line border neatly outlining non-transparent graphics. It's just my personal taste, but I think it defines the graphic and makes it stand out better. With transparent backgrounds you probably don't want the outline as it generally defeats the purpose of making the background transparent in the first place. 
Consider these two images:
The two pictures above each display the same 'size'. Nothing has been done to fiddle with their WIDTH and HEIGHT attributes. Both have real dimensons of 250 x 328 pixels, and yet the actual file sizes are different. The one on the left is 67 KB and the one on the right is 11 KB. That is a significant difference which can dramatically affect transfer time, and therefor the speed with which your web page or auction listing builds, and it will use less space on your file hosting site. On some sites this is a consideration and will make a difference in how many files you can host simultaneously. This size difference is achieved by saving the second picture as a .JPG file with 50% compression. There is so little loss in clarity that it is almost not noticable, and yet there is a significant reduction in actual file size. This produces faster transfer speeds and takes less storage space on your host server. A good size for graphics on web pages or eBay auctions is not more than 65k and the smaller the better. You can size files by reducing pixel dimension (about 350 pixels wide or so), reducing dots per inch (dpi) resolution, sometimes by decreasing color count, and often by increasing compression. Experiment with all of these features in your graphics program and see which work for you. With some colors, especially reds, there is a bleed effect if you use too much (or sometimes even any) compression. Most good graphics programs have settings for changing things like pixel dimensions, file type and, in JPG files, the compression ratio. These will be in different places and perhaps called different things, in each different program. If your graphics program doesn't have all the features you want, or if you don't have a suitable graphics program at all, check out these links:
Five of the programs I highly recommend for working with graphics and HTML can be found here:
And for the Mac...
I use 1st Page 2000 v2.0 and PaintShopPro v3.12 for virtually all of my web page and graphics work. Some important things to consider when working with graphics:
If you choose to use Irfanview, there is a very good tutorial here.
| ||||||
