Image Resolution - Lakelands Computing

Title
Go to content
Image Resolution
Image resolution is how much detail is portrayed in an image - it usually refers to the number of pixels in an image and is often described in PPI, pixels per inch, how many pixels are displayed per inch of an image. For those of you doing computer science this links directly in to colour depth.

Higher resolutions mean that there more pixels per inch (PPI). This gives the computer more pixel information , creating a high-quality, crisp image, but more pixels obviously means larger file sizes.

Images with lower resolutions have fewer pixels. This means that their file size is smaller, but it also means that there is less pixel information and as a result a low res image can pixelate when it is zoomed in on, or stretched . Pixelate and pixelation are the proper term for the blurriness that happens when you zoom in or a picture.
Look at the two turtle pictures.

The second one has been deliberately zoomed in to start to pixelate it, if you get close enough you can start to  see the different blocks of pixels being different colours - look at the water around the turtles back

Use the zoom tool to get in closer.
When it comes to working with graphics you want to have different versions of the same graphic. These diffferent versions will be customised based on where they are going to be used, and what the requirements of that use are. There are two basic "standards" for PPI:

  • For print use 300ppi at the physical image size you want to print at (eg 10cm by 8cm) - this will give you a nice sharp image on the page

  • For web use 72ppi or 96 ppi at the dimension you want to display at (eg 300 pixels by 400 pixels). This will create small files sizes that are more suitable for the web (this is what the text books say)

Note - having smaller file sizes for your images on the web is sensible, but using 72 or 96 dpi  is actually completely out of date, monitors display at higher pixel density that 72 and have done so since mid 1980's, and websites typically ignore the images ppi anyway. The dpi may come into play on the screen in programs like Word which try and look like a printed document. You will get marks for talking about 72dpi on your projects though which is why I have included it.

A better approach for web images is to focus on the image's compression quality, and overall dimensions so that you end up with an image that looks good, but at the smallest possible file size.

  • Unless it needs to be big (eg for a background) keep your images below 1,000 pixels wide.
  • Set your images around 60-70% compression  they will have a lower file size, but will still look sharp on the web.
  • If your image files are several MB's, they are too big. There really isn’t any reason why most images can’t be under 200KB.

All Text copyright Lakelands Academy & Mr T Purslow 2020.
All images copyright free / creative commons unless otherwise stated.
You are welcome to use under a Creative Commons Attribution-nonCommercial-ShareAlike License.
All Text copyright Lakelands Academy & Mr T Purslow 2020.  All images copyright free / creative commons unless otherwise stated. You are welcome to use under a Creative Commons Attribution-nonCommercial-ShareAlike License.
All Text copyright Lakelands Academy & Mr T Purslow 2020.  All images copyright free / creative commons unless otherwise stated. You are welcome to use under a Creative Commons Attribution-nonCommercial-ShareAlike License.
Back to content