.jpg files:

• create very slight bluring
• hold more data in less space
• are excellent for photos
• store images with 65,000 colors (But a computer can display only 256 at a time, so the web page deals with this at download time. The results are usually very good. The picture at the right is a 21K .jpg file. I chose to display a yellow border around it --color me National Geographic. The width of the border is variable, and it can be omitted.)

• work better for line art and color drawings and for any text stored as graphics (for example a decorative title)
• are limited to 256 colors, and palettes differ. (Some gifs look better on some machines than on others.)
• can load non-consecutively, so that the effect is to sketch out the general picture and then go back and "focus" it. (This is good for large images, since the user can know to abort the download if it doesn't seem relevant to anything.)
• can have a transparent background so that line art, for example, can be displayed against the web page background. Typically such files can be very small. The Chinese trellis at the top of this page is a "transparent gif" file only 2K in size.)

Backgrounds: Pictures can be inserted anywhere on the page with the "img" tag. One picture can be repeated over and over to cover the whole window as a "background" by using the "background=" tag in the "body" instructions. The granite-like background on this page is an example. View the "source" text for this page to see the comands.

Image Scaling: If you don't want a picture to appear on the screen at its original size, you can resize it in a picture processor or resize it on the fly when the page loads. In this section you will learn how to resize it as the page loads.
Disadvantages: The whole image has to load whether or not it is reduced in size, so using this to make a little picture from a big one this way does not save download time.
Advantages: However this does allow you some control over the composition of the screen. Notice that the Chinese trellis at the top of this web page changes size to fit your screen (and remains centered) regardless of how you resize your window or what resolution you set your monitor for.

Here is a demonstration of simple image scaling, using the graphic that was shown above in its original size. Below are multiple copies of the same image, but for each one the image tag includes the expression width=xx%. The xx part of that is the percentage of the width of the browser window. Notice how the following proportionally scaled images change size as you resize your browser window.

As usual, to see the underlying HTML code simply view the "source" for this page.