Embed Size (px)
Citation preview
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
<IMG SRC="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
<A HREF="URL"><IMG SRC="imagename.gif"></A>
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)
<BODY BACKGROUND="filename.gif">
Other Contents of Web Pages
• In addition to text and images, Web pages can contain – video – sound– applications
