1 / 25

Comparison of Web-based Graphics: Formats and Compatibility Issues

Comparison of Web-based Graphics: Formats and Compatibility Issues By Bill Rosener Northeastern State University Contents Graphic formats Compatibility issues Royalty-free stock images Software applications Graphic Formats Static / Animated / Interactive

Ava
Télécharger la présentation

Comparison of Web-based Graphics: Formats and Compatibility Issues

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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

More Related