Comparison of Web-based Graphics: Formats and Compatibility Issues

1. Comparison of Web-based Graphics: Formats and Compatibility Issues By Bill Rosener Northeastern State University

2. Contents • Graphic formats • Compatibility issues • Royalty-free stock images • Software applications

3. Graphic Formats • Static / Animated / Interactive • Raster (Bitmap) / Vector Images • Lossless / Lossy

4. Graphic Formats • Raster Images • The color value of each pixel is stored • Software applications: MS Paint and Adobe Photoshop • Vector Images • The graphics are stored as objects • Software applications: MS Word, Adobe Illustrator, and Macromedia Flash • Examples of raster and vector images

5. GIF (Graphics Interchange Format) • GIF is a raster image format that is widely used on the World Wide Web. • GIF files are limited to 256 colors. • GIF use of the LZW compression algorithm which was patented in the USA by Unisys. (This patent has since expired in the USA, in 2003.)

6. JPEG: Joint Photographic Experts Group • JPEG is a standardized raster format that works well on natural, real-world scenes like photographs, naturalistic artwork • JPEG is the most commonly used format for storing and displaying photographic images on the Web.

7. GIF versus JPEG • GIF • Stores at most 8 bits/pixel (256 colors) • Works well on line drawings and simple cartoons • JPEG • Stores full color information 24 bits/pixel (16 million colors) • Works well on photographs, naturalistic artwork Examples

8. PNG (Portable Network Graphics) • PNG is standardized raster format created as an alternative to GIF • PNG is supported by all major graphics software and is now very widely used. It has become an open file format standard.

9. TIFF (Tagged Image File Format) • TIFF is a raster file format for digital images. • TIFF is owned by Adobe Systems. • TIFF is supported by most image scanning and editing software. • TIFF is a de-facto standard graphics format for high color depth (32-bit) graphics.

10. Lossless / Lossy • Lossless formats - allow images to be converted back and forth and maintain the same quality. • Examples: GIF, PNG, TIFF, and vector formats • Lossy formats - use a compression algorithm that “drops” some of the data. • Example: JPEG

11. Vector Formats • Software applications: MS Word, Adobe Illustrator, Macromedia Flash • The graphics are stored as objects (e.g., lines, ovals, and rectangles). • SVG (Scalable Vector Graphics) Center: 200, 500 Radius: 100 Fill-color: yellow Line-color: black

12. SVG (Scalable Vector Graphics) • SVG format is meant for vector graphics • SVG uses geometrical primitives such as points, lines, curves, and polygons to represent images in computer graphics

13. Contents • Graphic formats • Compatibility issues • Royalty-free stock images • Software applications

14. Compatibility Issues • Choice #1 - ignore compatibility issues • Acceptable for personal websites or labs • Not acceptable for larger audience • Choice #2 - remove any features that may cause compatibility issues • Remove all VBScript • Remove most JavaScript

15. Compatibility Issues (Cont.) • Choice #3 - create multiple versions • Versions for different browsers • Different screen resolutions • Choice #4 - run all applications from the server (e.g., using PHP or ASP) • Requires programming skills • Necessitates a round trip to the server

16. Compatibility Issues (Cont.) • Choice #5 – use plug-ins • Plug-ins overcome the boundaries of compatibility issues. Every browser will display a document the same way. • PDF (Portable Document Format) is a plug-in used for document sharing • Currently the industry default for displaying vector graphics is Flash.

17. Why Flash? • Because as of year 2000, the Flash Player was distributed with all AOL, Netscape and Internet Explorer browsers. Two years later it shipped with all releases of Windows XP. • Because currently over 97 percent of all people surfing the Internet are configured to view Flash documents. • Because it has a small plug-in size (less than 1MB) • Because it can display both raster and vector graphics NSU example

18. Why Flash? (Cont.) • Because it supports streaming audio and video • Because it includes a scripting language called “ActionScript” which a fully programmable environment. • Because no other widely used options are available • Because it is a proven professional design too coupled with an enterprise-wide application solution.

19. Examples of Flash • http://www.starfall.com/n/puzzle-shapes/baby/load.htm • http://www.starfall.com/n/me/me/load.htm • http://www.airforce.com/ • http://www.coke.com • http://www.isuzu.com • http://www.nike.com • http://www.vidalsassoon.co.uk/ • http://dreamworksrecords.com/ • http://www.vivamusic.com/ • http://www.studiouniversal.it/site • http://www.coca-cola.co.uk/ • http://www.hobartdesign.com/

20. Contents • Graphic formats • Compatibility issues • Royalty-free stock images • Software applications

21. Royalty Free Stock Images • Microsoft Office clipart • Open Clipart (http://www.openclipart.org/)

22. Royalty Free Stock Images (cont.) • iStockPhoto.com

23. Royalty Free Stock Images (cont.) • Shutterstock.com • Download up to 25 images per day (750 per month) for $139. • Licensing • Crestock.com • All images cost $10 dollars.

24. Royalty Free Stock Images (cont.) Photosphere.com

25. Contents • Graphic formats • Compatibility issues • Royalty-free stock images • Software applications