1. Graphic images for computers Stored in files of binary data - Binary blobs Software has to know the binary format to decode the file and render an image. There are well over binary 50 formats for computer graphics: Some common ones:.bmp (Bitmap -- Native Windows format).pict (Native Macintosh format).psd (Photoshop's proprietary format).tiff (Another common format for graphic editing).gif (Used on the Web.).jpeg (Used on the Web.)

2. Common software used to render computer graphics Commercial grade graphic editing software – Adobe Photoshop or Illustrator (Expensive) Freeware/Shareware graphic editing software Web browsers View only -- can't edit graphics Images don't need to be embedded in Web pages -- open raw image file with browser Only image formats used on Web -- GIF and JPEG (also PNG)

3. Browser rendition Photoshop rendition

4. Pixel Map -- Store one color for each pixel Options: Use full RGB spectrum -- 3 bytes per pixel Use smaller color palette -- index the available colors -- store index number

5. Raw pixel maps The bigger the palette -- the more memory required for pixel map Comparisons below An image 500x400 pixels (roughly one fourth the size of a computer monitor display) 200,000 pixels in pixel map

6. GIF (Graphics Interchange Format) Main strategy Use small color palette -- max 256 colors (8 bit) Size of color palette for a given image is fixed, but can be comprised of any of the RGB colors Non-Lossy compression -- low compression of pixel map when stored in binary GIF file Examples of GIF palettes 4 bit 4 bit 8 bit 1 bit 2 bits grayscale bluescale bluescale

7. Transparent GIF The background is not transparent for this one Animated GIF – just like a cartoon, a series of graphics GIFS are best for low-color icon type graphics Most prevalent format used on Web -- by far Main Reasons Small file sizes Flexibility

8. JPEG (Joint Photographic Experts Group) Full RGB spectrum Good for photographs But big file sizes unless high compression is used Superior Compression Algorithm -- But lossy Left: Medium quality Right: Low quality

9. Embedding Images in Web pages Image (img) element src stands for source URL can be relative or absolute Most often, images used in a page are stored locally, so relative URLs are used. img element is inline by default

10. Image element left and right alignment over-ride inline behavior of images, causing image to float on page -- text flows around image

11. <----------- doubled in size (preserved aspect ratio) <----------- distorted <----------- Original Size

12. The width and height attributes should always be used, even if the image is not resized. Remember, browsers read HTML file, make secondary requests (http keep-alive) to server for images. If width and height are not specified, browser has to wait until it receives the images before continuing page layout. If width and height are specified, browser can continue with layout, drawing empty boxes for images before they arrive. In general, this helps pages load more quickly.

13. Background images Not set with the img element Set using background attribute of body element Background images are usually small and are tiled to form background for whole page. If you specify a background and bgcolor the background image is displayed, not the color.

14. Some examples of background images. You can find tons of graphics like these in online graphics mage libraries. Many, if not most, are gnarly.

15. Images as Links Simply put the image as content of the anchor element If you do not specify border="0", some browsers will draw a colored border around the image corresponding to the underline given to links. The color of the border will be that of unvisited or visited links, depending upon the status of the image link.

16. The overhead of a Web page. This refers to the total amount of data that a Web browser must download in order to build the page. -The HTML file itself - The graphics - Other resources like Flash animations Many studies have shown that slow load times cause people to surf away from a page. Keeping the page overhead as low as possible is clearly best. A page with over 100K of overhead is starting to get beefy.

17. One-pixel (1x1) images Basically invisible in Web pages Used for Web Beacons for tracking place in lots of pages image source is from third-party server The secondary requests to the third-party servers can track your surfing using cookies. Ad banners can be used in the same way.