The ease with which images are added to HTML documents is one of the things that made the World Wide Web so much more widely adopted than the Internet-surfing tools that preceded it.
Although any image anywhere on the Internet could be added to any web page anywhere else on the Internet, usually a Web site's images are integral to site design and the web page author creates his or her own images and stores them in the same place as the HTML document.
Adding an image to a web page:
An image will appear anywhere in your HTML document that you place an image tag. An image tag starts with: <img src=
src - source
= - equals
add the URL indicating the location of the image: "ape-silverback.jpg"
Then close the image tag: />
Image paths:
The URL (in quotes) in the example above is simply the name of the image itself. Web designers frequently put all images into an "image" subdirectory to help organize a site's files. If the image above was located in a subdirectory titled "images," the directory path would be:
If the image was located on a completely different machine, the full URL (address and path) would be given:
Additional required image tags:
In addition to the very basic tags used in the example above, a complete image tag should also contain these attributes.
alt tag - this is a line of alternative text that will be displayed if the image does not load properly or if someone is viewing the site with images turned off in their browser:
height and width size tags - these will greatly speed up page loading since the browser won't have to wait for the image to load to figure out how much space to reserve for it:
Here the image is intentionally broken to illustrate how the alt and size tags work:
Images and page load times:
Images can contain meaningful content or be used solely for decoration. In either case, their use should be weighed against the amount of time that they take to download.
Web viewers are about as patient as TV remote-control users on speed - if a page does not load fast, they are gone.