Correctly sized images for this lesson are available in your resource files .
ALT text: It is important to include in the IMG tag an ALT value that describes what an image is or what it is for. Text reader software will read your ALT text as though it were part of the page's text.
Download time gets longer and longer as you add more images to the page. When should you stop? That depends.
Connection speed: How fast do you think your viewers can download your page and images?
Importance: Are your images necessary to understanding what you are saying with this page?
Faster is better! People start getting seriously impatient if it takes longer than they expect to download your page and its graphics. How many seconds is that? That depends, of course, on the person.
Some sites must use lots of images and interested viewers have more patience. For example, a gallery of art works or a page that diagrams a scientific process (or many of these lesson pages!) needs many images. The readers may be willing to wait longer than usual.
Step-by-Step: Replace Image
|What you will learn:||to check download time
to edit image SRC
to add ALT text in code
to add TITLE text in code
Start with: , hector9-Lastname-Firstname.htm, resource files
To reduce the loading time you should use images that are already the size you need. With a graphics program you can reduce the size of an image and save it as a new file. In your web project2 folder you will find alternate images that have already been resized.
Each image should have ALT text which tells what the image is or what its function is. You can include descriptions of the image if that is important.
Word Wrapping in Notepad: As you edit existing text or tags, the word wrapping will change. Notepad does not change the wrapping in the whole document like more advanced programs do. It can look quite odd when just a few characters wind up on a line by themselves in the middle of a paragraph! Your own document may not match the screen shots at all since the width of the window changes the wrapping.
To make Notepad refigure the wrapping, turn Word Wrap off and then back on again. (> )
While File Explorer can tell you the total of the file sizes of what has to download to see a web page, it cannot tell you how long it will take. Most HTML editing software includes a feature to estimate the download time, but Notepad and other text editors do not. There are several online services, however, that can help with this.
Note: Download speeds are measured in Kilobits per second (Kbps) or Megabits per second (Mbps). File sizes are measured in bytes, Kilobytes (KB), or Megabytes (MB). A byte is 8 bits.
How to Calculate: Take your total file size in Kilobytes and multiple by 8 to get the value in Kilobits. Divide by the speed in Kilobits per second (Kbps). The results is your answer in seconds.
[No, you cannot get away from math and still talk about technology! ]
All of the images except Mail.gif have an alternate file with a 2 in the name.
How much faster do you think the page will download when using correctly sized, smaller files?
Note: Speeds in an online calculator are rounded, so anything under 1 sec. may show up as zero seconds.
To change an image change the SRC attribute of the IMG tag.
These new images were sized so that the images line up nicely, having about the same height.
For example, carla2.jpg is 170 x 212.
All IMG tags should include the ALT attribute. This text shows in most browsers when the image is not available for some reason or when the page is read aloud by screen reader software.
Some older browsers, like IE8 and earlier, show the ALT text in a screen tip when the mouse hovers over the picture. That is not what any HTML standard calls for, which is why most browsers don't do it! The TITLE attribute for an image is what will show as a screen tip. But a TITLE attribute is NOT required.
Switch back to Notepad.
The TITLE attribute for an HTML element lets you add text that will show when the mouse hovers over the element. This works in all current browsers. The text can be just a short identification of the picture, or a paragraph explaining more about the picture. Keep in mind - screen tips vanish after a short time. It get's annoying very quickly if there is too much to read before the screen tip vanishes!
The IMG tag is getting long!
Switch to your browser and Refresh.
Hover over each photo and make sure the screen tip shows what you
meant for it to show.