Web images: 2 - getting the image in a web page

Adding an image to a page

Images are created in an image editing program (PaintShop Pro, Photopaint and PhotoShop are three well-known ones), or saved from a scanner or digital camera. Then they are saved as files on disc in an appropriate format: see the next page for more info on file formats.

Web pages don't actually contain the images inside them (unlike a word processor document for example), instead, you need to tell the browser where the image file is, and how it should be displayed.

To do this, you need to include a tag in the HTML code: if you use a WYSIWYG page editor, there will probably be an 'add image' button or menu to help you do this. Look into the HTML code, and where the image appears, you'll see something like this:

<img src="logo.gif" height="35" width="50" alt="my company logo" />

What this simple example says to the browser is: at this place on the page, display the image in the file logo.gif; reserve a space 35 pixels high by 50 wide for it, and provide the alternate text "my company logo" for it. (If you don't specify the dimensions, the text on the page will jump about as the image downloads, making your readers sea-sick!)

Other attributes you can specify (if you don't use styles to do formatting) include a border width, an alignment (for example, floating left or right of a paragraph, at the baseline of the text), and horizontal or vertical spacing. See the link to external site <img> tag page at index dot html for more details.

Here are some examples, in each of which the image tag is the first thing in the table cell (the blue square):

sample button image image aligned with bottom of text line. sample button imageimage aligned to the right of the text, which flows around the image, if it is long enough. 10 pixels of horizontal and vertical space added to improve the appearance. Image aligned to the right of the text, which flows around the image, if it is long enough. 10 pixels of horizontal and vertical space added to improve the appearance. Etc. sample button image image with border of 3 pixels and aligned in the middle of the text.

Note that it is very much better to use CSS positioning to align images to conform with the current standards.

Other places you can put images: as a background to the page, and if you use style sheets, as bullet characters in lists. Here is a silly example of a background image.