Resolution, physical size, file size and file type - Images for the web - Web Team - University of Canterbury - New Zealand

Resolution and size

Resolution explained

  • Resolution is a measure of how many dots of information occur in a square inch (dpi)
  • Print resolution is greater than computer screen resolution
  • Print can be displayed at 300 - 1000dpi
  • Typical computer monitors display at 72dpi
  • Higher resolution images have slower download times without visual improvement
  • All images displayed on the web must be at 72dpi

Physical size of an image

  • Image physical size: how wide and high an image is - this is measured in pixels (px)
  • Eg 4.0 mega-pixel digital camera image - 2272 px wide and 1704 px high
  • Generally make images smaller but not bigger
  • The bigger the physical size, the larger the file size will be and the longer it will take to download on a web page

Find the physical size of an image

  • File size refers to how big the file is measured in kilobytes (KB) or mega bytes (MB)
  • Eg 4.0 mega-pixel digital camera image - approx 1 Mb (1000 KB)
  • The bigger the file size the longer it will take to download on a web page

File types and why they are important

  • Wrong file type affects image quality and file size
  • Photos should be JPEG (.jpg) file type, and simple line art with few colours should be GIF (.gif) file type

What does all this mean?

  • Images added to web pages must be optimised
  • Resolution must be reduced to 72dpi
  • Physical size must be appropriate for the page
  • File size should be compressed (faster to download) but still retain image quality

Why you need to optimise

But I see websites quickly

  • University users have high speed internet connections
  • Some off campus users access the internet via a dial up connection which is much slower
  • Each image added makes the download time for your web page longer
  • Consider mobile phone access to the website.
  • Your department pays for all web traffic to your site. These costs are increased if unnecessarily large images are used

What you will need to do when adding images

  • Ask yourself if your picture will add value to your page
  • Decide on a suitable size from examples of physical size (w x h) relevant to your page
  • Resize your image - make the resolution of your image 72dpi
  • Compress (photo) or reduce the number of colours in the image (simple line drawing with few colours)
  • Decide which file type is best suited to the image

Keep an original of your images until you are sure you have the correct size. Store originals either on:

  • your P: drive or department/unit K: drive
  • computer hard drive, or
  • burn to CD

Don't store originals in your website files (there isn't enough room on the server for archiving).