1. HTML presentation Graphics H format H data compression H size H creating or finding H publishing

2. HTML presentation Graphics n You have created quantitative graphics - charts and graphs from numbers using Excel n You will also explore bit-mapped graphics in painting n and raster graphics in drawing n you can create a graphic with a digital camera

3. HTML presentation Common Bond n How do the images you work with in Paint, Draw or a digitized image have a common bond? n They are all stored using some format. n format - special pattern n data compression

4. HTML presentation Data Compression n A full-screen 256 color photograph takes about a megabyte of storage, the same as the complete text from a typical paperback book! n massive storage for graphics n slow to transmit over computer networks n data compression allows large files to be temporarily squeezed

5. HTML presentation Data Compression n compressed files must be decompressed to be used n all forms of compression involve removing bits - the trick is to remove bits that can be replaced when the file is restored n different compression techniques work best for different types of data

6. HTML presentation Different forms of Data Compression n lossless compression - allows a file to be compressed and later decompressed without any loss of data n zip/pkzip (DOS/windows), tar (Unix) and GIF for general graphics

7. HTML presentation Different forms of Data Compression n lossy systems can usually achieve a better compression than a lossless one but may lose some information. This is tolerable in many types of sound, graphics, and video files but not for programs and data files n Jpeg is a popular lossy compression system for graphics files n Mpeg is for digital video

8. HTML presentation Web Graphics n The two most important considerations in selecting graphics for the web are n size n format

9. HTML presentation The Size of Graphics Files n important in web pages n users will have to download your pages and view them n a good size for a web graphic is between 10k-30k - about 3% the size of the high color, high resolution graphic

10. HTML presentation Picking your Web Graphics Type n Only 2 file types n GIF (CompuServe Graphics Interchange Format) - very popular among browsers n JPEG - (Joint Photographic Experts Group) - gaining popularity

11. HTML presentation GIF n displays graphics inline ( doesn’t require a special viewer) n lossless image clarity than JPEG n images that have a small color palette (256 or less) often look better n can create transparent graphics n larger than JPEGs

12. HTML presentation GIF n GIF images decompress more quickly and tend to be drawn more quickly than JPEGs of the same file size n drawback - they do include certain copyrighted elements that make it less than an open standard for graphics interchange

13. HTML presentation GIF File Formats n Interlaced n noninterlaced n difference is how the browser displays the graphic as it loads

14. HTML presentation JPEG n gaining popularity on GIF n can have more color than GIF n smaller size can transmit more quickly over the net n decompression takes longer

15. HTML presentation Creating graphics for the Web n For creative people, use programs such as Photoshop or CorelDraw n can use Microsoft Paint, but you must use a program (graphics converter) that converts the Paint format (BMP) into GIF or JPEG) n JASC’s Paint Shop Pro (shareware) n http://www.jasc.com/psp.html http://www.jasc.com/psp.html

16. HTML presentation Creating graphics for the Web n most important thing is file size n 15K-35K n download public-domain graphics n scanned photographs, digital cameras n http://seurat.art.udel.edu/Site/InfoDocs/ GIFToot/GifTips.HTML http://seurat.art.udel.edu/Site/InfoDocs/ GIFToot/GifTips.HTML http://seurat.art.udel.edu/Site/InfoDocs/ GIFToot/GifTips.HTML

17. HTML presentation Good Sites n http://www.webdiner.com/bps/graphics/ graphic.htm http://www.webdiner.com/bps/graphics/ graphic.htm http://www.webdiner.com/bps/graphics/ graphic.htm

18. HTML presentation How to Grab that Graphic? n Called downloading n just point the mouse on the graphic, click the RIGHT mouse button and choose the option “Save Image as … n Now save it to your floppy (zip)… or at home you can save it on your hard drive n WARNING - be respectful of copyrights

19. HTML presentation Embedding Graphics in Web Pages n HTML uses an empty tag called the (image tag) n n n or n n n Note: all web production tools do insert these commands through the product’s GUI interface. But it is good to recognize the set of tags that accomplishes this action

20. HTML presentation Background Graphics n n n tag is inserted after the tag

21. HTML presentation Contrast and Brightness Rules n If you use a light background, choose dark font colors n Light font->dark background n You may need to adjust your font color when choosing a new background

22. HTML presentation Adding a background or graphic to your Homepage n You can use a simple editor and type in the HTML commands from the previous two slides n or n use Composer - (see Composer ppt) n or (substitute your favorite HTML editor) n or use Word - (see Word-Web ppt)

23. HTML presentation Questions