COS 125 Day 4 Agenda Assignment

COS 125 Day 4

Agenda • Assignment 1 Due • Assignment 2 Posted – Due Feb 9 @ 9: 35 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 87 a – Older • Version 89 a – 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/websafe colors. html – Non web safe colors may be dithered or shifted

Size and Resolution • Pixels – Monitors are 70 -90 pixels per inch – Printers are >200 ppi – 800 X 600 image • 10 X 7. 5 inches on monitor • 4 X 3 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 800 X 600 16 bit • XGA monitors are 1024 X 768 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 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 • Scan existing images – Blake library • Digital camera – Blake library • Create using image editing program • Goggle image search

Inserting a Image • Determine after what element in your Web. Page you want the Image to appear • Place cursor in your code after the element • Type • “image. url” is location of the file – http: //www. server. com/images/image. gif –. . /images/image. gif – image. gif • Hint – To place image on a new line use
before

Offering Alternative Text • • • If the image won’t appear, the “alternative text” will 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/Using. Images. htm

Specify Size of Image • Tell the Browser how large the picture is to speed up loading • • 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 •

Making Images “float” • You can float images in the text • You can move image to the left or to the right relative to text • • Use

Stopping Elements from Wrapping Image • You can control how text & other elements “flows” around your images •
(or right) – Next element goes to first available margin on left •
– Next element goes to first available spot where both margins are clear

Adding Space around Image • Create a buffer around your image •

Aligning images • • NOTE: Not all directions work in all browsers Used to align images with text 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 •

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)