Bitmaps and Vectors

Bitmaps and Vectors title

Bitmaps and Vectors


KC avatar for website tutorialsBefore delving into the wonderful world of digital art and design it pays to understand the difference between the two formats that underpin digital art creation. These are bitmaps and vectors. This is not a discourse on “vectors are better than bitmaps” (or vice versa) as each have their advantages and are suited to some things more than others. The context for this tutorial is to highlight how each works to gain a better understanding before we begin. All digital vector and photo processing programs or apps concentrate one or the other, and, in most cases, both formats are available within the same program in some form or another.

Bitmaps

Let’s start with bitmaps. These are probably the ones that we come into contact with the most on a daily basis – photos taken with a digital camera or mobile phone and most online images are bitmaps (or raster). So what is a bitmap? Basically speaking these are ‘pixel’ based images where the image is made up of tiny squares, like building blocks. The blocks themselves contain all the information required to display the image, whether the pixel is on or off (as in the case of transparent or opaque parts in png images), and the rgb colour of the pixel.  Have you zoomed into a photo and discovered how, as the image gets larger on the screen, it ‘breaks up’ into squares? These are the individual pixels that make up the image. See the image below – it shows a zoomed in area under the magnifying glass. We can see the individual pixels quite clearly.

Looking more closely at the image we can see that, although the shadow between the pencils looks like a straight line that gradually changes colour, the magnified image shows that the individual pixels vary in colour by steps as they move out of the shadow. The difference is clearly seen in the water droplets too – in the original they appear smooth and rounded, but the closer view reveals the blocks that make up the ellipses.

This is the problem we face when trying to enlarge either the whole image or just a portion of the image. The finer detail is not there. There are ways to combat this, called ‘interpolation’.  Interpolation is when the software adds pixels (makes up the information based on adjacent pixels), with varying degrees of success, to make up for what is missing. Some software handles this better than others and can be reasonably successful (within reason) but it is never as good as having a ‘higher resolution’ image (or more pixels) to begin with.

Interpolation is when the software adds pixels (makes up the information based on adjacent pixels), with varying degrees of success, to make up for what is missing.

Imagine we really like the photo of our pet we snapped on our mobile and would like to print it out and put it in a frame but dislike the distractions in the background so we want to crop it and enlarge it to put in a photo frame. Let’s say they only take up 300 pixels square (between 1 and 2 inches or 2.5 and 5 cm square when printed). When we try to enlarge the photo to fit in a 6 inch (15 cm) square photo frame we might be disappointed with the results as we’re never going to be able to recover the finer detail – like eyes and fur detail – that just isn’t there.

So, bitmaps (tif, jpg and png) are great formats for storing photos, some digital art and other images – provided there is sufficient information recorded in the first place and we don’t want to enlarge them. Logos and some digital art, on the other hand, are more suited to vectors.

Vectors

Vectors, unlike bitmaps, are made up from mathematical equations or geometry – ‘a line starting at x-y co-ordinates from point a to point b at this tangent’ – so it does not rely on a fixed, pixel based, position. As such, a vector image can be 1 inch (2.5 cm) square or scaled to be large enough to fit on the side of a vehicle, and it will look as sharp at either size – which is why vectors are great for creating logos and some digital art. If they are to be printed or displayed as an image they only become bitmap images when, after scaling to size, they are exported as a jpg or png file. It is only then that the size of the image becomes large because it is being converted to a pixel based format. Vectors can also be exported as svg files, a vector format, that most web browsers can display, so, if we have created a logo in vector format they remain crisp no matter what size they are scaled to.

For this reason, vector image files are very often much smaller than the bitmap file and are great for creating logos. Take the main image above, as a bitmap of 1000 x 600 pixels it is 360kb, whereas the same size original vector version is only 18.8kb. If we were to enlarge both versions the size of the bitmap would grow exponentially and become ‘blocky’ whereas the vector will remain the same file size and remain as sharp. It is only when there are thousands of vector objects making up a single image that the size of the file may become greater than the bitmap.

Comparing the two types

Let’s have a closer look at the differences between the two. The image below shows a bitmap on the left and a vector on the right. The lines are exactly the same – the original vector line was copied then pasted and converted to a bitmap. When we enlarge the bitmap we can see the pixels that go into creating the image, but the vector remains just as sharp, this is why it is always preferable to use vectors for logos, simply because they are size independent.

Bitmap and Vector scaling

Where does this leave us?

It is always best to choose from the outset what type of file we are going to create, whether it’s main component is vector or pixel. If it has pixel components then start with the largest dimensions you think you’ll need eg if you’re printing on A3 paper then start the image as an A3 printed document, any smaller and it will become pixelated when enlarged.

With a bitmap we can draw or paint any shape, colour or object on the 1000×600 pixel document; the file size will remain the same, just the information stored in each pixel will change. Our only problem will arise if we want to make this image larger. Because vectors are based on mathematical equations, more plot points and lines means more equations and a bigger file size – one equation for every plot point, angle and line). This can be seen when using the vector brush tool in Affinity Designer, as every brush stroke is a single vector line a digital vector painting file size grows as more brush strokes are applied.

Affinity Designer and Affinity Photo

With Affinity Designer we get the best of both worlds in the form of ‘Personas’ – ‘Draw Persona’ and ‘Pixel Persona’ – two types of drawing engines with their own set of tools within a single app. A drawing can be totally vector, totally pixel based or a combination of the two – a clean vector image with pixel ‘texture’ enhancements. If you have Affinity Photo the document can also be opened within Affinity Photo, retaining all of your work ‘as-is’ and further pixel based enhancements can be made.

Draw Persona left and Pixel Persona right

Draw Persona left and Pixel Persona right

Here is a cartoon drawn as a vector in Affinity Designer. On the left it has bitmap textured brush work added using the Pixel Persona in Affinity Designer and on the right is the original vector. The vector appears clean and precise whereas the one on the left has a more organic feel due to the brush work.

Vector Cartoon: with bitmap texture left, pure vector right.

The main thing is, whatever you choose make sure you’re having fun!

Leave a Reply

Your email address will not be published. Required fields are marked *

For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

If you agree to these terms, please click here.

This site uses Akismet to reduce spam. Learn how your comment data is processed.