# Basic digital image concepts

## Raster images

• also known as "pixel map" images or "bitmap" images
• raster images are images made up of a series of dots
• images on a computer display or on a printed page are aggregates of these individual dots
• each dot has a single solid color
• how many of these dots there are per inch is called resolution
• how many possible colors there are for any given dot depends on how many bits or bytes are used to represent that dot in the computer’s memory
• these dots are called “pixels” when they are displayed on your computer display
• these dots are called “dots” when they are printed by a printer

## Vector images

• vector images use mathematical formulae to represent an image, rather than keeping record of the color of each dot in the image as raster images do
• vector images can be recreated at any zoom level without loss of quality
• vector images are more common for images that will be displayed in physical space rather than computer screens
• a popular application for creating vector images is Adobe Illustrator
• a popular format for vector images on the web today is the SVG format
• on computer displays, vector images are ultimately converted into raster images in order to be displayed on the display's pixel grid

## Resolution

• the more pixels per inch there are in a raster image, the more smooth and realistic your image looks.
• the number of pixels per inch in an image is called the “resolution” (also known as pixel density)
• note that many marketers use the term 'resolution' incorrectly to mean the dimensions (i.e. width and height) of a given computer display
• most images on the web have 72 pixels per inch
• most printed images have at least 300 dots per inch (dpi is the same idea as ppi, just applied to printers)
• so images printed off of web sites never look good because their resolution (72 ppi) is too low for the printer (300+ dpi)
• they print out looking jagged and blurry, not sharp and crisp

## Dimensions

• the width and height of an image
• measured in either pixels or some physical unit of measurement, like inches

## Bit depth

• the number of bits used to represent each pixel's color determines the color depth of the image
• 1-bit images have only two colors
• this is because there are only 2 possible values in a single bit: 0 or 1
• (0=black, 1=white)
• these are sometimes called bitmap images for this reason
• 2-bit images have 4 colors
• this is because there are only 4 possible values in two bits: 00, 01, 10, 11
• 8-bit images have 256 possible colors:
• the general rule is 2x… so for 8 bits, 28 = 256 possible colors
• 16-bit images have 216 = 65,553 possible colors… and so on
• the more bits, the more possible colors
• etc.

## File size

• increasing bit depth increases file size
• increasing resolution increases file size
• increasing image dimensions (width and height) increases file size
• larger files require more hard-disk space to store and edit
• often it is desirable to have smaller file sizes for this reason

## Compression formats

• So there are all kinds of techniques to keep high bit-levels while keeping file sizes small
• compression formats are algorithms to reduce file size while maintaining high bit-rate quality
• some popular compression formats used on the web for raster images:
• GIF
• GIF is generally good for cartoon-like images that have a lot of solid colors
• it is a proprietary format whose intellectual property is owned by Compuserve and Unisys - early internet companies
• JPEG
• JPEG is generally good for photorealistic images that have large color differences from pixel-to-pixel
• PNG
• an acronym that stands for "PNG's Not GIF".
• PNG is designed to be a free (as in "freedom") replacement for GIF, since GIF depends upon patented technology that could involve a license fee
• it is a good general-purpose compression format for both cartoonish and photorealistic images

## Getting started using Photoshop

The following outlines how some of these concepts apply specifically to creating images in Photoshop

### Creating new files

• Photoshop offers common preset settings or custom settings
• choose units that match the units used by the destination device
• pixels if the image is being made to show on computer displays
• inches if the image is being made to print on paper
• customize the width and height to suit your end-goal
• US Letter paper for printing is 8.5″ x 11″
• a common computer monitor size in the US is 1024 x 768 pixels

### Resolution

• choose a resolution that gives you the quality you want at a reasonable file size
• web images on a monitor will be okay with 72 ppi
• good quality printing requires 300 dpi or more

### Color mode and bit depth

• Choose a color mode that matches your target output
• choose RGB if creating an image to be shown on computer displays
• choose CMYK if creating an image to be printed
• a good general-purpose Color Mode setting is RGB Color at 16 bits per channel.

### Units & Rulers

• show rulers by selecting View -> Rulers
• change ruler units at Edit/Photoshop -> Preferences -> Units & Rulers…

### Resizing images

• go to Image -> Image Size…
• unchecking “Constrain proportions” allows you to change width and height independently of each other