Library Subject Guides
Digital images are everywhere. You've probably taken quite a few yourself.
We're not going to teach you the principles of photography on this page, but we will take a look at the types of digital image you might encounter, and the various settings you might need to consider, such as resolution, colour, and compression. We'll look at the basics of image editing, including the very basics of vector graphics). Finally we'll consider how to describe your images to people who can't see them.
As usual for this guide, you'll also find on this page a copy of a presentation about image editing, a breakdown of available image editing software at York, a look at some common image filetypes, and suggestions for sourcing images from the internet.
Most digital images are made from tiny squares of colour called pixels. These 'raster' images come in various file types (as shown by the .suffix after the file name). Particularly common are JPEG (often used for photos as they compress the images to a small file size) and PNG (also used for photos but particularly useful for charts and diagrams because they don't do that blotchy thing that JPEGs can do).
There's another category of image, made from geometry rather than pixels. These are especially good for charts and diagrams but not good for photos. The most common type of these 'vector' graphics is SVG.
Resolution is how much detail the digital image contains, which affects the maximum size the image can be displayed at without losing quality. This is why you shouldn't just make a picture larger when you insert it into a document, as you may end up with a blurry, bad quality image.
On the other hand, images that have a very high resolution can mean very large files that take up a lot of space, so they may need to be re-scaled.
When working with digital images, it is important to remember where you got the image from and think about copyright and reuse.
There are two broad categories of digital image:
A raster rabbit — made out of pixels
Raster (also known as bitmap) images are the most commonly used type of digital images because of their greater capacity for photorealism. When people talk about digital images, they're generally talking about raster images. If you take a photo on your phone, this is the sort of digital image you'll get.
They're made up from a grid of coloured squares called pixels (often abbreviated to px) — a bit like a mosaic. The more pixels in an image, the higher the image quality: what's called the 'resolution'.
Another factor in image quality is the number of colours used (the 'colour depth'): the more colours available in the image's palette, the more realistic it is likely to appear.
Raster file sizes can be reduced using compression algorithms, which, depending on the filetype being used, can sometimes lead to a loss of picture quality.
A vector rabbit —made from geometry
Vector images are essentially made up from points, lines and curves using a set of geometric instructions. They are used to create diagrams or comparatively simple illustrations, and because they're constructed from geometric instructions they have the advantage of being scalable to any size without distortion.
The most common vector filetype is SVG: Scalable Vector Graphics.
Because vector images are built from (generally comparatively basic) geometric rules, they normally produce much smaller files than raster images.
Use raster images for photographs and vector images for diagrams.
The physical dimensions of a raster image can be really important. The resolution of the image is a way of describing the amount of detail it contains, which has a direct affect on the maximum display size that's possible without losing quality. For various reasons you'll want to use an image that isn't too big, but that also isn't too small. In this section we'll look at why resolution is important and what size of image is just right for your purposes.
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...
Source image is 500px wide
Source image is 250px wide
The second image has less pixels (px) than the first. Pixels are squares of colour that make up the image. The first image is 500 pixels wide and 282 pixels tall (a total of 141,000 pixels), while the second is 250x141 (35,250 pixels in total). So while we might say it's half the size in terms of its width and height, it only has a quarter of the number of pixels within it: the larger image has four times the amount of data than the smaller one.
Here's a close-up of the rabbit's eye from those two testcards:
250px image:
The eye is 6px square
(36 pixels)
500px image:
The eye is 12px square
(144 pixels)
120x120px
image
Of the above bright eyes, the first eye is the actual 6px image (12px in the second example) blown up to 120px in your browser. The blurriness you might see is your browser compensating and applying something called 'anti-aliasing' to blend the pixels together at the new scale. The second image is a simulation of what the original image actually looks like if you were to zoom in. For comparison there's also a 120x120px 'full-size' image of the eye.
You can find the dimensions of an image in its properties:
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?
The widescreen monitors on campus are generally 22" screens, so (when measured with a ruler) they have a physical width of 47.3 cm. That means there's roughly 41 pixels per cm (1920 ÷ 47.3).
By that reckoning, the 500px image on my screen could be just over 12 cm wide without losing quality.
If you displayed those images at a different size (as we did with the testcards earlier), then the browser you're using would 'resample' the image to that size. So the 500px image being displayed at 250px is being resampled down, and the 250px image being displayed at 500px is being resampled up.
We've already seen that resampling up can look pretty rubbish. You can get away with it for a small proportion of the size, but different browsers (and other applications you might be using) function better than others. If you're resampling a large image down to a small space you should be ok, but you might get better results resampling your image in a graphics program than relying on your reader's browser.
It's not just the physical size of an image that are important; the amount of space it takes up in storage matters too. And typically, the more pixels, the more storage required. The bigger the file size, the longer it will take to download and the more room it will take up in your computer's memory. Your 16 megapixel image you took on your phone is going to be anywhere between 1½ - 25 megabytes depending on the compression, and even 1½ MB is quite a lot. A few of those on a page and you'd soon be eating into somebody's data allowance (and time) if they were on their mobile.
Take a look at the file size guidance below for more info.
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.
We've established, then, that a photographic image should be at least a certain number of pixels wide and tall, corresponding to the physical size it will be printed or displayed at. When you're sourcing an image, find one that's big enough to print or display at a decent standard.
Of course, the bigger an image is physically, the more room it tends to take up on the computer and in the memory. It's therefore also a good idea not to go too over the top: don't use an image that's massively bigger than your needs. If your image just needs to be 1800px wide, using something twice that size is a waste of memory or bandwidth.
So when you're sourcing or creating an image, try to ensure you're getting something that's about the right size for your needs. If your image is much too large (and it might be, especially if you've taken it on a digital camera or your phone), you should consider resampling that image using an image editor. Here are some options:
Corel PHOTO-PAINT, part of the CorelDRAW graphics suite available on University computers, can be used to resize images. The re-sizing dialogue lets you choose the resolution and dimensions, and can adjust the pixel dimensions accordingly using print dimensions.
PIXLR is a free-to-use online editor, so needs no download/install. It re-sizes the pixel dimensions, so you need to calculate these yourself first for the size of image you want on the page.
It's theoretically possible to resample an image upwards in resolution. When you stretch an image in an application like PowerPoint, this is what you're doing. But there's no magic at play; pixels will just get doubled up, and the quality won't be very good (take the rabbit example from earlier, for instance). You can get away with a little bit of enlargement but not very much.
Raster images are made from coloured pixels. The available colours (the 'palette') are encoded within the file, and, inevitably, the larger the colour palette (the 'colour depth'), the larger the file.
Most of the time, you'd probably not think about the palette — when we're editing images we're generally just working with what we've got, and the palette poses far less problems than the resolution. But most graphics programs will let us play around with the palette, and if we want to get particularly creative then we might find it useful to know the basics.
Colour depth is typically measured in bits — binary digits.
The following testcard uses a 4-bit colour palette: that is to say that it is made from 16 colours (15 in binary is 1111 — in other words 4 binary digits — and zero makes 16).
Because there are only 16 colours to play with, the natural colour of the rabbit photo is reduced to blocks of the nearest available colour in the palette.
The more colours we have in an image, the more realistic it will look, but also the larger the image will get.
Still, even with a small palette like this, we can get a more realistic effect by using a technique called dithering, where pixels of one colour are intermingled with pixels of another colour:
The GIF filetype typically uses an 8-bit palette (256 colours) which can make for a far more natural looking rabbit:
Applying dither gives us:
Most digital images use a 24-bit palette of 16,777,216 colours, which is more gradation of colour than the human eye can discern. 24-bit is therefore considered to be "true colour".
24-bit images are typically made from 8 bits of red, green, and blue shading (what's called an RGB palette after those colours' initials), meaning that every colour can be defined from 256 levels of those three primary colours, where 0 is 0% of that colour and 255 is 100% of that colour. For instance:
| Colour | Red | Green | Blue |
|---|---|---|---|
| Black | 0 | 0 | 0 |
| Red | 255 | 0 | 0 |
| Green | 0 | 255 | 0 |
| Blue | 0 | 0 | 255 |
| Yellow | 255 | 255 | 0 |
| Cyan | 0 | 255 | 255 |
| Magenta | 255 | 0 | 255 |
| White | 255 | 255 | 255 |
| rgb(128,128,128) #808080 |
As well as using the decimal numbers 0-255 to describe the amounts of red, green, and blue respectively, these proportions are also often defined using hexadecimal values 0-FF (hexadecimal counting goes 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10...). These three values may be combined into a six-digit hex code (a "hex triplet"), for example #4B0082 for indigo:
| Format | Red | Green | Blue |
|---|---|---|---|
| Percentage | 29% | 0% | 51% |
| Decimal | 75 | 0 | 130 |
| Hexadecimal | 4B | 0 | 82 |
| Hex code | #4B0082 | ||
RGB values and hex codes are both regularly used to define colours for online use and in graphics programs.
As well as red, green, and blue, some image filetypes such as PNG have an additional 8 bits of data: Alpha. "Alpha" effectively just refers to the transparency or opacity of a colour: 0 means that the colour is fully transparent (anything behind it will be completely visible), 255 (FF in hexadecimal) means that the colour is fully opaque. You may come across programs that use an 8-digit hex code along this model.
The benefit of a 32-bit colour image is that it can have varying degrees of transparency, like this martini glass (which you can move if it's in the way).
Screens use three primary light colours (red, green and blue) to generate all colours. With all at 100% you get white, and with all at 0% you get black (or the closest your screen can get). This is additive colour mixing, and relies on the fact that most people’s eyes have red, green and blue colour sensors (the ‘cones’). You’ll see this referred to as RGB colour (Red, Green, Blue).
Printing uses subtractive colour mixing with cyan, magenta and yellow. The pigments absorb light, so the more you use the darker things get. In theory, mixing all three should give black, but most printers also use a pure black pigment, so you’ll see this referred to as CMYK colour (Cyan, Magenta, Yellow, Key (blacK)).
Commercial designers use applications that work with a CMYK colour palette, and calibrate monitors to get as close as possible to the final printed colours. If you're getting an image printed professionally you may need to provide files in a CMYK palette There are options for converting to CMYK in the Corel programs (e.g. DRAW and PhotoPaint) on University computers.
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 our raster rabbit:
This image 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 physical dimensions of an image, the exponentially larger its 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.
Compression algorithms are bits of maths that allow a file to be smaller than the raw data it represents. There are two types of compression:
The images below show the difference in image quality for different compression methods:
It's possible to get lost in all the options available in a modern graphics program. Here's the basic principles of how they work:
If you're wanting to draw onto a digital image, your graphics program will probably have a range of shapes and line tools, in much the same way that a Microsoft Office program like PowerPoint does. But, especially if you're working with a raster image, you might also want to draw 'freehand' onto the 'canvas' of your image. That's where brushes come in.
To draw onto a digital image you will need to select a brush (as well as a colour to use with the brush). Brushes come in all sorts of shapes and sizes. The simplest form of brush is what's called a pixel brush: it's a fully opaque square. But there are often all sorts of other brushes you can use too, which mimic the appearance of real-life physical paint-brushes, pencils, and other artistic media. These other brushes will often make use of the 'alpha' channel (in other words they will add semi-transparent areas of colour to your image) and may even produce different effects as you continue to use them.
One of the most famous brushes is the airbrush which sprays a thin, diffuse layer of colour onto your image. It's often used to 'touch up' images (get rid of dust or blemishes) because of the way it blends into its surroundings.
Depending on the program you're using, you may be able to change the general shape of the brush 'nib', as well as its size, its transparency level, and the degree of feathering (how defined or diffuse the edges of the drawn line are). There may also be even more advanced settings. These controls usually appear at the top of the screen.
Most image-editing software uses the same sort of 'layers' model you'd find in something like PowerPoint: objects can be added to a background image, and arranged so that they are above or below other objects.
Take the testcard below, for instance. It's been built up out of layers: there's a layer for the testcard‑y bit (with a hole punched in the middle, because layers can have holes), and there's a layer behind it for the rabbit. Try moving the layers about to see what we mean:
This layering approach makes it easier for you to assemble complex images. When editing an image in this way you will need to save your working document as a filetype that is native to the application you're using (e.g. a .cpt for Corel Photo-Paint) in order to preserve the layers. But these filetypes aren't generally accessible outside of the application, so for other uses you will need to export a 'flat' version of your image as a conventional filetype (e.g. a .png or .jpg).
Exporting a working file to a conventional 'flat' filetype is a bit like printing off a finished document.
In most graphics programs, the layer controls are usually found to the right of the screen by default. There's generally a + button to add a new object, controls for reorganising layers, and options for transparency, along with more advanced settings.
A mask is a protected section of your image. You can draw a mask onto an image with a mask tool (there's usually more than one way of applying it), and there may even be automated ways of creating a mask (for instance masking by colour or masking by the shape of an object).
If something has been masked, you won't be able to draw on it, or you might be able to apply an effect only to that part (depending on the way you're using your masks). Like brushes, masks can often be feathered.
Masks are generally temporary things, though sometimes you might want a permanent mask. As with layers, masks generally require you to save your file as a native filetype if you want them to still be there next time you're working on your file. But you may also be able to use a mask to define transparency when saving an image as a file that can support transparency.
Graphics applications are often littered with effects, from artistic effects (like making a photograph look like it was hand-drawn), to camera effects (like adding lens flare) to more creative and bizarre effects. There might also be effects brushes that allow you to draw a particular effect onto specific parts of your image.
Go through the various effects available. Effects are usually only applied to the selected layer of an image, and you can use masks to isolate specific parts of a layer too. You might want to save multiple versions of your image to ensure you don't lose a version of it you liked, especially since graphics programs don't always keep a complete 'undo' history.
If you want to apply multiple effects to an image, one useful approach is to create a copy of your image as a new object layer and apply the effect to that. Then you can use transparency to merge different versions of your image.
Another technique is to flatten your image (combine all the objects), apply the desired effect, copy the resulting image, undo the effect and the merge, and then paste as a new object. Again, you can then manipulate your object layers accordingly.
You might only want to make minor adjustments or corrections to your image, like altering the brightness, contrast, or colour balance. These might be in the effects menu, or might be in their own adjust menu. If you're just needing to crop your image (cut off anything round the edge that you don't want), there's often a specific tool for just that.
Vector images have their own set of rules and principles. They're based around geometry, so don't go expecting artistic brushes. You're much more likely to be creating images out of shapes, lines, and points. You could even build a vector image entirely from code if you wanted to!
If you've ever edited a diagram in PowerPoint, you've got the principles of vector image editing. Indeed, you can even use PowerPoint to create vector images from scratch or edit vector images from other sources. A tool like Corel DRAW has a lot more capabilities than PowerPoint, but it's still operating on the same principles of layers of shapes and lines.
The most common type of vector graphic is the SVG (Scalable Vector Graphics) which can be embedded on a webpage either as an external image or as code. They can also be imported into Microsoft Office programs like PowerPoint and converted into PowerPoint drawings.
If you're making a webpage, presentation, or other digital artefact, and you're including images, you need to bear in mind that not everyone will be able to see those images. If an image is being used to convey information, you will need to find an additional, alternative way to convey that information to anyone who can't see the image. Webpages, email, social media, text documents, presentation software, and similar tools allow you to add alternative text (alt text for short) to describe your images.
How you describe an image depends on the role of the image, and on any duplication of information in the surrounding text. Here's a few examples of how different types of images might be described:
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.
There's a range of free desktop and online image editing tools available, such as GIMP (desktop) and PIXLR (browser). Here's a selection of interesting tools and resources for use at your own risk:
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):
Tagged Image File Format (.tif) is often used for professional-standard photographic images, but it does not have widespread support in web browsers so is mainly used for offline purposes. There are a range of compression options but generally TIFFs retain quite high file-sizes in order to maintain image fidelity. They are mostly used for photographic printing or archival purposes.
An uncompressed TIFF version of our rabbit testcard at 1000px wide would have a file size of 3.23 MB, though this could be losslessly compressed to as little as 489 KB.
Joint Photographic Experts Group (.jpg) images are ubiquitous on the web: they use lossy compression which means they can be reduced to very small file sizes. As well as flattening the colours, the compression works by reducing an image to 8x8 pixel squares called blocks and then creating a representation of those squares using maths. This generally results in compression 'artifacts' – blobby bits where the original image was too complicated for the maths to approximate successfully – and are particularly common in high-contrast edges where the algorithm has a greater range of transformations to achieve. When saving an image as a JPG you can usually set the compression quality.
This close-up of the rabbit's eye has been compressed as a JPG at 10% quality. Blown up to twice the size, you can clearly see the 8px blocks and the associated compression artifacts. For a print-quality image, you should avoid compression qualities of less than 90%.
A 100% quality JPG version of our rabbit testcard at 1000px wide would have a file size of 224 KB, while a 0% quality version would be 21 KB (although it would look absolutely awful!).
Portable Network Graphics (.png) images are increasingly common online and have a better image quality than a JPG because they use lossless compression. This does mean that a PNG file might be of a bigger file size than a JPG, but it's usually small enough for modern internet speeds. And because PNG is a lossless format, it's good for print purposes and image editing too.
Parts of PNG images can be 'isolated': in other words, parts of the image can be transparent (or even semi-transparent).
Most of the images on this page are pngs.
A PNG version of our rabbit testcard at 1000px wide would have a file size of 214 KB.
Graphics Interchange Format (.gif) images generally use an 8-bit (256 colour) palette — that's a lot less colours than PNGs and JPEGs typically use, so colours may look strange, and images with lots of colour may look blocky or blotchy. Sometimes, techniques like stippling (dithering) may be employed to disguise this blockiness and give the illusion of shading.
Like PNGs, GIFs support isolation, but the lower palette means that PNGs are generally preferable.
The big advantage of GIFs is that they can be animated. Because of this, the GIF remains a popular format for animations on social media.
High Efficiency Image File Format (.heif or .heic) is a file format you might come across on Apple devices such as iPhones and iPads, as in recent years it has become the default file format for photos and videos on iOS devices. It is designed to save space on these devices. If you are taking photos on an Apple device and you want to be able to easily open and edit on other devices, you can change the default file type to JPEG by going to Settings > Camera then under Formats choosing Most Compatible.
You can open and edit HEIC files directly using the Preview app on a Mac or using Corel PaintShop Pro on University PCs (and therefore on both tools you can convert to other image file types). You can also view them on Google Drive, so uploading HEIC files to Drive is a method for being able to open (but not edit) them.
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):
Some images are 'public domain' and don't require attribution (though it can still be nice to attribute, especially if you're giving references anyway). Others may require you to credit the author in a sufficiently prominent way.
For more information and advice, take a look at:
Forthcoming sessions on … :
There's more training events at:
