Working with Images

Resolution, File Formats and Compression

Some Definitions

Pixels = image elements. The individual dots that are used to display an image on a computer monitor. The higher the resolution, the more pixels.
Resolution = The number of pixels or dots in an image. The more pixels within the image, the higher the quality of the image.
Dpi = dots per inch A unit that is used to measure the resolution of a printer. Dpi is sometimes used to describe the input resolution of a scanner, but "ppi" is the more accurate term.

Scanning an image

If you scan an image twice at the same dimensions e.g. 28 x 18cm, but one at 72dpi and the other at 200dpi and then print both images, the 200dpi image would have much sharper detail than the 72dpi image.

72dpi is suitable for images, which will stay on screen e.g. web pages & CD-Roms 200dpi is suitable for printing quality images.

A 72 dpi image will have 5184 pixels in every square inch as 72 x 72 = 5184. A 200dpi image will have 40 000 pixels in every square inch as 200 x 200 = 40 000.

You constantly need to compromise between image quality and the size of the file in terms of the speed of your computer and file storage.
E.g. if you have a 20 megabyte image and only 10 megabytes left on your zip disk what will you do???

If an image is scanned at 72dpi and then the resolution is increased in Photoshop to 200dpi for printing you will end up with a fuzzy jagged image. Because Photoshop guesses what the new pixels should look like and this results in poor image quality.

Summary

High-resolution images will:

• Have a large file size
• Be high in quality
• Take longer to work with
• Suitable for printing

• Have a small file size
• Be poor in quality
• Be fast to work with
• Suitable for screen

File Size

File size is measured in bytes, kilobytes, megabytes, or gigabytes.
8 bits = 1 byte
1024 bytes = 1 kilobyte
1024 kilobytes = 1 megabyte
1024 megabytes = 1 gigabyte

File Formats

PSD - (Photoshop Document) The only file format which supports multi-layered images. PSD's are large files.
JPEG - (Joint Photographic Experts Group) A compression method in photoshop that shrinks a files storage size, but which can also cause image degradation as a result of data loss.
GIF - A file format used for graphics as opposed to photographic images, Gifs have a maximum of 256 colours where Jpegs can have 16 million colours.
TIFF - (Tagged Image File Format) A common format that is used for saving a bitmapped image, such as a scan. A TIFF image can be colour separated and can contain colour management profiles. Used for magazine, high quality images and can be compressed without image degradation, unlike a JPEG image.
BMP - Large file, standard windows format, not compressed

Types of Graphics

Vector Graphics (lines / circles). - Used in Illustrator, Corel Draw, AutoCAD, Flash
Bitmap Graphics (pixels) - Used in Paint programs, Photoshop

File Formats for the Web

You only need to know 2 image file formats for the web, JPEG and GIF.

• JPEG = for photographs (16 million colours)
• GIF = for limited colour graphics e.g. logos (up to 256 colours)

It is very important that your images are small in file size. Web images should always be 72dpi and preferably under 30 kilobytes. The bigger the file size, the longer the web page takes to load, and the sooner you will lose your audience!!

The monitor only has a resolution of 72dpi so it is a waste of time to use images that are of a greater resolution.

ImageReady

Photoshop 5 and onwards has a very good compression program called ImageReady which can be used to compress your images.
You can set the level of image quality and the number of colours (in a gif image). It also tells you how long the image will take to load depending on the speed of your modem.