Jan's Illustrated Computer Literacy 101 Logo:Jegsworks Jan's Illustrated Computer Literacy 101

Home > Jan's CompLit 101 > Working with the Web > HTML & CSS Basics > Images > Replace Image
Icon: Arrow - Previous pagePrevious    NextIcon: Arrow - Next page

Jan's Working with the Web

   Images: Replace Image

You can reduce the download time of your page by using images that are sized correctly. You must use a graphics program, like Paint, PaintShopPro Icon: Off Site or Adobe Photoshop Icon: Off Site to resize images.

Correctly sized images for this lesson are available in your resource files Icon: On Site.

TipALT 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

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.

Icon Step-by-Step

Step-by-Step: Replace Image

 Icon Step-by-Step

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 withIcon: Class diskhector9-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.

Icon: TipWord 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. (View > Word Wrap)

Save As

  1. Icon: Class diskWith Notepad showing hector9-Lastname-Firstname.htm, from the menu select  File  >  Save as .
  2. Use the name   hector10-Lastname-Firstname.htm  to save the page to the web project2 folder on your Class disk.

Check Download Time

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.

  1. If necessary, open a File Explorer window to show the files in the web project2 folder and then its subfolder HTML on your Class disk.
  2. Add up the total of all the file sizes for the images and the HTML file
    Hint: Hold the CTRL key down and click on each of the image files in the folder HTML. The total will show at the bottom of the window.

  3. Add that total to the file size for hector9-Lastname-Firstname.htm.
  4. Using the values below, calculate how long it will take to download all of the parts needed to see the page.

    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.

    • Option 1:  Do the math yourself for the speeds below:
      • 28.8 Kbps
      • 56    Kbps
      • 128  Kbps
      • 256  Kbps
      • 512  Kbps
      • 600 Kbps
      • T1 = 1.544 Mbps = 15440 Kbps

      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! ]

    • Option 2:  Search online with words like estimate download time to find an online download speed calculator, like Download Calculator Icon: Off Site
  5. Compare the file sizes of carla.jpg and carla2.jpg and also other similar pairs of images in this folder.

    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?

  6. Add up the total of the file sizes for the alternate files along with the HTML page and Mail.gif:

  7. Recalculate the download speed.
    The speed should be faster using these smaller files. How much faster? Was your guess a good one? 

    Note: Speeds in an online calculator are rounded, so anything under 1 sec. may show up as zero seconds.

Edit Image SRC

To change an image change the SRC attribute of the IMG tag.

  1. hector10 with alternate, resized imagesSwitch to Notepad, showing the code for hector10-Lastname-Firstname.htm.
  2. Edit the file names in all of the IMG tags except for Mail.gif to add a 2, like  carla.jpg  to  carla2.jpg 

    These new images were sized so that the images line up nicely, having about the same height.

  3. Edit the dimensions in the IMG tags to use the dimensions from File Explorer for their actual width and height.

    For example, carla2.jpg is 170 x 212.

  4. Icon: Class disk Save. 

  5. Switch to your browser and Refresh.
    The three photos should line up neatly with the same heights.

Add ALT Text

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.

  1. Switch back to Notepad.

  2. Inside the IMG tag for  carla2.jpg , type  alt="Photo: Carla and Hector Chavez"  
    Be careful to leave a space between each of the attribute/value combinations.
  3. Add your own (appropriate) ALT text for the other images, including the mail box image at the bottom. 
    Think carefully. If the image is missing, what do you want your reader to know about what is supposed to be there? There is a difference between merely decorative images and images that include information!
  4. Icon: Class disk Save. 

Add TITLE Text

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!

  1. Inside the IMG tag for carla2.jpg, type title="Our anniversary trip to the World Cup! Such fun!!"

    hector10 - IMG with ALT and TITLE attributes filled in

    The IMG tag is getting long!
  2. Screen tip when mouse hovers over photo (browser)Add your own (appropriate) TITLE text for the other images - Ricardo, Rosa, pyramids, China, and mail box.
  3. Icon: Class disk Save.

  4. Switch to your browser and Refresh.

  5. Hover over each photo and make sure the screen tip shows what you meant for it to show.