Download
comparison of web based graphics formats and compatibility issues n.
Skip this Video
Loading SlideShow in 5 Seconds..
Comparison of Web-based Graphics: Formats and Compatibility Issues PowerPoint Presentation
Download Presentation
Comparison of Web-based Graphics: Formats and Compatibility Issues

Comparison of Web-based Graphics: Formats and Compatibility Issues

386 Vues Download Presentation
Télécharger la présentation

Comparison of Web-based Graphics: Formats and Compatibility Issues

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  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