Graphics Software

Web graphics can be created with any decent graphics editing software, ranging from the humble Paint program included with Windows to big daddy Photoshop. Traditionally, the big distinction in graphics programs is between bitmap-based (Photoshop, Painter, Paint Shop Pro) and vector-based ( CorelDraw, Illustrator) systems. The former, sometimes called "paint" programs, let you work with photographs, and create graphics by specifying the color value for each pixel (Excuse me, greenies! A pixel is the smallest unit of graphic information - one little dot on your computer screen). Vector graphics programs, on the other hand, let you "draw" stuff using lines, geometric shapes, etc. Either type of software can export files in GIF and JPG format these days, so use the graphic editor of your choice.

Here's a little secret, though - Photoshop may be the industry standard, the cock of the walk, and all that, but it's pricey, and there are several packages out there that are almost as good, with much lower pricetags. Various graphics packages are available for free download in our Web Tools Download Section. One excellent and cheap choice is Paint Shop Pro.

Load Time

The load time of your graphics is of critical importance. The larger the file, the longer it will take to load, and graphics files can be very large indeed. Huge graphics that take forever to load are a sure sign of an amateur site, and they will chase visitors away. Fortunately, there are several things you can do to keep your load times reasonable.

The first is simply to be sparing with graphics. If a picture isn't worth a thousand words, don't use it. And keep them small. Paradoxically, a large image (more than about 300 pixels wide) is more likely to bog things down than several smaller ones. Consider breaking a large image up into smaller ones, and "mortising" them together with a table. Dave Siegel explains how to do this in his fine book, Creating Killer Web Sites.

Another important thing to do is to "optimize" your graphic files. Graphic files include information about the color palette of the image, which can be superfluous. By discarding information about colors that aren't used in the image, the file size can sometimes be greatly reduced, with no loss in quality. In fact, there are a number of little tricks you can use to slim down those bulky images, and several nifty shareware products that automate the process for you. See Mark Larmand's Pixel Anatomy 101 to learn said tricks, and our Web Tools Download Section to download said shareware.

Another handy trick is to use the interlaced GIF format. An ordinary GIF (or JPG) loads in discrete chunks, like a carton being filled up with smaller boxes. With an interlaced GIF however, the whole thing loads gradually, a blurry image that becomes sharper and sharper until it's fully loaded. Like a tray of water freezing into ice (although hopefully a bit faster). Although it doesn't really load any faster (a fraction of a second slower, actually), it seems to load faster, and it's more convenient for the user, because they can get an idea of what the image is without waiting for the whole thing.

GIFs may also be made transparent. A transparent GIF allows you to designate one color to be transparent, meaning that the background will show through. Usually, the background color of the image is selected as the transparent color, so the image will seem to "float" over a Web page. A non-transparent GIF however, will seem to have a box around it. Most images will look better transparent. One exception is an ad banner. An ad banner should never be transparent, as it may be displayed on various different sites, and you never know what their background color will be.

Most graphics editing packages can simply save a file as an interlaced (and/or transparent) GIF, and there are also lots of shareware products that can convert existing files. For more on transparent and interlaced GIFs, see Bruce's tutorial on the subject, which also includes links to various graphic software for your downloading pleasure.

How to add an image to a Web page?
Pictures on my Web Site - How?
Attributes of the IMG Tag