Images
HTML The
<img> Tag and the src Attribute
In HTML, images are defined with the <img> tag.
The <img> tag is empty, which means that it contains attributes only, and has no closing tag.
To display an image on a page, you need to use the src attribute.
src = source
The value of the src attribute is the URL of the image you want to display.
Syntax for defining an image:
<img src="http://andyrutter.com/images/sample.gif" alt="sample image" width="274" height="211" /> |
Looks like this:
The URL points to the location where the image is stored.
An image named “sample.gif”, located in the “images” directory on “www.andyrutter.com” has the URL:
http://www.andyrutter.com/images/sample.gif.
The browser displays the image where the <img> tag occurs in the document.
If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.
HTML The Alt Attribute
The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.
The value of the alt attribute is an author-defined text:
<img src="boat.gif" alt="Big Boat" /> |
The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader)
HTML Image Tags
| Tag | Description |
<img/> |
Defines an image |
<map> |
Defines an image-map |
<area /> |
Defines a clickable area inside an image-map |
<align /> |
Defines element positioning |
Remember that size matters when we’re talking about page loading times.
1024 byts = 1 KB
1024 KB = 1MB
1024 MB = 1 GB
1024 GB = 1 TB’
As a rule 10kb is good enough, 15kb is borderline, and 20kb could cause problems on slower network.
A simple way to reduce image size is to save it in various GIF formats reducing from the standard 256 or 128 colours to 64 colour depth.