Your Screen Images

more related media: page as flash | video

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 and you use the SAVE FOR THE WEB (depending upon the version you are using it could have WEB DEVICES) option, images will automatically be saved with the correct dpi.


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 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

photograph of porch

Photographs and other continuous tone
png24 and jpg

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


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

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


Graphics Interchange Format
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

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


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


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


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


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.


Creates and shows a series of lower
grade images until the image is completely downloaded.

ICC Color Profiles

Shows colors as they intend to be shown
This assumes that the user has a calibrated and profiled monitor
Most browsers cannot read this profile.

share / bookmark

Send the link for this page to yourself







info arch

the net





be inspired

my notes