2.5: Adding images to your page
The Earth as seen from deep space in a JPG file. (NASA photo)
The visual world of the web
The World Wide Web is a visual place. Most of the pages in this chapter have been heavy on text with few pictures. To open this page and see a beautiful picture of earth is refreshing to the eye, and it demonstrates the spectacular use we can make of images.
In future chapters we will discuss in depth how to create images and when to use the various image formats. For now, we’ll concentrate on how to place a photo on your page.
Be sure to review the information in the sidebar on image formats.
The image tag
Here is the image tag for the Earth photo:
<img src="images/earth.jpg" alt="The Earth as seen from deep space (NASA photo)" title="The Earth as seen from deep space (NASA photo)" width="450" height="450" />
Let’s break it down:
- img is the image tag.
- src="images/earth.jpg" is the source attribute. Note that it has path to the images folder. The name of the image must be exactly right. A common mistake is to use the .gif suffix for a .jpg and vice versa. The img tag is worthless without a correct source attribute.
- alt="The Earth as seen from deep space (NASA photo)" is the alternate attribute. An alt attribute is required. It serves two purposes:
GIF files like this work well when the image has large areas of solid or “flat” color.
- If a visitor to your site cannot display images, the information in the alt attribute will be displayed. For example, when I am traveling abroad, I often turn off the image function in the browser to speed loading. The alt information is essential.
- Some people with impaired vision have computer programs that will read a Web page to them. This software can read the alt information to describe the picture.
- title="The Earth as seen from deep space (NASA photo)" is an optional attribute. The title attribute performs a neat trick: When you pause your cursor over the picture, a “tool tip” appears containing the title attribute text. Try it on the Earth picture above and the Milton Glaser design for I ♥ New York.
- width="450" height="450" are required attributes. We include them because if the photo does not load, some browsers will reserve the space described by width and height, thus preserving your design space. Without width and height, the space for the picture shrinks to nearly nothing.
TOP: Actual size of 100x100 pixels. BOTTOM: Image resized to 200x200 pixels shows “pixelization.”
- You can adjust an image to a smaller size — but not a larger size — within the img tag. Making an image larger causes pixelization.
- But even if you resize the image using height and width attributes, the larger file still must load.
- Best practice: Resize copies of your images to the exact size or close to it.
Some helpful tips
- Always reduce your photos to the actual size you want for your Web page. You can do this in PhotoShop or in a number of free photo handling programs. Just make sure that you have a backup copy of your original photo. By using actual size photos, you keep loading time to a minimum.
- You can move the image tag around on the page for the most pleasing text wrap. Don’t be afraid to experiment.