A raster rabbit — made out of pixels

Raster (also known as bitmap) images are made up from a grid of pixels: squares of colour. 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 images are the most commonly used type of digital images because of their greater capacity for photorealism.

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.

Excerpt of the underlying XML code that makes up our bunny SVG image

Because vector images are built from (generally comparatively basic) geometric rules, they normally produce much smaller files than raster images.

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:

• Lossless compression reduces the file size while preserving a perfect copy of the original image. Imagine a set of song lyrics with a regularly repeated chorus: rather than typing out the lyrics of the chorus each time, you could just write "CHORUS" for each of the repeats. Lossless compression does a similar sort of thing.
• Lossy compression preserves a representation of the original image, but it is not an identical copy. For instance, similar colours may be rendered as the same colour. Imagine a set of subtitles on a video: they may miss out certain words being said to keep down the reading time. Lossy algorithms will usually allow variable compression, allowing you to trade image quality for file size.

The images below show the difference in image quality for different compression methods:

uncompressed
(120x120; 24-bit)
42.2 KB

lossless compression
(PNG format)
37.5 KB

lossy compression
(90% quality)
16.8 KB

lossy compression
(10% quality)
11.4 KB

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:

If you displayed those images at a different size, 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 for more info.

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.

120x120 lossless


120x120 10% quality

120x120 10% quality blown up to 240x240

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. Like PNGs, GIFs support isolation, but the lower palette means that PNGs are generally preferable.

GIFs can be animated, and it remains a popular format for animations on social media.