Transcript Understanding Graphic File Formats ...as

Graphic File Formats
© 2000 – All Rights Reserved – Page 1
Common Formats
•
•
•
•
Graphics Interchange Format (GIF)
Joint Photographic Experts Group (JPEG)
Portable Network Graphics (PNG)
Scalable Vector Graphics (SVG)
• Print Formats
– EPS
Encapsulated PostScript (for vector images)
– TIFF
Tagged Interface File Format (for raster images)
© 2000 – All Rights Reserved – Page 2
de facto Standards
• GIF
• JPEG
• Plug-In dependent
graphic effects
– interactive games
– real-time audio
broadcasts
– movies
– only useful when user is
willing to download the
plug-in
© 2000 – All Rights Reserved – Page 3
GIF - Graphics Interchange Format
• Invented for use on CompuServe
• Designed for low-bandwidth users
• Uses Lempel-Ziv Welch (LZW) compression
– a “lossless” data format
– decompressed graphic looks like original
• Color limitations
– Web is standardized on 216 specific colors
– Use Photoshop's Indexed Color Mode to convert an
existing graphic to GIF’s 256 colors
– Use Photoshop's Web Palette to create new GIFs
© 2000 – All Rights Reserved – Page 4
Dithering
• Use if your graphic contains
subtle shading or a wide
variety of color variations
• Useful for simulating a
wider range of hues than
GIF’s 256 colors
• Blends transitions
• Lessens or eliminates
banding
© 2000 – All Rights Reserved – Page 5
Interlacing
• Non-interlaced graphics
– load top-to-bottom
– “peek-a-boo” graphics
– use for graphics under 10K in
size
• Interlaced GIFs are
– saved line-by-line in several
passes
– graphics are “unveiled” in like
manner
– user can recognize graphic earlier
– use for graphics over 10K in size
© 2000 – All Rights Reserved – Page 6
Transparency
• Making a color translucent or transparent so
that an underlying graphic is visible
• All web graphics are rectilinear in shape
• Photoshop graphic backgrounds are white,
background colored, or transparent
• Use
File>Export>GIF89a Export
• Or
Check preserve transparency in
Optimize Window
• Anti-aliasing & Halos
© 2000 – All Rights Reserved – Page 7
GIF Animation
• Photoshop alone is
not capable
• ImageReady from
Adobe
• GIF Movie Gear (PC)
• GifBuilder (MAC)
© 2000 – All Rights Reserved – Page 8
JPEG
- Joint Photographic Experts Group
• Good for continuous-tone
images (photos)
• Compression
– saves a complete black &
white version
– saves most of its color
information
– a “lossy” format
– a fuzzy or noisy patchwork
of pixels
• Breaks the image into
zones of similar color
• GIF is better for line art
or large blocks of color
© 2000 – All Rights Reserved – Page 9
New Players
• PNG – Portable Network Graphics
–
–
–
–
A “lossless” format like GIF
Claims to compress better than GIF
Supports 24-bit color
Supports variable transparency
• SVG – Scalable Vector Graphics
– Compact and scalable vector format
– New standard from W3C
– Supported in Adobe Illustrator 9.0
© 2000 – All Rights Reserved – Page 10
Carl’s Rules of Web File Names
• Always, always protect the “canon”
– banner01.psd
• Use all lowercase letters
• Use mnemonic names
• Use the old DOS rules
– 12345678.123
– banner01.gif
• Use no spaces…use underscores instead
– my_dog.jpg
© 2000 – All Rights Reserved – Page 11
Graphic File Formats
© 2000 – All Rights Reserved – Page 12