1. Day 4

2.  Assignment 1 Due  Assignment 2 Posted 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/imagesplay.htm  http://perleybrook.umfk.maine.edu/samples/bk.htm http://perleybrook.umfk.maine.edu/samples/bk.htm

3.  Format  Color  Size/resolution  Speed  Transparency  Animation

4.  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.  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.  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 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/colorchecker.html  http://perleybrook.umfk.maine.edu/samples/colorpicker.htm http://perleybrook.umfk.maine.edu/samples/colorpicker.htm

7.  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.  How fast can the picture be displayed?  Factors  Size of graphic file  Size of graphic  Color depth  Compression  Interlacing  Sneak peek

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

10.  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.  Animated Gifs  Flash  Both work with frames  Like cartoons  Series of images with slight changes between each image

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

13.  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.gif http://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.  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.htm http://perleybrook.umfk.maine.edu/samples/UsingImages.htm

15.  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.  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.  A thumbnail is a “mini” version of a larger image 

18.  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.htm http://perleybrook.umfk.maine.edu/samples/textfloat.htm

19.  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.  Create a buffer around your image 

21.  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.  A horizontal rule is a line across the Web page   size=“10” (how thick)  Width=“70%” (how much of the page width)  Align=“left” or “right” or “center”  noshade=“noshade”

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