Day 4

 Assignment 1 Due  Assignment 2 Posted Assignment 2 Posted  Due Feb 9:35 AM  3 8:30 AM  Today we will look at creating and using images  Examples  

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

 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

 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

 Most Browser cheat!  Lock palette to 256 specific colors  Because of difference in O/S’s only 216 colors are Web Safe   Non web safe colors may be dithered or shifted  Check colors in browser before you use them  

 Pixels  Monitors are 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 800X bit  XGA monitors are 1024X bit or better

 How fast can the picture be displayed?  Factors  Size of graphic file  Size of graphic  Color depth  Compression  Interlacing  Sneak peek

 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

 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

 Animated Gifs  Flash  Both work with frames  Like cartoons  Series of images with slight changes between each image

 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

 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  ../images/image.gif  images/image.gif  image.gif  Hint  To place image on a new line use before

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

 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

 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%”

 A thumbnail is a “mini” version of a larger image 

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

 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

 Create a buffer around your image 

 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

 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”

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