Note Pictures and images give the Internet webpages much of their glitter and impact. At a basic level, they are easy to insert and position. Moving the images, sizing them, and so forth are more advanced topics.
All pictures and images you see on a webpage are in one of two formats: JPG and GIF. Both formats were developed for use on the Internet, essentially compressive files so they will transfer more quickly. JPG files are smaller and excellent for such things as photographs. GIF files are normally bigger, but give greater clarity to such things as small letters and numbers than JPG. For purposes of using pictures and images on a webpage, you will want to keep each image no larger than 30 or 40 Kilobytes. The reason is that larger file sizes take a lot longer to travel over the Internet--that is why some webpages you look at take so long to download before you can see them. If you have impatiently surfed somewhere else rather than wait, you already know why smaller file sizes are better!
Photographs are essentially composed of tiny dots, which is why enlargements turn out more "grainy" than the "original" 4"x5" prints were. These dots are measured in units called "dots per inch" or dpi. A Kodak photograph has about 2400 dpi. Using one of today's inkjet color printers you can print "photographic quality," but the printer is printing at somewhere around 600-1200 dpi. Photo-processing programs that come with most scanners allow you to set your dpi for each picture you want to use. For the Internet, the dpi should be smaller, in fact set about 72 dpi which is the resolution of television and monitor screens. High dpi settings for the same picture make the file sizes geometrically larger! Because inexpensive printers today can print color at 1200 dpi, the memory requirements have gotten enormously larger. That 4"x5" 72 dpi photograph stored in 103 K suddenly requires 1.8 M at 300 dpi and 28 M at 1200 dpi. That is why the basic computers come with 16 M or 32 M RAM, and they need that much memory and more! A 1200 dpi file is not needed for the Internet's purposes and it would take hours and hours for a typical home user to download.
In summary, keep the file sizes small and the resolutions between 72 and 100 dpi.
Where do images come from?
- You can have photographic film images converted into JPG or GIF images most anywhere now as you develop your film; the cost is under $5 per roll.
- You can scan photographs and graphic images using a scanner. Color scanners can be found for under $100 today.
- You can take pictures with a digital camera.
- You can create and modify images using programs such as Paint.
- You can "capture" any image you find on the Internet using the PrintScreen botton and then pasting into a graphics or photo program.
- You can SAVE AS any image you find on the Internet by using simple mouse commands.
But how do you get the image on a webpage?
<img src="neh-wo2.jpg"> anywhere in the HTML file inserts the following image:
Note
that the defaults place the picture at the left margin and begin the text at the bottom.
This picture is too large and needs to be sized. On the "homepage" for this workshop, the picture appeared much smaller. . . . Look at the following code:
The width and height commands size the picture. Note that the units are called pixels (or dots), and in "resizing" the picture for better appearance on the webpage you must keep the ratio proportional.
You want this:
not
You can position a picture to the right of the screen with the text on the left with an
<align=right> command, which is inserted into the img src tag, thusly:
<img src="neh-wo2.jpg" align=top align=right>
In using this command, the text appears on the left of the picture and gives variety to the screen's appearance. The align command also allows the text to flow around the picture.
You can also <align=center> and <align=left.>
Putting a little caption under a picture is nice, but not an HTML feature.
You can do it with a little clever creativity by using a 1x2 table,
putting the picture in the first row & cell, and
the caption in the second rowcell. For example:
|
Clever caption goes here. |
These few image codes give you a good start on putting pictures and graphic images into your webpages.
Next: Inserting Links