Basic digital image concepts

From Knowledge Kitchen
Jump to navigation Jump to search

Digital images are made from binary data

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


  • 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


  • 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 take longer to download on the web
  • 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
    • Easy to start with a preset and then customize it
  • 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


  • choose a resolution that gives you the quality you want at a reasonable file size
  • think about your end goal in making this image:
    • 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…

File extensions

Resizing images

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

What links here