comparison of web based graphics formats and compatibility issues l.
Download
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

Loading in 2 Seconds...

play fullscreen
1 / 25

Comparison of Web-based Graphics: Formats and Compatibility Issues - PowerPoint PPT Presentation


  • 341 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Comparison of Web-based Graphics: Formats and Compatibility Issues' - Ava


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
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
Contents
  • Graphic formats
  • Compatibility issues
  • Royalty-free stock images
  • Software applications
graphic formats
Graphic Formats
  • Static / Animated / Interactive
  • Raster (Bitmap) / Vector Images
  • Lossless / Lossy
graphic formats4
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
gif graphics interchange format
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.)
jpeg joint photographic experts group
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.
gif versus jpeg
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

png portable network graphics
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.
tiff tagged image file format
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.
lossless lossy
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
vector formats
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

svg scalable vector graphics
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
contents13
Contents
  • Graphic formats
  • Compatibility issues
  • Royalty-free stock images
  • Software applications
compatibility issues
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
compatibility issues cont
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
compatibility issues cont16
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.
why flash
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

why flash cont
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.
examples of flash
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/
contents20
Contents
  • Graphic formats
  • Compatibility issues
  • Royalty-free stock images
  • Software applications
royalty free stock images
Royalty Free Stock Images
  • Microsoft Office clipart
  • Open Clipart (http://www.openclipart.org/)
royalty free stock images cont23
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.
contents25
Contents
  • Graphic formats
  • Compatibility issues
  • Royalty-free stock images
  • Software applications