Images on web pages are separate files, loaded by the browser along with the web page. More specifically, when the web page is loaded, the browser looks for any references to images, and then requests the images from the server as well.

Most images are referenced using relative references. They are usually stored on the server in the same directory as the web page, or possibly a subdirectory. Here are a couple of examples:

Cover of Beekman textbook

Analytical Engine Courtesy of Culver Pictures, Inc.

Images should generally be in either .jpg or .gif format, as these are the formats recognized by most browsers. These two formats are based on different data compressions algorithms.

Also note that I have credited the second image. Always credit images (or other media) that you did not create, and get permission to use them if necessary.

Images can also be used as links to other pages. Below is an image which is an absolute link to the Beekman textbook home page, and another image which is a relative link to the course home page.

Beekman textbook home page

1590 home page

Images can also be used as a background for a web page. See the source code to find how this is done.

If the image does not fill up the web page, it is "tiled" over the page. Here, I am using an image that I created in paint which has 2 blue and 2 yellow squares. The tiling effect makes it look like it is all blue and yellow squares.

As you can see from this, background images can be very distracting and make the web page harder to read. Use them with caution!