Ever wished you could remove the background, change the colour, merge or add a filter to an image? In this workshop we cover the principles you need to know when working with images, from file size to dimensions. We will also get creative with free image editing tools that will help you capture the attention of your audience.
Images can take up a lot of storage space and a lot of bandwidth online.
If you're making an image for use on the internet, a modern connection should have little difficulty almost-instantly downloading images even as large as a few megabytes (MB). But you might be needlessly eating into somebody's data plan. Generally speaking you should avoid using images that are larger than 1 MB (unless they're really big images) — if only to mitigate the environmental impact (won't somebody think of the rabbits?!).
Take the picture below:
This raster rabbit is just 500 pixels by 500 pixels and uses a 'true colour' 24-bit palette (in other words 224 or 16,777,216 colours). The information that makes up that image is therefore:
500 bits x 500 bits x 24 bits
= 6,000,000 bits
= 750,000 bytes
= 732 KB.
The larger the image, the exponentially larger the file size.
But that image (the largest image on this page in terms of file size) is actually only 401 KB. That's because it's been compressed to almost half its original size.
There's a range of free desktop and online image editing tools available, such as PIXLR. Here's a selection of interesting tools and resources for use at your own risk:
These two images are both being displayed at the same size. They don't look especially different, do they?
Source image is 500px wide
Source image is 250px wide
But if we blow them up to twice the size, we start to see a problem with one of the two images...
As monitors get bigger and bigger, so the number of pixels that makes up your screen increases. Most of the monitors on campus are (at the time of writing, at least) 1920x1080px, which means that the 500px-wide images above would take up about a quarter of the screen width when displayed at actual size.
A 500px-wide image looking good on a 1920x1080px display.
Why not open the image in a new tab and see how it looks on your display?
There's an old printer's rule that for an image to look good in print it should be about 300 dots (of ink) per inch. A younger printer would convert that to about 120 pixels per centimetre. Again, there's a bit of leeway, but using this rule a 500px image shouldn't take up much more than 4cm on your page (500÷120=4.17):
A 500px-wide image looking good at 4.17cm wide on an A4 sheet.
You'd need a 2520px-wide image to fill the width of the sheet to a decent standard.
When you save a raster image you will have a range of filetypes to choose from. Here is a breakdown of some common raster filetypes and their pros and cons (select the headers to read more):
Always bear in mind that published images are always subject to copyright law, so you can’t just use any image you want.
Fortunately, there are plenty of free-to-use images out there (for instance, we got a lot of the images on this page from Pixabay).
For more information and advice, take a look at:
Forthcoming sessions on :
There's more training events at: