Reading: Images

Adding images can really spice up a web page. Images which appear on web pages are typically .jpg, .gif, or .png files. These three popular compression formats are universally recognized by browsers. Do not use another format, such as .bmp.

Please make sure you either own the image or have permission from the owner to use the image. Here are a few web sites that have some free images available for your use:

To download an image, place your cursor over the image, right-click, and select “Save Picture As” or “Save Image As.” Save the image in the same folder as the web page on which you want the image to appear. The following code will add an image to your web page:

<img src=”imagename.jpg” alt=”alternative text” height=”100″ width=”200″>

Imagename.jpg gets replaced by the name of the image file. The alt attribute provides alternative text for those users who cannot or prefer not to view images. The height and width attributes should reflect the actual height and width of the image, and are used by the browser as it renders the page. Height and width should not be used to resize the image; use image editing software (such as Paint, Fireworks or Photoshop) to resize.

For example, if you want an image of a turtle to appear on your web page, the code might look like this

<img src=”turtle.jpg” alt=”Pretty Box Turtle” height=”100″ width=”200″>

The image code will work only when the image file and the html file are in the same folder. If the files are in different directories, you must do some relative pathing, which is beyond the scope of this tutorial.

If the image does not appear on your web page, check the following:

  • Is the filename in the image code exactly the same as the actual filename?
    • Beware: sometimes you don’t see the entire filename on your computer. The Windows operating system typically hides file extensions. To see your file extensions, open Windows Explorer and select: Tools > Folder Options > View, or Organize > Folder and Search Options > View. Then uncheck “Hide extensions for known file types.”
  • Are both the html file and the image file in the same folder?
    • Don’t forget to send the image file to the server, along with the html file.
  • Never start the image filename with c:/ or e:/ or any other drive.
    • This may work on your local computer, but when a user on another computer tries to view the web page, the image will not appear. The server doesn’t have a clue what is on your computer.