 |
Intro to the Web: Monday, Jan 19
HTML: Color and Images
Sections 5.1 - 5.3 in HTML The Definitive Guide
Chapters 2-3 in Creating Killer Web Sites
Vocabulary:
- Raster images : fixed dimensions : screen image on your monitor
- Vector images : tiny pixels (dots) in a grid (x by y by z)
- z = pixel depth: number of possible colors (color depth)
- Resolution : how much information a display device can handle
- B/W, 256 (greys, colors), thousands, millions
- VRAM: Video RAM determines the Resolution capability of your monitor.
- how much the moniter can " remember " at a time
- trade space for depth: more space (work area) fewer colors)
- eg. " My moniter only shows thousands of colors at 1024 X 768 "
How it works
- Vector images = mathematical description of an image
- Computers decipher this description, display image
- Vector images are independent of resolution: can be " scaled "
- Vector images = line art, Raster images = screen art (not independent)
- Rasterized: turned into pixels. limited blow up, turns into blocks
- Vector images: more you show, more detail you see (Freehand, print quality layout)
HTML Colors
- 24-bit RGB palette
- 8-bits per primary color (red, green, blue) [00..FF] (8+8+8 = 24)
- Using hexadecimal [0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F]
- 100% red = #FF0000
- 100% green = #00FF00
- note: This is called "Lime".
- 100% blue = #0000FF
- Color Blending: interlace or cross-hatch colors for variety
HTML Colors
- You Can Use Color Literals in Tags
- Black, Silver, Gray, White, Maroon, Red, Purple, Fuchsia, Green, Lime, Olive, Yellow, Navy, Blue, Teal, Aqua.
- Appendix E gives a list of over two hundred additional color names that Netscape supports.
- Warning: Browsers often have a limited number of colors they can display.
Attributes Affecting Colors
- <BODY attributes
- BGCOLOR = #RGB <!--Background Color-->
LI> TEXT = #RGB <!--Text Color-->
- LINK = #RGB <!--Unvisitied Link Color-->
- VLINK= #RGB <!--Visited Link Color-->
- ALINK= #RGB <!--Clicked Link Color-->
- BACKGROUND = URL <!--Backgrd Image-->
- Tiled background. Risk of losing contrast.
- Slowed Display.
Attributes Affecting Colors
- <FONT attributes
- COLOR = #RGB <!--New Font Color--> >
- Example <FONT SIZE=+2 COLOR=#FFFF00>
Images: Vocabulary
- Anti-Aliasing: no jaggy edges (good for circles curves)
- Background Correction: getting rid of a " halo ", making edges clear
Inline Images: Basics
- Text Flows Around Images.
- Use much more bandwidth than plain text.
- GIF, JPEG, (and soon PNG) are widely supported by browsers.
Comparative Bandwidth
- Speed of connectivity varies dramatically:
- ATM - 155 Mb/s
- 100BaseT - 100 Mb/s
- T3 - 45 Mb/s
- 10BaseT - 10 Mb/s
- T1 - 1.5 Mb/s
- ISDN 64 or 128 kb/s
- Modem (x2) 56 kb/s
- Modem 33.6 kb/s
- Mb = 2^20 bits (about 1 million)
- kb = 2^10 bits (1024)
Time to download 100 kB image
- 155 Mb/s ATM: 0.005 sec
- 45 Mb/s T3: 0.02 sec
- 1.5 Mb/s T1: 0.5 sec
- 128 kb/s ISDN: 6 sec
- 28.8 kb/s modem: 28 sec
- 14.4 kb/s modem: 55 sec
GIF
- Graphics Interchange Format (.gif)
- Developed by CompuServe (patented too!)
- Uses 8-bit per pixel color from 256 color palettte.
- Dithering possible for simulating extra colors.
- LZW (Lempel-Ziv-Welch) lossless : deompressed image and original look the same.
- 89a builds on 87a.
- good for high-contrast / line graphics and type
GIF 89a
- Supports:
- 4 pass interlacing (row-by-row display).
- One transparent (usually the background) color.
- Animations (sequence of images displayed over time).
JPEG / JFIF
- Joint Photographic Experts Group (.jpg/.jpeg)
- Uses 24-bit per pixel color. 16.7M colors.
- Lossy compression based on observation:
- People are sensitive to changes in brightness.
- People are not sensitive to subtle changes in color.
- New progressive version/format available.
- Variable compression.
- Good for photographs, rendered images, (shading)
Which Scheme is Better?
- GIF
- Text
- Sharp edges
- Large filled regions of solid colors
- Few colors in total
- A transparent background is required
PNG
- Portable Network Graphics
- Patented GIF format results in new format:
- Uses 8-bit per pixel color from 256 color palette.
- Uses up to 48-bit per pixel color, 16-bit per pixel grayscale.
- Uses up to 8-bit per pixel partial transparency (called alpha-blending).
- Two dimensional interlacing (progressive display 8x faster than GIF)
- Unpatented lossless compression, 10-30% better than GIF.
- has an Alpha Channel
- transparency
- masking
- added image information or metadata (replaces <ALT> attribute)
- limited support (boo hoo)
Flash Pix
- Live Picture brainchild
- bi-directional interlacing on JPEGs and PNGs
- pyramid of image data
- each level is a resolution
- high at bottom , low at top
- people can click in to higher resolutions
- not supported by current browsers.
|
