COS 125

Day 4

Agenda

Assignment 1 Due Assignment 2 Posted

Due Feb 9 @ 9:35 AM 3 missing @ 8:30 AM

Today we will look at creating and using images Examples

http://perleybrook.umfk.maine.edu/samples/imagesplay.htm http://perleybrook.umfk.maine.edu/samples/bk.htm

Factors to Consider for Web Image

Format Color Size/resolution Speed Transparency Animation

Formats

3 Possibilities GIF

Version 87a Older

Version 89a Transparency and animations

Interlaced or non-interlaced JPEG

Compressed (variable) PNG

Optimized or non-optimized palette Interlaced or non-interlaced

Color

Depth (# of colors per pixel) 24 bit

16,777,216 possible colors “true color” Photo quality

16 bit 65,536 colors

8 bit 256 colors

Browser Colors

Most Browser cheat! Lock palette to 256 specific colors

Because of difference in O/S’s only 216 colors are Web Safe http://www.cookwood.com/html/colors/websafecolors.html

Non web safe colors may be dithered or shifted

Check colors in browser before you use them http://perleybrook.umfk.maine.edu/samples/colorchecker.html http://perleybrook.umfk.maine.edu/samples/colorpicker.htm

Size and Resolution

Pixels Monitors are 70-90 pixels per inch Printers are >200 ppi 800 X 600 image

10X7.5 inches on monitor 4X3 inches (or less) on printer

The more pixels on a printer means greater detail The more pixels on a monitor means larger size

Standard SVGA monitors are 800X600 16 bit XGA monitors are 1024X768 24 bit or better

Speed

How fast can the picture be displayed? Factors

Size of graphic file Size of graphic Color depth Compression

Interlacing Sneak peek

How to make graphic load faster Use the right image format

For Photo realistic images use jpeg Lossy compression Use Gaussian blur and re-compress

< 256 colors (logos, text, cartoons) Gif using LZW compression PNG

Only covert images to web format after all editing is done

Transparency

Only for GIF and PNG “remove” one color from image Remove Background (or other color) to make image

non-rectangular and allow web back ground to “bleed” through

Remove color in image to create special effects

Animations

Animated Gifs Flash Both work with frames

Like cartoons Series of images with slight changes between each

image

Where to get images

Buy or download Copyrights

Scan existing images Blake library

Digital camera Blake library

Create using an image editing program Adobe Photoshop and Image ready Macromedia Fireworks JASC Paint Shop Pro

Goggle image search

Inserting a Image Determine after what element in your WebPage you want the

Image to appear Place cursor in your code after the element Type <img src=“image.url”/> “image.url” is location of the file

http://www.server.com/images/image.gif ../images/image.gif images/image.gif image.gif

Hint To place image on a new line use <br/> before <img …/>

Offering Alternative Text

If the image won’t appear, the “alternative text” will <img src=“cat.gif” alt=“Picture of a cat”/> alt is REQUIRED for XHTML Can also use title attribute On some browsers “Alt” text will be a mouse over

pop-up Examples

http://perleybrook.umfk.maine.edu/samples/UsingImages.htm

Specify Size of Image

Tell the Browser how large the picture is to speed up loading

<img src=“image.gif” alt=“a picture” height=“100” width=“100” />

Quick Way Insert image in webpage without dimensions View page and right mouse on image Select properties and determine dimensions Modify img tag with the dimensions

Scaling an Image

Use new values for height and width attributes

CAREFUL –you must maintain aspect ratios or you will distort image Just set height or width and Browser will

automatically set the other

Can also set to percentage of Browser viewable space height =“ 50%” width = “50%”

Thumbnails

A thumbnail is a “mini” version of a larger image <a href=“large.jpg”><image src=“mini.jpg” alt=“A

thumbnail” height = “50” /></a>

Making Images “float”

You can float images in the text You can move image to the left or to the right

relative to text <img src=“image.gif” align=“right”> Use <p></p> after img tag to get text to “fill”

left over space Example

http://perleybrook.umfk.maine.edu/samples/textfloat.htm

Stopping Elements from Wrapping Image

You can control how text & other elements “flows” around your images

<br clear=“left”/> (or right) Next element goes to first available margin on left

<br clear=“all”/> Next element goes to first available spot where both

margins are clear

Adding Space around Image

Create a buffer around your image <img src=“image.gif” alt=“a picture” height=“100”

width=“100” hspace=“20” vspace=“20” />

Aligning images

NOTE: Not all directions work in all browsers Used to align images with text <img src=“image.gif” align=“direction”> Where direction is

TEXTTOP Top of image to top of text

TOP Top of image to top of tallest element

MIDDLE Middle of image with base of text

ABSMIDDLE Middle of image to middle of tallest element

BOTTOM Bottom of image to baseline of text

ABSBOTTOM Bottom of image to bottom of tallest element

Adding Horizontal Rules

A horizontal rule is a line across the Web page <hr/>

size=“10” (how thick) Width=“70%” (how much of the page width) Align=“left” or “right” or “center” noshade=“noshade”

Creating images

Next class we will be using Adobe Photoshop and Image Ready along with JASC’s paint shop pro to create and modify images (including animations)