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 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
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
Drawings (mainly)
Images where the color changes abruptly
png8 and gif
PNG 8
Rasterextension: 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.
Progressive
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