Book: HTML and CSS Quickstart Guide, Eighth Edition

When using picture files for the web, there are a few options to chose from but it essentially boils down to a few rules that I found in the book HTML and CSS Visual QuickStart Guide, Eighth Edition.

• Most photographs should be in the JPEG format.
• Most images that have few colors (logos and icons) in the PNG format.
• Create alpha transparent images with PNG-8 or PNG-32.
• Keep your image sizes as small as possible to minimize download time.
• Annimated images are in the GIF format.

PSD stands for Photoshop Document

Here is a quote from Wikipedia under their article Image File Formats.

Image file formats are standardized means of organizing and storing digital images. Image files are composed of digital data in one of these formats that can be rasterized for use on a computer display or printer. An image file format may store data in uncompressed, compressed, or vector formats. Once rasterized, an image becomes a grid of pixels, each of which has a number of bits to designate its color equal to the color depth of the device displaying it.
As opposed to the raster image formats above (where the data describes the characteristics of each individual pixel), vector image formats contain a geometric description which can be rendered smoothly at any desired display size.
At some point, all vector graphics must be rasterized in order to be displayed on digital monitors.

Raster Graphics

Here is how Wikipedia describes raster graphics: In computer graphics, a raster graphics image is a dot matrix data structure, representing a generally rectangular grid of pixels, or points of color, visible with a monitor, paper, or other display medium. Raster images are stored in image files with varying formats.

The above picture is from Wikipedia. On that site they describe the diagram with the following text: The smiley face in the top left corner is a raster image. When enlarged, individual pixels appear as squares. Zooming in further, they can be analyzed, with their colors constructed by adding the values for red, green and blue. The discussion below is also from Wikipedia and may be modified slightly in this post, without taking away from the meaning of the text and understanding of the reader.

Most modern computers have bitmapped displays, where each on-screen pixel directly corresponds to a small number of bits in memory. The screen is refreshed simply by scanning through pixels and coloring them according to each set of bits. Most computer images are stored in raster graphics formats or compressed variations, including GIF, JPEG, and PNG, which are popular on the World Wide Web.

Raster graphics are resolution dependent, meaning they cannot scale up to an arbitrary resolution without loss of apparent quality. You can see this apparent loss of quality in the smiley face example above. This property contrasts with the capabilities of vector graphics, which easily scale up to the quality of the device rendering them. Raster graphics deal more practically than vector graphics with photographs and photo-realistic images, while vector graphics often serve better for typesetting or for graphic design.

Modern computer-monitors typically display about 72 to 130 pixels per inch (PPI), and some modern consumer printers can resolve 2400 dots per inch (DPI) or more; determining the most appropriate image resolution for a given printer-resolution can pose difficulties, since printed output may have a greater level of detail than a viewer can discern on a monitor. Typically, a resolution of 150 to 300 PPI works well for 4-color process (CMYK) printing.

Raster-based image editors, such as Painter, Photoshop, Paint.NET, MS Paint, and GIMP, revolve around editing pixels, unlike vector-based image editors, such as Xfig, CorelDRAW, Adobe Illustrator, or Inkscape, which revolve around editing lines and shapes (vectors). When an image is rendered in a raster-based image editor, the image is composed of millions of pixels. At its core, a raster image editor works by manipulating each individual pixel. Most pixel-based image editors work using the RGB color model, but some also allow the use of other color models such as the CMYK color model.

Raster-based image editors, such as Painter, Photoshop, Paint.NET, MS Paint, and GIMP, revolve around editing pixels, unlike vector-based image editors, such as Xfig, CorelDRAW, Adobe Illustrator, or Inkscape, which revolve around editing lines and shapes (vectors).

Vector Graphics

The above discussion from Wikipedia mentioned vector graphics several times in its discussion of raster graphics.

Here is what Wikipedia says about vector graphics: Vector graphics is the use of polygons to represent images in computer graphics. Vector graphics are based on vectors, which lead through locations called control points or nodes. Each of these points has a definite position on the x- and y-axes of the work plane and determines the direction of the path; further, each path may be assigned various attributes, including such values as stroke color, shape, curve, thickness, and fill.

Vector art is ideal for printing since the art is made from a series of mathematical curves, it will print very crisply even when resized. For instance, one can print a vector logo on a small sheet of copy paper, and then enlarge the same vector logo to billboard size and keep the same crisp quality. A low-resolution raster graphic would blur or pixelate excessively if it were enlarged from business card size to billboard size. (The precise resolution of a raster graphic necessary for high-quality results depends on the viewing distance; e.g., a billboard may still appear to be of high quality even at a low resolution if the viewing distance is great enough.)