Lecture 25 - Images in Web Pages

Download Report

Transcript Lecture 25 - Images in Web Pages 

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
<IMG SRC="URL">
• 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
<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
<BODY BACKGROUND="filename.gif">
• 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