dpi, ppi & screen resolution

Planet Of Tunes TV

Photoshop - ppi/dpi, resolution and dimension
YouTube button

Understanding the relationships between pixel resolution, printed ink resolution and screen resolution are essential concepts for graphic and digital media designers. Even after you have absorbed the theory, it is often necessary to spend some time experimenting with an image and Photoshop's Image size dialogue box before you really get the hang of it.

Photoshop's Image size dialogue box

What is ppi?

"ppi" means pixels per inch. ppi is used to express the resolution of a screen (see below) and measure the density of pixels in an image that is being stored or viewed on a computer. Almost all computer screens/monitors have a physical resolution of 72ppi. Therefore if you are creating an image for the screen it is pointless making its resolution higher than 72ppi, it will just take up more storage space, take longer to transfer and not look any better (in fact it may look worse). For example, all images made for a web site should be at 72ppi.

What is dpi?

"dpi" means dots per inch and is the printing equivalent of "ppi".

An offset litho printed image (basically 99% of printed matter is produced this way), it is formed from a pattern of very small ink droplets or dots. For professional quality, images and text must be printed at 300dpi. This means that images being prepared on a computer for printed matter must be at 300ppi (or 300dpi, the effect is the same).

For example, all images made for a flyer should be at 300dpi (or ppi).

Screen resolution

The term "screen resolution" is commonly used to define 2 attributes of computer screens ...

  1. The number of pixels per square inch ... ppi
  2. The total number of physical pixels a screen has and is expressed as two numbers indicating the number of horizontal and vertical pixels (eg 640 x 480)

Determining the screen resolution of your end-users

It is critically important to determine the screen resolution your end-user will be viewing at to ensure your projects display adequately without being cropped. Click here for advice.

 

PPI & DPI

Almost all computer screens display at 72ppi (Pixels Per Inch) or 72dpi (Dots Per Inch). Dots and Pixels are comparable. Printers talk about dots (full colour CMYK printing involves printing dots of colour), computer artists talk about pixels. Read more here.

However, these seemingly straightforward figures can be confusing when you consider that many screens can be set to "display" at several resolutions.

A 17" screen, for example, will typically have 1024 x 768 physical pixels (at 72ppi). This is known as its native resolution. If you change its "display resolution" to 1152 x 864, a given 72dpi image will look smaller and you will not be able to see all of its pixels without zooming in and enlarging it. Or to put it another way, no matter what resolution you set a monitor to, you cannot change its native or physical resolution, only its display resolution.

The following is a guide to typical screen sizes and resolutions ...

Name Resolution Aspect ratio Description
Classic 512 x 342   Sometimes referred to as the "classic" screen size, use this resolution only if you are developing for extremely antiquated systems. You'll probably be developing in black and white.
VGA 640 x 480 4:3 A few years ago this resolution would have been considered optimal for development. It is suitable for 13" and 14" monitors. If you still want your project to be viewable on the widest range of systems use this resolution.
SVGA 800 x 600 4:3 You can expect almost all computer users to have monitors capable of at least this resolution. At the time of writing (15/7/2005) approx 20% of the worlds computers are not capable of higher resolutions than this.
XGA 1024 x 768 4:3 Suitable only for 17" screens and above. At the time of writing (15/7/2005) approx 80% of the worlds computers are capable of this resolution.
XGA+ 1152 x 864 4:3 Suitable only for 17" screens and above.
SXGA 1280 x 1024 5:4  
WXGA+ 1440 x 900 16:10  
WSXGA 1600 x 1024 26:16  
UXGA 1600 x 1200 4:3  
WUXGA 1920 x 1200 16:10  
QXGA 2048 x 1536 4:3  
WQXGA 2560 x 1600 4:3  

 

Once you have determined your end-user screen resolution, set your multimedia "stage" or window to the same size. Also, develop your project at the screen resolution and zoom it will be viewed at by end-users. You will then be seeing text and images at the same size as your end-user.

Aspect ratios

More on aspect ratios.