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 - measured in pixels (px)
- Eg the banner image at the top of the University of Canterbury websites - 768 px wide and 120 px high
- 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 explained
- File size refers to how big the file is measured in kilobytes (KB) or mega bytes (MB)
- Eg the banner image at the top of the University of Canterbury websites - approx 20 KB
- 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 but still retain image quality
- Smaller file sizes are faster to download and appear to the user quickly
- It is a balancing act - physical size small enough to view without slowing download time and image size compressed but still retaining image quality
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
- 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
- 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).