HTML Advanced Topics: Images and Backgrounds

Depending upon how much experience you have with computers images and background can be really easy to deal with or an absolute nightmare. To be creative with images on the web you must learn how to use a graphics editor. Yes, you need to learn how to use yet another program to be able to do quality graphics for the web!

The first step in learning to use graphics is to gather the images you want to use. There are many ways to obtain graphics for your web page. You can use a digital camera and take photos, scan photos or drawings into you computer using a scanner, or you can save images from the internet and use them in your webpage.

Here is where we get into a question of ethics. Some people get extremely defensive about the idea of obtaining graphics from the web! If you are worried about someone getting upset about your using his/her graphics you have several options available to you.

1. You can email the person who owns the website and ask about using the pictures.
2. You can take the picture and give credit to the website where you found it.
3. You can search for free graphics on the internet by using a search engine. (There are some sites that allow you to use images for personal and educational use.)
4. You can use your own personal photos and drawings.

The more you surf the internet the more you realize that people share photos and other media all of the time. Many netizens believe that any and all information belongs to everyone. That is now and was at the internet's founding, part of its charter. The net is a medium that is suppose to allow a free exchange of ideas. So, the best way to gather photos and pictures is to freely surf the net gathering the images that appeal to you. Chances are the image you borrow will be an image that the website you found it on borrowed from someone else :) !

Obtaining Pictures from the Web

So, you've surfed the internet and happened upon a picture that would look great on your site. Now what? Place your cursor above the picture and right click the mouse. A menu should appear with a list of options. Click on "Save picture as...". A save screen should appear. Type a file name into the box where the cursor is flashing. Take note of which folder the file is being saved in, then click the save button.

1. OK, so you right clicked and a stupid javascript box popped up warning you not to borrow pictures. Click the OK button. Now what? Place the cursor over the picture you want. Click and hold the left mouse button down. Drag the the cursor down to the task bar. You should see an arrow with a plus next to it. Release the mouse button and the picture should appear on a blank web page. Right click and save the picture as you normally would.
2. If that didn't work, turn off javascript in the options -> internet options-> tools menu

Proper Formating

Your pictures should be saved in one of three formats: jpg/jpeg, gif, or png. Your pictures should be cropped to remove extra unnecessary background images (like 40 acres of rug in your house). Your pictures should be no larger than 100kb!!! Adjusting Formats and Physical Disk Size

You can tell which format a graphic is saved in by the file extension. For example:
     yourfile.jpg
     yourfile.gif
     yourfile.png

Your pictures should NOT be saved in bitmap format!  yourfile.bmp

What do you do if your file is not a jpg, gif, or png file?

1. Open the image your favorite graphics editor. If you don't have a graphics editor you will need one. See my resources page for information on where you can obtain freeware image editors and suggestions on editors you can buy.
2. Crop your picture. All image editors have a cropping tool. Usually it can be found on the screen as a button. It looks like a box made of a dashed line. Selected this tool and drag a box around your image. Adjust this box until you've cut-out all of the extra background. Find the Image -> Crop on your editors menu and click it.
3. If your image is a complicated image, i.e., it has lots of shading and detail, save the picture as a jpg file.
   • Microsoft Paint will save a bmp as a jpg.
   • You will probably be prompted by a box with a percent slider. This lowers the image quality to decrease the physical size on disk of the image. You want the image size as small as possible without pixelating the image.
4. If your image is a simple image, save the picture as a gif file.
   • You may be prompted to convert the image to an 8-bit format. To do this look for the convert option on your graphics program. It is usually on the Tools Menu. Choose paletted 8-bit graphics. The options screen should come up. Choose optimized then click the convert button. Now you can save the image as usual.
5. Don't bother with png images. The web can read them if the graphic you borrowed was saved in this format, but it is not a format you want to save an image.

For more in-depth information on images and image conversion see my resources page. The editing and conversion of images is an entire webpage in and of itself. If you are a beginner the safest and easiest way to add images to your site is to get images from the internet that are already saved in the right format and compressed to 100kb or less.

The Image Tag

So, you've gathered your images they are in the right format and they are 100kb or smaller. Now here is the tag you can use to add a graphic to your web page:

<img src="yourimage.gif" width="200" height="200" alt="this is a picture of my image" border="0">

Here is an animated gif dog with a border width of 4:

To create a link from an image, just place the img tag where the text would be.

<a href="yourpage.html"><img src="yourimage.gif" width="170" height="170" alt="alternate text here" border="4"></a>

This work is licensed under a Creative Commons License.