1. COS 125 Day 4

2. 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.htmhttp://perleybrook.umfk.maine.edu/samples/imagesplay.htm –http://perleybrook.umfk.maine.edu/samples/bk.htmhttp://perleybrook.umfk.maine.edu/samples/bk.htm

3. Factors to Consider for Web Image Format Color Size/resolution Speed Transparency Animation

4. 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

5. 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

6. 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.htmlhttp://www.cookwood.com/html/colors/websafe colors.html –Non web safe colors may be dithered or shifted

7. 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

8. Speed How fast can the picture be displayed? Factors –Size of graphic file Size of graphic Color depth Compression –Interlacing Sneak peek

9. 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

10. 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

11. Animations Animated Gifs Flash Both work with frames –Like cartoons –Series of images with slight changes between each image

12. Where to get images Buy or download Scan existing images –Blake library Digital camera –Blake library Create using image editing program Goggle image search

13. 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 “image.url” is location of the file –http://www.server.com/images/image.gifhttp://www.server.com/images/image.gif –../images/image.gif –images/image.gif –image.gif Hint –To place image on a new line use before

14. 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/UsingImages.htmhttp://perleybrook.umfk.maine.edu/samples/UsingImages.htm

15. 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

16. 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%”

17. Thumbnails A thumbnail is a “mini” version of a larger image

18. 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 after img tag to get text to “fill” left over space Example –http://perleybrook.umfk.maine.edu/samples/textfloat.ht mhttp://perleybrook.umfk.maine.edu/samples/textfloat.ht m

19. 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

20. Adding Space around Image Create a buffer around your image

21. 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

22. Adding Horizontal Rules A horizontal rule is a line across the Web page –size=“10” (how thick) –Width=“70%” –Align=“left” or “right” or “center” –noshade=“noshade”

23. 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)