To prepare images for the web, consult these related topics:
Basic Image Editing in Adobe Photoshop
Image File Types for the Web:
JPG: For web delivery of photographs and art work, save the image as a JPEG file (file extension .jpg or jpeg). Choose the high or maximum quality unless you are concerned about file size/memory issues.
GIF: For images with a limited color palette, such as line art drawings, cartoons, or simple icons, save the image as a GIF file (file extension .gif).
A basic HTML image tag looks like: <img src="filename.jpg" width="100" height="200">
Useful Attributes in Image Tags in HTML:
- SRC -- This specifies where to get the image to display. If the image is in the same directory as the HTML, all you need is the file name. There is no closing tag.
- WIDTH -- How many pixels wide the image is. If you specify a number that is different from the image's actual width, the browser will scale the image; it is best not to do this unless you have a good reason. You can omit this tag, but it makes the browser work harder, and can delay how long it takes to display a page, since all processing must stop until the actual image is downloaded. However, the image will still display correctly if it has been saved with screen resolution (or 72 pixels/inch).
- HEIGHT -- How many pixels high the image is. (See WIDTH)
- ALT -- This tag contains a short text caption that will be seen if the user has turned off image display in her browser; it is also good for letting blind people know what the image is. For example, if you bring your mouse to the image of the bear below, you'll see a line of text pop-up that says "This is the Bruin bear."
- ALIGN -- Left, right, top, middle, or bottom. Left and right let you put the image in-line with the text and wrap the text around it; top, middle, and bottom refer to how the image aligns vertically with the line of text on which it is placed.
- BORDER -- Specified in pixels. Places a border around the image in the same color as the default text color.
- HSPACE, VSPACE -- specified in pixels, lets you provide some "air" around the image, i.e. It put the amount of pixels specied of space above and below (vspace) or on the left and the right (hspace) of the image. This is so that so the text doesn't butt right up against it.
Code for Bruin Bear Example Image: <img src="bear.jpg" alt="This is the Bruin bear." width="240" height="144" hspace="10" vspace="10" border="5" align="right"/>
Background Images - come in two main varieties:
- Tiled backgrounds create a uniform background texture by filling the designated area with a repeated background image: for examples and images that you may use, see the tiled background images on the Humnet server.
- Border backgrounds use the repetition of a segmented image to create the look of a border or side bar, often on the left. This is a short, easily followed tutorial on creating and using background images with "side" bars or left borders. More free border background images can be found here. Borders can also be created using html style sheets (example).
More Online Image Resources -
- Maricopa Center for Learning and Instruction: "Writing HTML," "Chaper 7a: Inline Graphics"
- Maricopa Center for Learning and Instruction: "Writing HTML," "Chaper 20: Extra Alignment"
- Cool Text - This free site will create banner images, based on text you enter, and options you select. You then download or save the "rendered" image to your hard disk to use it a web site.
- Microsoft Office Free Clip Art and Media Online - extensive database of clip art and images, searchably by keyword.
(Note: unfortunately, Microsoft has been making more of these images in the windows media file formats, so file-format conversion may be necessary.)
Last updated April 24, 2007 by rg