Let's talk about graphic content

While trolling the web, it is easy to see that the greatest problem people have with graphics on web sites is that they are not properly cropped.

Cropping is an old newspaper term meaning to select an area of a photo to focus on and delete the rest.

Frequently, internet travelers will see photos taken so far away that it is impossible to determine what is the subject. By eliminating the extraneous content, the photo can focus on the intended subject.

Head shots of people often contain far too much area of blank or background space, while the face itself is too far away to really determine what the person looks like. In that case, why bother having the photo there in the first place? Further, if the photo is too busy, it may be difficult for the viewer to fully understand at first what is the intended target of photo.

A general rule is that if it doesn't add to the photo, or if it detracts from the subject of the photo, get rid of it. Head shots (a.k.a. mug shots) you see in newspapers are usually the monitor equivalent of 72 pixels by 108 pixels, and often they are taken from much larger photos that show the person in action or in a group photo.

For the internet, not only does this help the viewer focus on what the designer wishes, but it also enables for higher quality while still diminishing the storage size of the graphic.

It seems like most HTML editors have a dialog box to use to place photos on a page. The advantage of that is that it more easily enables the designer to input information necessary to help the photo load more quickly.

Many users try to put a large graphic on the page and resize it to smaller, but it will still take the same amount of time for it load as the larger version. If you wish to have a smaller photo, resize before importing into the HTML page and then link to a larger version.

Many HTML editors will automatically put the size of the graphic into the HTML coding, but the user has to put the photo description in the "ALT" tag.

When you slide a mouse across a photo on an HTML page, the words that pop up are those included in the "ALT" tag. That enables those without graphic display to know what the photo is about, for users whose browsers do not support forms, those who use speech synthesizers, and those who choose not to display images to get faster loading pages.

Should you wish to place the photo in a particular place, users should use stylesheets to do so. Here is an example of such coding:

img {position:absolute; left:10; top:10}

That would place the image 10 pixels from the left border and 10 pixels from the top border.

If running the graphic into a regular stream of type, users can move the graphic around by using the "float" command in a stylesheet. An example:

img {float:right} with left or none being the other options.

Previously that was done with the "align" attribute and the chosen direction. However, that attribute is deprecated, which means it works now but may not be included in future versions of HTML. Instead, the same thing can be done using stylesheets.

Other image-related commands - specifically vspace and hspace - are also deprecated, but they still work while other options remain buggy.

Are my graphics automatically optimized?

Though my company most often uses Photoshop for graphics, and it does optimize a great deal, we also use a program called Web Graphics Optimizer 4.2 to further work on the graphic. There are other programs on the market that do the same.

In some instances, to get a graphic below that 40K limit or down to the 20-30K range, a designer make have to make a choice regarding quality. But in most cases, it is possible to get the graphics down to a reasonable storage size and still maintain their integrity and reasonable quality.

Conclusion

That is why it is crucial that a designer make the correct choices regarding format and photo manipulation.

In previous web development columns, we have covered the importance of using original work and following copyright laws when using graphics or words. Those rules still apply.

We have also covered the need for speed when pages load, and graphics play a major role in that procedure. Using the correct type of graphic is vital to that goal as are the use of "ALT" tags and size information.

It would be real easy to simply let a program enhance a photo and slap it into an HTML page, but often that isn't enough if the goal is to get the best possible results. Designers should take a little more time and get it right before continuing.

Even for writers, graphics can be the fun part of putting a web site together. However, that fun can quickly turn to misery without a proper understanding of how to put graphics to use.

Which format to use?
Processing and Using Photos for the Internet