Computer Science 101 Images in Web Pages

Image Files Two common formats, GIF and JPEG GIF images are more flexible for use as icons JPEG images are sharper with more colors (good for full-size photos)

Sizes Image size - measured as width and height in pixels File size - measured as data size in kilobytes (1000 bytes = 1000 * 8 bits)

Data Compression For a true color monitor, each pixel gets 24 bits Even a small image size requires a huge number of bits (100 * 100 * 24 = 240K) Files are in compressed format and the image is rebuilt when it is displayed

Creating and Editing Images Use a scanner, a digital camera, or a digital video camera with a stop Edit with an image manipulation program

Image Markup Use the IMG element Not a container element One required attribute, SRC Loads the image stored at the URL

Example: Nathaniel

Too Big, Too Many The larger the image, the more time it takes to load Use economy with images on a single page Create a balance between speed and content

Width and Height Attributes By default, width and height come from the image itself The size of an image can be reduced or enlarged by specifying the attributes

Always Specify the Width and Height The browser can lay out the entire page before all the images have been loaded

Resizing Rectangular Images When an image is not a square, you must adjust the width and the height in proportion to the desired size We need to fit a 26 by 37 image in a square of 30 26/37 = w/30

Alignment ALIGN –bottom (default) –middle –top –left (causes text to flow to right of image) –right

Spacing HSPACE,VSPACE expect number of pixels as values

Other Attributes BORDER=pixelWidth, draws a border around the image ALT="some text", displays the text when the image is unavailable or the browser’s image display is turned off

Images as Links Use a small version of the image as a link

Thumbnailing You can just resize the image for the link, but it will take the same time to load as if it were the original size Better to create a thumbnail by using an image processing program to reduce the image’s file size

Organizing Image Files Keep them on your server (for speed) Associate with topics in their directories Or keep commonly used images in a separate directory under public_html

Background Images Use an image to paint a page’s background Tiles the image (repeats its display in row after row)

Other Contents of Web Pages In addition to text and images, Web pages can contain –video –sound –applications