Web Graphics
Image Preparation
Colors
Typefaces
Image Preparation
Why are visuals/graphics important?
- they are often the first thing a viewer sees upon entering a site
- can adhere to an identity or brand
- help establish the “look and feel”
Resolution (dots or pixels per inch)
- Screen/web resolution - 72 dpi
- Print resolution - 300 dpi recommended
Compression
Web-based image file formats have to implement impressive compression schemes in order to transform large image files to small file sizes. With compression comes loss of quality.
Two preferred graphic formats for the web:
GIF and JPEG - raster graphics (vs. vector) where the computer stores a series of values, each pixel represents a different value and takes a set amount of memory
GIF (Graphic Interchange Format)
- 8 bit (256 colors or less)
- compress large areas of flat color more efficiently
- best use: non-continuous tone images such as icons, logos, or text buttons
Adaptive palette - used to convert the images to 256 colors or less based on existing colors within the image
JPEG (Joint Photographic Expert Group)
- millions of colors
- compresses the picture by intelligently removing information to reduce file size and simplify the image (term: lossy)
- you can control and choose the amount of information that you will lose in compression (trade off between picture quality and file size)
- best use: continuous tone images such as photographs
PNG (Portable Network Graphic)
- lossless compression
- decompresses when viewed
- format only partially supported (not supported by older browsers) - not widely used for this reason
Artifacts
image imperfections caused by compression
Download size
1 kilobyte = 1,000 bytes = approx. 1 second download for 56K modem
Color
Color Relationships
- colors have a lot in common with words, both are used to communicate
- consider pre-existing schemes, such as current promotional materials, an identity, or those found in nature
- primary, secondary, complementary, analogous, monochromatic schemes of the color wheel
- palette - warm or cool, recommend palette of 3-5
- contrast - readability, separation in value between colors (foreground vs. background)
RGB - projected light colors are Red, Green, and Blue through a screen monitor vs. CMYK (cyan, magenta, yellow, and black) of a printer
Browser-safe colors
- palette of 216 colors that are common colors to all web browsers (universally)
- based on a mathematical system of RGB values of 0, 51, 102, 153, 204, and 255
- colors outside this range will be dithered
Philosophy of Blue
It's interesting that blue was chosen as the default link color for sites in general - blue is slightly harder to read because the human eye has fewer receptors for blue wavelengths.
Advantage - users have grown accustomed to blue being the default link color
Typefaces
Serif - has a stroke or slab attached to the beginning or end of the main stroke of each letter
San-serif - no stroke or slab attached
Things to keep in mind:
- Some newer fonts, such as Verdana, have been designed to be sympathetic with the natural pixel grid of the internet. Not just their letter shapes, but their body heights and letter spacing have been optimized for screen legibility
- Italic fonts are best avoided - at odds with the constraints of a square pixel grid, and will render poorly in small sizes