Images and the Web

web graphics

web graphics: constraints

Due to the constraints imposed by varying degrees of Internet bandwidth, designing images for the WWW is largely a matter of striking an appropriate balance between image quality and file size.

The question that you will inevitably confront when developing web graphics is “How do I maximize image quality while minimizing file size?”

<g id="rotate_1">

<rect style="fill:white; stroke:none; opacity:0;“ x="0" y="0" width="20" height="20"/>

<path style="fill:none;stroke-width:2;" d="M13.7,5c0,4.9-3.9,8.8-8.8,8.8"/>

<path d="M8.5,5.1L13.6,0l5.1,5.1H8.5z"/>

</g>

graphic: typesComputer graphics come in two flavors, raster and vector.

Raster images are described as a collection of small pixels arranged in a grid pattern.

Vector images can be described by mathematical formulas or XML markup and tend to be much smaller in file size.

Currently, vector images are not widely supported by web browsers. We must use raster type images.Raster Image

Vector Image

file size vs. quality

The quality and file size of an image is determined by three characteristics: image resolution, color bit depth, and compression scheme.

file compressionBefore graphics can be transmitted and displayed over the web they must first be compressed.

Compression is the process through which the file sizes of computer graphics are reduced.

GIF and JPEG

GIF (Graphic Interchange Format)

GIF is a lossless compression scheme that can reduce file size by as much as 75%.

GIFs are best used for images that contain large areas of flat color. The maximum number of colors that GIFs can contain is 256 (8 bit).

GIF images also support one level of transparency and can be animated.

JPEG (Joint Photographic Experts Group)

JPEG is a lossy compression scheme that works best for photographs or continuous tone images with subtle gradations.

GIF (5K) JPEG (17K)

GIF (13K) JPEG (3K)

web graphics: color

Unlike mixing inks create colors, computer color is defined by mixing light – red, green, and blue.

Hexadecimal numbers refer to the amount of red, green, and blue light.

#FF FF FF = 255R 255G 255B

#C2 AE 5C = 194R 174G 92B

Color for print - subtractive

Color for computers - additive

web safe colors

There are 216 colors that are shared by both Macs and PCs with low-end 8 bit video cards and monitors.

If you want to be sure that your colors appear the same on both platforms, you should select colors from this common palette.

Dreamweaver, Photoshop, and Fireworks provide web safe pallets.

In HTML colors are defined by hexadecimal (base 16) numbers. ex. #FFFFFF = white.

shades of gray: gamma

Windows and Macintosh computers vary in the degree of contrast between gray values that they display. This contrast is referred to as gamma.

Technically speaking, gamma refers to the relationship between the input and output of a device, expressed as a number, with 1.0 being a perfect linear plot.

Because Macintosh and PC monitors have different default gamma settings, 1.8 and 2.2 respectively, graphics prepared on Macintosh computers will appear slightly darker on PCs.

Macintosh PC

The End

web graphics