Your Screen Images

DPI, Dots per inch

Images that will be viewed on a monitor should have a dpi of either 72 or 96. The resolution for an image displayed on a PC monitor is 96 dpi. The resolution for an image displayed on a Mac is 72 dpi.

Regardless of the dpi of an image if you are working in either Illustrator or Photoshop on a PC and you use the SAVE FOR THE WEB (which you should be doing) option, images will automatically be saved with a dpi of 96 dpi. If you use the "Save for the Web" option on a Mac they will automatically be saved at 72 dpi.

Vector

Vector graphics are made of lines and curves defined by mathematical objects. Vectors describe graphics according to their geometric characteristics.

A vector graphic is resolution-independent, that is, it can be scaled to any size and printed on any out-put device at any resolution without losing image quality. Vector graphics are used for drawing and will not work for photographs.

Raster

Raster graphics are images that use a grid or small squares know as pixels to represent graphics. Each pixel has a specific location and color value assigned to it.

Raster images are resolution dependent, that is, they represent a fixed number of pixels. As a result, they can appear jagged and lose detail if they are scaled on-screen or if they are printed at a higher resolution than was originally intended.

Portable Network Graphics

PNG: this format was developed as an alternative to GIF(which has had some patent issues).

PNG preserves all the color information in an image and is a lossless format.

It has alpha transparency but IE 6 and lower does not support transparency.

W3C hopes that PNG will become the image format to be used exc;usively on the web. It has many advantages over GIF and its compression scheme is not patented and thus software developers can implement if for free.

Image Formats

Photographs and other continuous tone
images
png24 and jpg

photograph of porch

Drawings (mainly)
Images where the color changes abruptly
png8 and gif

PNG 8

Raster
extension: png
Limited to 256 colors

Should use when creating images with flat color.These are graphics where the colors
abruptly change from one color to the next. png8 has greater compression and is a smaller file size than a gif. Should not be used for photographs or continuous tone images.

PNG 24

Raster
extension: png
Used for photographs and continuous tone images 24-bit RGB colors Grayscale Alpha-channel with transparency, file size is almost three times larger
The transparency does not work in Internet Explorer 6

GIF

Graphics Interchange Format
Raster
extension:gif
Limited to 256 colors

A gif is used to display indexed- color graphics and images .It’s an 8 -bit format and is capable of reducing a file to the maximum of only 256 colors.
Flat color: colors abruptly change from one color to another.

A lzw-compressed format designed to minimize file size and electronic transfer time.

The GIF format does not support alpha channel, but allows the background color to be removed which gives the appearance of transparency. Visually this will only work correctly if the background color of the project is the same color as the one removed from the gif. If not you will get a jagged edge created by the removed background (see image on the right.

Joint Phographers Expert’s Group

Raster
extension: jpg

A jpeg is used to display photographs and other continuous- tone images.
The jpeg format supports CMYK, RGB, and grayscale color modes.
It does not support alpha channels.
A jpeg retains all color information.
The compressed file size selectively discards data information (a lossy file format). File size is directly proportional to image quality.

Color Reductions - jpegs

Perceptual

Creates : colors for which the human eye has greater sensitivity.

Selective

Creates: these color with the greatest color integrity. This is the default option.

Adaptive

Creates: a sampling of colors from the predominant spectrum in the image.

Restrictive

Web: uses the standard 216‑colors common to both Macs and PCs . Insures that no browser dither is applied when displayed at 8 bit color. Can produce larger files.