2
Sources and Credits for this Material
Used examples from Son of Web Pages That Suck (2002) by Vincent Flanders
Used graphics material from Web Style Guide (2001) by Lynch and Horton (excerpted from http://www.webstyleguide.com)
4
Introduction to Graphics Parameters that influence the
display of Web graphics: Display monitor – 256 colors or more? Bandwidth – dial-up?
5
Color Displays
Displays use red-green-blue (RGB) additive color model.
OS organizes display into a grid of x and y coordinates, or pixels.
6
Pixels and Color Depth
Memory is allocated to each pixel (aggregate is called VRAM)
In the simple extreme, a 1 bit display can only manage two colors, black and white.
7
Pixels and Color Depth (cont’d)
With 8 bits of memory dedicated to each pixel, each pixel can be one of 256 colors (2 to the eighth power).
10
Color Depth and Graphics Files Same terminology and memory schemes
describe color depth in graphics files
12
Graphic File Formats: GIF Graphic Interchange Format (GIF) introduced by
CompuServe in 1980s Adopted by original designers of WWW in 1990s Majority of Web images are GIF and all browsers
that support graphics can display GIF files GIF has an efficient compression scheme GIF is limited to 8-bit (256 or fewer) color
palettes. GIF variants support transparent color and
interlaced formats popularized by Netscape Navigator.
13
GIF File Compression Uses Lempel Zev Welch (LZW) file compression Best compressing images with homogenous color Not so good with many colors and complex textures
15
Interlaced GIF Permits display of low-resolution version of full-sized
GIF picture while file is still downloading.
16
Transparent GIF GIF format allows you to pick (often background) colors to be transparent:
But transparency is not selective, can have unintended results:
17
Animated GIF Can combine multiple GIF images into
a single file to create animation. Has a multiplicative effect on file size Mitigated by streaming delivery to viewer No interface controls – play over and over
again Only meaningful content is to illustrate a
concept or technique where animation is really required.
http://auto.howstuffworks.com/engine-inline.htm
18
GIF Animations Two of Vincent Flanders’ non-rules:
In Web design, when you’re not sure if you should do something, don’t do it because it is probably wrong.
Remove unnecessary design elements.
Too many non-optimized GIFs: http://www.gam-robert.com
19
3-D Logos and Images: Just Say “Whoa”
There’s nothing that says, “I’m an amateur Web designer and I don’t know what I’m doing” like 3-D logos The ‘big boys’ don’t use them, you
shouldn’t either
20
Graphic File Formats: JPEG Unlike GIF, Joint Photographic Experts
Group (JPEG) images are full-color (24 bit, or “true color”)
Favored by photographers JPEG ‘sliding scale’ graphics compression
uses a discrete cosine transformation Can achieve extremely high compression
ratios But it progressively degrades image details.
22
Another JPEG Compression Note the
compression noise and distortion in the bottom dolphin
Is not worth the saved download time
23
Another JPEG Compression Compressed interface graphic (a) in GIF
format (b, no compression artifacts) and JPEG compression (c, with ‘noise’ around text and borders)
24
PNG Image Format Portable Network Graphic (PNG, pronounced
‘ping’) is an image format developed by a consortium of graphic software developers as a GIF alternative. http://www.libpng.org/pub/png/book/chapter01.html
Features designed specifically for web pages: Full range of color depths Supports sophisticated image transparency Better interlacing Automatically corrects display monitor gamma Holds short text description of image content, allowing
Internet searches for images.
25
Advantages of GIF Most widely supported graphics format on
the Web Diagrammatic image GIFs look better than
JPEGs GIFs support transparency and interlacing
26
Advantages of JPEG Huge compression ratios mean
faster downloads Excellent JPEG results for most
photographs and complex images JPEG supports full-color (24-bit, “true
color”) images
27
Screen vs. Printed Color Artwork
Computer screen is lower resolution than printed page.
But differences in quality between conventional four-color printing and computer screen is not that great.
28
Complex Illustrations or Photographs
An anatomical illustration – extra detail and subtle nuances of high-resolution artwork are not entirely lost when graphic is reduced to Web page size.
29
Diagrams for the Computer Screen
Basic diagrams show well if they have horizontal or vertical lines, or diagonal lines at 45-degree angles.
31
Diagrams for the Computer Screen
This diagram compresses well because it is suited to LZW GIF compression.
32
HTML and Graphics:Colored Backgrounds
Web background colors offer a “zero-bandwidth” means to change the look of your pages without adding graphics.
33
HTML and Graphics:Background Texture Patterns
1995 Netscape Navigator gave web page authors ability to use small tiled GIF or JPEG graphic as background pattern.
Background texture graphic should be small GIF or JPEG, no more than 100 x 100 pixels in size.
34
Bad Backgrounds and Color Problems
When improperly used, background images make the text harder to read and increase page load times: http://www.nauticom.net/www/rnassif
/ Some links to using color on the
Web: http://www.colormatters.com
35
One Image Equals One Page
This technique can make the page size quite large, and one-image pages often have no text links: http://www.uiowa.edu/%7Etqstory/
36
HTML and Graphics:Imagemaps Imagemaps offer a way to define multiple
“live” link areas within a graphic.