Images examples page

<img src="name"> Adds an image, src is the source of the image.
  • Currently there are two types of file formats that can be used to place an image on a web page.
    • .gif -256 color range done a pixel by pixel basis
      Good for general pictures
    • .jpg -millions of colors using mathematical line equations to draw the picture.
      Good for photographs.
Looks like this: <img src="example.gif"> ...no closing tag.
    align="?" Aligns an image: left or right on a page or within an element.
Used so that text can be wrapped to the opposite side of the image as in the examples below.
example of right text placementIn this example the words will appear to the right of the left aligned image and wrap on down past the image if needed.example of text alignIn this example the words will appear to the left of the right aligned image and wrap on down past the image if needed.
In both of these examples the text comes after the image tag. There is no image closing tag.
If you wish to center the image use either the <center>image</center> tags or
use the center align attribute of the <p>, <div>, etc...
Looks like this: <img src="example.gif" align="left"> ...for left of course.
    align="?" Aligns text relative to image: bottom, middle, top.
This is different from above in that you create a single line of text and the rest jumps down below the image. Examples...
example of text alignmentThe text aligns like so, bottom. example of text alignmentThe text aligns like so, middle. example of text alignmentThe text aligns like so, top.
Looks like this: <img src="example.gif" align="middle"> ...for middle of course.
    border="?" Sets the size of the border around an image. If you want one that is. Here is an example of adding a ten pixel width border.
example of text alignment
looks like this: <img src="example.gif" border="10">
    alt="?" A text string that will be displayed in browsers that do not support images.
  • They have an earlier browser that does not support images.
  • They have images turned off so that the page will load faster.
  • The image is not available for download when called.
  • The blind use a reader, it will read the alt text.
For these reasons the alt attribute should always be used and should be desciptive of what the image looks like.
Looks like this: <img src="example.gif" alt="image used for example image on page">
    vspace="?" The size of the space above and below the image.
example of text alignment
The table cell has stretched vertically to include the vspace of the image.
Looks like this: <img src="example.gif" vspace="20">
    hspace="?" The size of the space to left and right of the image.
example of text alignment
The table cell has stretched horizontally to include the hspace of the image.
Looks like this: <img src="example.gif" hspace="40">
    width="?" The width the image will be displayed.
The actual width of the image should be used but the image can also be stretched or narrowed by giving wrong values. If done image quality suffers. Examples using an 80 pixel wide image.
example of text alignmentsqueezed example of text alignmentproper example of text alignmentstretched
Should always be used with the height attribute.
Example of use below... with height.
    height="?" The height the image will be displayed.
The actual height of the image should be used but the image can also be stretched or squashed by giving wrong values. If done image quality suffers. Examples using an 40 pixel high image.
example of text alignmentsquashed example of text alignmentnormal example of text alignmentstretched
Should always be used with the width attribute.
Looks like this: <img src="example.gif" width="80" height="40">
    lowsrc="?" URL path to image that will be loaded first.
There are times when the image to be loaded will be a very large file. People may not like to wait very long to get the finished picture in detail. They would like to see something. This attribute is used to help the visitor to see a rough picture of what will eventually appear. The file is much smaller so it loads more quickly. Then the browser will begin to download the larger file for detail.
No example for this here... I don't use images that large or detailed.
Looks like this: <img src="example.gif" lowsrc="firstload.gif">
What would it look like all together...
<img src="example.gif" align="left" border="5" vspace="20" hspace="40" width="80" height="40" alt="image used for example image on page" lowsrc="firstload.gif">
Use as many or as few as you like. Src is the only absolute required attribute.

Hope that this helps you...

Author: Joseph Raymond

6th of April, 2001