Free technical help for digital creators - music, video, art, photography, graphic & web design

Image types by Matt Ottewill

Planet Of Tunes TV

Photoshop - Pixel image types
YouTube button

All images in a computer system fall into one of two categories ...

  1. Images made from pixels (or dots). These image types are called bitmaps
  2. Images made from mathematical descriptions. These image types are called Vectors or Vector images

Pixel (or dot) based images

These are commonly known as ...

• Bitmapped images
• Raster images
• Paint images

For example, scanning a photograph produces a pixel based images in which the size, position and colour of every pixel (or dot) that makes up that photograph is recorded. Pixel based images often have very large file sizes. If you decide to enlarge a scanned image to 10 times its original size, its file size will increase dramatically as extra pixels are added.

Why use pixel based images?

Pixel based images are ideal for “real” photographic looking images. Some effects, such as motion blurring, can only be achieved by manipulating individual pixels.

What software should I use?

Almost the whole world uses Adobe Photoshop but there are alternatives ...

• Painter
• Canvas

How do I create pixel based images?

Pixel based images can originated in several ways ...

• Transferred from a digital camera
• Transferred from a digital camcorder
• Scanned
• Downloaded from the internet
• Copied from an optical disc (CDROM, DVDROM)
• Created from scratch inside the software

What resolution should I use for images that are going to be printed?

View in Landscape mode or Swipe to scroll
Images for print
Print type Recommended artwork resolution Print dpi Recommended bit depth
Standard print resolution 375 dpi 300 dpi 4 chan/CMYK 32-bit
Newspapers 150 dpi 100 dpi 4 chan/CMYK 32-bit
Glossy magazines 375-450 dpi 250-300 dpi 4 chan/CMYK 32-bit
Billboard posters 40 dpi 25 dpi 4 chan/CMYK 32-bit
Hi-quality art books & prints Up to 1500 dpi Up to 1200 dpi 4 chan/CMYK 32-bit

 

What pixel image file formats are there?

Click here to find out about Native & Interchange pixel based images file types

BMP (.bmp)

Bitmap is the most widely used interchange file format for RGB pixel based images on the PC. Bit-depth can be determined for each image.

PICT (.pct)

PICT is a Mac RGB file format for pixel based images. Bit-depth can be determined for each image and alpha channels are supported.

TIFF (.tif)

The tagged Image File Format is a CMYK based format. They are 16-bit CMYK and only suitable for repro. QuarkXpress likes these.

Photoshop (.psd)

Photoshop is so successful that many other applications can open its native file format (although they won't offer the editing tools). Such applications include ... Director, Final Cut Pro, DVD authoring studio, QuarkXpress, Illustrator.

Images for web sites

If you are developing a conventional html web site use the following image formats ...

JPEG (.jpg) The Joint Photographic Experts Group format is the most widely used interchange file format for pixel based images to be used in web sites.

JPEGs work by applying a compression algorithm to the image. The more you compress the smaller the file size but the poorer the quality. JPEGs must be decompressed to be viewed. This makes them an unsuitable format for animation. De-compression occurs automatically in all web browsers.

GIF89a (.gif) The Graphics Interchange Format is the most widely used interchange file format for flat colour graphical images to be used in web sites. The GIF89a format has superceded the original GIF format. GIFs work by reducing the number of colours in the image to 256 or less.

There are a number of ways this is acheived but all involve shifting some of the colours in the image to a smaller palette and/or creating a palette that contains only the colours that are in the image. Here are the main features ...

  • GIFs do not require decompressing to display (thus no codec is required).
  • GIFs have a maximum of 256 colours.
  • GIFs support interlacing which means the image will display in progressively more detail as it downloads into a browser window.
  • GIFs use an adaptive custom palette derived from the image itself and containing only the colours in the image.
  • You may also specify a transparent background for the image.
  • Finally GIF89a's support multi-image animation, so called "GIF animations".

 

PNG (.png) Portable Network Graphics file format is a version 4 browser compatible image file format (which supports alpha layers and palettes) that works well with both photographic and flat colour based images. PNG came into being in 1995 when the inventors of the GIF format (Unisys) decided to enforce their patent and collect royalties. PNG's can achieve superior quality to JPEGs or GIFs for comparable file sizes. Colours are not limited to 256 but .png is a single image format and thus does not support animation. Alas, PNG support is incomplete in many browsers, including IE, and thus using the PNG format is not recommended. Unisys's GIF patent expires soon, which may kill off PNG. Click here to view a page which tests the png file format.

View in Landscape mode or Swipe to scroll
Web image format comparisons
JPEG GIF GIF89a PNG
Good for Photos Graphics Graphics Photos & graphics
De-coding required to view (codec)? Yes No No Yes
Colours Millions 256 256 Millions
CMYK support? (in addition to RGB) Yes No No No
Supports animation? No No Yes No
Supports (alpha) transparency? No No Yes Yes
Browser support Good Good Good Patchy
Supports progressive download (interlacing)? Yes Yes Yes Yes

Vector based images

These are commonly known as ...

• Vector graphics
• Object-oriented graphics

Vector based images are made up from descriptions, like co-ordinates, and therefore usually have very small file sizes. If you draw a circle and then later decide to enlarge it to 10 times its size, its file size will not change.

Why use vector images?

Vector based images are ideal for logos, maps and other flat colour graphical images and have the following advantages over pixel images ...

  • They can be enlarged without using quality
  • They have much smaller file sizes than pixel based images
  • They are easier to edit
  • They compress to much smaller file sizes when being converted to GIFs

How do I create vector based images?

You use a vector drawing program to create vector based images such as ...

  • Adobe Illustrator
  • Freehand

... or the simpler tools available inside authoring applications such as ...

  • Fireworx
  • Flash

What vector image file formats are there?

Click here to find out about Native & Interchange vector based images file types.

Illustrator has its own native file format.

Freehand has its own native file format.

EPS (Encapsulated PostScript)

This is the most widely used interchange file format for vector based images to be used in DTP applications. Use EPS files in the following situations ...

  • A complete Quark XPress page layout containing TIFFs, EPS's, line art and text can be saved as an EPS file. Photoshop can rasterize an EPS file which may then be exported as a PICT or TIFF.
  • If you are authoring using Macromedia’s Flash, you can import EPS vector image files created in other applications.

Rasterizing

Rasterizing is the process of converting a vector based image, or font, into a pixel based one. If you open an image created with Adobe Illustrator into Adobe Photoshop it will first have to rasterize it before you can continue to work on it. Unsurprisingly, pixel based images cannot easily be converted into vector based images.

Director cannot directly import vector images, therefore they must be rasterised in Photoshop first.

RIP

In professional CMYK print production, the process of converting a CMYK QuarkXpress or InDesign PostScript artwork file (containing fonts, text, boxes, rules etc) into the dots required to make printing plates, is known as Raster Image Processing or a RIP.