Image Path

 

Now that you have created, optimized and saved your images, it’s time to link them to your web pages. You can either use the relative or absolute path to address your images. In the following examples both will have the same result:

 

Relative Path

If you have all your images save inside the “images” folder in the project folder then use

 

relative path like:

<img src=”images/cat.jpg” />        (make sure to type the image extension)

 

 

Absolute path

If you’re using an image that is NOT saved in “images” folder and you’re borrowing it from another website then use absolute path like:

<img src="http://www.example.com/images/banner.jpg" />

 

NOTE: images WON’T be embedded to web pages. They will be linked.

 

 

 

Image Attributes

 

Sometimes images don’t load on a web page due to broken links, wrong image name or just some people turn the “show images” option off on their browsers:

 

    • Mostly on their mobile devices and laptops while traveling, since WiFi connections are usually slow.
    • If they use slow dial up connection.
    • For privacy reasons in the offices, libraries, etc.

 

There are two important attributes for image tag that will do some damage control in such cases: Alt and Title attributes.

 

Example:

 

<img src="images/cat.jpg" width="80" height="80" alt="cat" title="Persian Cat" />

 

 

Alt: is two or three words description about the image. Alt is an HTML attribute for the <img> tag used to provide alternative text for non-textual elements of a webpage (usually images). The alt information appears on a page when an image cannot be displayed. Here's an example of the alt attribute:

 

Alt Tag

 

 

Title: is also two or three words description about the image and can be the exact similar words you used for alt. This shows an image caption if you roll the mouse over an image. Here's an example of the title attribute:

 

Title Tag

 

 

 

Experiment:


  1. Run Internet Explorer then go to: Tools > Internet Options > Advanced
  2. Uncheck show pictures in Multimedia section
  3. Go to this website: http://www.amydresser.com/

 

If the images didn’t have the alt attribute, this page would be a blank white page.

 

 

The Benefits of Alt and Title Attributes

 

  1. Alt and Title attributes provide alternative information, in case the image doesn’t load.
  2. Visually impaired internet users use “screen reader” software that reads “alt” information to describe images.
  3. Proper alt and title information allows search engines like Google to find your web pages and images. [SEO]

 

 

Image Link

 

It's very common to link an image thumbnail to a larger image as in a gallery page. Here's how to do it:

 

<a href="images/cat-large.jpg" border="0" target="_blank">
<img src=”images/cat-thumbnail.jpg” />
</a>

 

 

Buy "Digest Web Design" PDF Book

 

All the information on this website is also provided in a PDF book for only $30.
Click here to buy.

 

 

<<    Previous Page                                                                    Next Page    >>