Jump to navigation

Tutorial – Imagery Optimization

Walt Harris

Imagery Optimization

The following Tutorial will give you a summary of my imagery optimization presentation and a step-by-step guide to optimizing the imagery for your own project.

File Formats

File formats are a standardized means of organizing and storing images. There are two general types, vector and raster. Most of the images we see on the internet are pixel-based raster images. Vector graphics are mathematical, and commonly turned into pixel-based images for display on the web.

Here are some examples of file extensions used in graphics.

  • .clp
  • .dcx
  • .dib
  • .fpx
  • .img
  • .jif
  • .mac
  • .msp
  • .pct
  • .pcx
  • .raw
  • .png
  • .jpg

Vector Images

Vector images are made out of shapes and colors, with vertices, lines, and curves based on mathematical equations. Vector graphics are commonly seen on the internet in Flash animations. Vector images are infinitely scalable, will never pixellate, and will never lose quality. Vector images are not well supported by browsers, so most vector images are converted to raster for web use.

Raster Images

Raster graphics are resolution dependent, and cannot be scaled up without a loss of quality. Some popular raster-based image editors include Photoshop and MS Paint. These programs revolve around editing pixels. Raster images vary greatly in quality. Lower quality images could be 72 pixels per inch, and higher quality photographs taken with a digital camera could be 300 dpi. Different raster formats use different types of compression, but more compression means lower quality and smaller file size.

JPG, GIF, PNG, and BMP are the most popular raster formats on the web today. BMP is obsolete and has been replaced by JPG, but you will still find them on older web pages. GIF has been largely replaced by PNG, but some people still use GIF files as animations.

  • JPG is a format that uses lossy compression. Lossy is a type of compression where information is permanently discarded, resulting in a smaller file size but an irreversible loss of quality. JPG achieves this by making pixels that are adjacent and similar colors the same. The JPG is widely supported, very common on the internet, and supported by almost every digital camera on the market. JPEG supports 8 bits per color, totaling 24 bits. The small loss of quality and file size make the JPG a great format for web use.
  • PNG was designed to replace the GIF and circumvent the copyright on GIF. Version 1 was recommneded by the W3C and released in 1996. PNG is intended for web use and does not support CMYK. It is an excellent choice for images containing text, line art, and images with sharp transitions, like logos. The JPG is still generally a better choice for photos due to it's efficient compression.