Skip to main content
Subject Guides

Skills Guides

Image editing

Digital storytelling: Image editing

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.

Raster versus Vector

There are two broad categories of digital image:

Raster

A rabbit made from pixels

A raster rabbit — made out of pixels

Read more...

Vector

It's a rabbit but it looks like clip art: pen-stroke lines and blocks of colour

A vector rabbit —made from geometry

Read more...

Raster file size and compression

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:

A rabbit made from pixels

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.

Read more...

Image editing tools

On University computers


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:

Raster image resolution

Size matters...

These two images are both being displayed at the same size. They don't look especially different, do they?

Testcard with a width of 500px

Source image is 500px wide

Testcard with a width of 250px

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...

Read more...

So what's the right size..?

Screen use

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.

The bunny testcard is 500px wide

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?

Read more...


Print use

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):

The 500px bunny testcard is 4.2cm wide

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.

Raster file types

Testcard with a rabbit on it

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):

TIFF

JPEG

PNG

GIF


Sourcing images

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 training sessions

Forthcoming sessions on :

Show details & booking for these sessions

There's more training events at: