Image sizes and resolutions demystified

Clarifying Imagery

 Images, graphics, photos: can send some people into fits of confusion, whilst others beaver away in blissful ignorance, using the wrong images for the wrong job.

All digital images have two sizes. The actual physical size, and the file size.

All images have two sizes: the file size and the actual physical dimensions.

The file size is that which you can see in Windows Explorer, generally expressed in kilobytes (KB) or megabytes (MB), just like one might see on a Word document or MP3.  File size is simple: the bigger the file, the longer it takes to open and the more processing power is needed.  For the Web, the bigger the file size, the longer it takes to load on a page.

The physical size is where confusion arises.  Images are made up of pixels, or dots.  The quantity of dots per square inch is known as the resolution, and the higher the resolution, the greater the image quality, as more information is being stored for a given area of image. 

However, if you print an image, you can print it any size you like.  Equally, you can resize images in Word documents and on the Web.  The impact of changing the physical dimensions of an image is that the resolution changes, but the file size does not.  This is because the amount of information stored in the image does not change, but simply the area over which it is spread.  This is why, if you scale up an image, it can go grainy and blurry and "pixelated".

So, here are some rules of thumb.

 

  • For the web, file size, not dimensions matter.  Keep your images small in file size so that they download quickly.
  • A computer screen displays images at circa 72 DPI.  There is no point in having an image of greater resolution when it is for on screen viewing.
  • An average computer screen has a size of 1024 x 768 pixels, although screen sizes are growing all the time as more people buy bigger monitors.
  • Printers tend to want images at 300 DPI for crisp, professional printing.
  • Pixels/DPI=physical dimension in inches.  e.g. 1200 pixels / 300 DPI = 4 inches.

But that's not all...

All the above applies to raster, or bitmap images.  These are the usual image suspects, i.e. your JPEGs and GIFs.  The important characteristics of these images is that every pixel in the image has a defined color and position.  Therefore, when you enlarge a bitmap image, the computer has to guess what colour should go in the intervening new space between the original pixels.

However, there is another kind of image, the vector image.  Vector images are created with programs like Inkscape, Illustrator and Corel Draw.  They define shapes, not pixel color.  The upshot is that vector images are infinitely scaleable, so very appropriate for printing.  A common use for vector art would be in logo design, where a logo would need to be used on many surfaces, in many sizes and both digital and printed media.