123 Web Design!

Inserting images

Enough with boring text, lets move on to something more colorful- images!

Adding images to your web page can't be simpler (creating them is another story). Images are inserted into a document by using the <img> tag. The below inserts an image called "paperboy.gif":

<img src="paperboy.gif">

Two things to notice here. First, all <img> tags have a src attribute, which is required to specify the file path of the image you're inserting (in this case, its paperboy.gif). Second, <img> tags no not have closing tags (ie </img). It's one of those rare cases where a closing tag is not required.

-The width and height attribute of <img>

There's a secret to making your images load faster in a document- use the width and height attribute of the <img> tag. These attributes allows us to explicitly specify the dimensions of the image, thus saving the browser the boring job of having to determine this info itself (thus increasing download time). The above paper boy is 98*100 in dimensions. Lets tell our browser that when defining it, shall we?

<img src="paperboy.gif" width="98" height="100">

The width/height attribute can actually do more than just speed up an image's download. We can use it to also alter the dimensions of the image. Lets blow up the paperboy by giving it a large width and height:

<img src="paperboy.gif" width="200" height="208">

Ugly paper boy, from this viewpoint!