Adding Images to your Web Site. It's Not Just Click, Click, Tada!

A web site that is all text and no images or photos can be boring to say the least. To add flair and reinforce your message (not to mention enhance the overall look and feel) you need to add images to your web site. These can be design elements to make the site look more professional or maps and diagrams to help users understand and locate your business. However there is a great deal that goes into preparing an image so it can be added to a web page.

Many people start out with a photo either on paper or from their digital camera. If it's on paper, the first step is to scan it into your computer. Once a image is in digital form (the most popular formats being gif and jpeg), you can now work with it. Most often a raw image has a large file size. By large, I mean anything over 100 kilobytes ("100K" as they say). You will need an image manipulation software package, such as PhotoShop or PhotoImpact. These programs allow you to adjust and improve images so they can be added to web sites.

So why can't you just grab an image from your computer and add it to a web site? This is a common question. There are a number of things that must occur before you should add an image to your HTML pages. The first is cropping the image. Sometime the raw image has too much space. This is usually an aesthetic decision, but some cropping is needed on almost all raw photos. The next thing to remember is that you need to reduce the file size of the image as much as possible. The smaller the file size the quicker the image can be delivered to your users browser and the quicker it will display on screen. Image manipulation software, like those mentioned previously, can reduce an image's file size by taking out extra colors not being used and in the case of jpegs, they can allow you to slightly reduce image sharpness in favor of a smaller image size. How to do this is outside the scope of this article, but read your software manual to learn the details of the process.

You may also need to boost the brightness or contrast levels as well. I have found that you should err on the side of a brighter image than a darker one. Many people have computers with their brightness level set too low. You wouldn't want those users seeing your images too dark.

Lastly is placement. When you add an image to a web page, remember to make sure it fits into the overall design scheme. Leave some "air" around it as well (white space). You can also make use of the align attribute to let text wrap around an image as in the example below:

<img src="images/photo.gif" width="178" height="21" align="left">

In this case, the image photo.gif will be aligned on the left side of the page and the text next to it will wrap around it on the right side. Wrapping text around graphics can add a nice touch to a page layout.

Overall, what I am getting at is there is a lot that has to occur if you want to add images, graphics, etc to your web site. It is best to invest in an image program like PhotoShop (there are less expensive ones out there. Just do a little research). Then practice and complete the tutorials included with the software. Graphics are a critical part of your site, and you need to have the tools and knowledge to implement them professionally.

-Paul Kaufman
President
Kaufman Web Design™