1. Graphics on the Web CS575 Spring 2006 Dr.Abbot Student: Andre Liv

5. Graphics Electronic images/pictures made up of thousands of tiny colored dots called "pixels."

6. Color "depth" Pixels 1 bit – Black & white (0 or 255) 8 bit – Color or Gray Scale 24 bits – RGB (8 bits/color) Most browsers displays 256 colors

7. Web formats JPEG GIF PNG SVG WebCGM And more (tiff, bmp, ppm ….)

8. Which format? Quality Size Type of graphics

9. Examples

11. JPEG Joint Photographic Experts Group – 16,777,215 colors – photographic images – Transparency none – Lossy / lossless compression – 1990, Eric Hamilton – ISO/CCITT

12. Compression method DCT for “lossy’’ compression Predictive for “lossless’’ compression

13. DCT Encoder

14. DCT Decoder

15. Predictive method

17. GIF Graphics Interchange Format – Bob Berry and team at Compuserve – 1987, updated in 1989 – images with fewer, flatter colors (256 colors) – Transparency (one color may optionally be 100% transparent) – Interlaced GIF – Lossless compression (LZW)

18. GIF Spec

19. Continued..

20. PNG Same as GIF but Alpha channel Gamma correction 2 dimensional Interlacing capabilities Compress better than GIF Use Huffman coding Supported by new Web Browsers only

21. SVG Scalable Vector Graphics vector-based graphics for the Web applications in XML text-based graphics language high-quality graphics on the Web (animation)

22. Advantages of SVG SVG files can be read and modified by a large range of tools (e.g. notepad) SVG files are smaller and more compressible than JPEG and GIF images SVG images are scalable SVG images can be printed with high quality at any resolution SVG images are zoomable. Any part of the image can be zoomed without degradation Text in SVG is selectable and searchable (excellent for making maps) SVG works with Java technology SVG is an open standard SVG files are pure XML

23. SVG file

24. Simple Animated SVG <rect fill="#AFBCC7" stroke="#646464" stroke-width="5px" x="100px" y="100px" width="100px" height="100px"> <animateTransform attributeType="XML" attributeName="transform" type="rotate" from="0,150,150" to="360,150,150" begin="0s" dur="5s" repeatCount="indefinite"/>

25. http://people.w3.org/maxf/ChessGML/immortal.svg http://www.leweyg.com/anied/basics.svg http://www.leweyg.com/anied/fight.svg http://www.carto.net/papers/svg/samples/

26. GIF 89a Same features as GIF 87a Support multiple images

27. WEB 3D?