Lesson video

Hello, my name's Mrs. Jones.

I'm really pleased you decided to join this lesson today.

In this lesson, we will look at the difference between bitmap and vector graphics and consider which type of graphic suits different situations, and we'll also be looking at evaluating your final products.

So let's get started.

Welcome to today's lesson.

Today's lesson is called Comparing bitmap and vector graphics, from the unit Developing vector graphics.

And by the end of this lesson, you will be able to compare vector and bitmap images and consider which image type best suits which situation.

There are two keywords to today's lesson.

Bitmap.

Bitmap are images that are made up of pixels.

Pixel.

Pixel is a dot of colour that when combined with others, creates a bitmap or raster image.

There are three sections to today's lesson.

The first is explain differences of vector and bitmap images.

The second, outline which image type best suits which uses, and the third, evaluate a vector product.

So let's start with explain differences of vector and bitmap images.

Describe the difference between this vector graphic and a real photograph.

You got the vector graphic on the left and the bitmap image on the right.

The real photograph has a lot more detail.

Bitmap images, also called raster graphics, are made up of small, individual squares of colour called pixels.

You can see here the picture of a butterfly, but when you zoom in, you can see each individual pixel.

Bitmap images can store a large amount of image data.

Photographs are an example of a bitmap image.

Bitmaps use lots of colours because each tiny pixel is a slightly different shade, which can allow the colours to blend together.

Bitmap files are widely supported by a range of software and web browsers.

There are some disadvantages of using bitmap images.

Because they are so detailed, the file sizes can be large, especially images with a high resolution.

Bitmap graphics lose image quality when they are scaled up or down because they are based on pixels only.

The size and colour of the pixels is not recalculated when the graphic is resized.

This makes the edges blurred.

You can see here on the word raster, that the E when enlarged, you can see there all the individual pixels, but when it's been resized, the edges are now blurred.

It can be more complex to edit a bitmap image.

Compared to vector paths, changing individual pixels can be a much lengthier process because there are so many pixels and they are so tiny.

Bitmap images have a fixed resolution.

This means that if the image is printed at a higher resolution than it was originally created, the quality of the printed image could be reduced.

Vector graphics are images such as illustrations, icons, and logos.

They do not use many colours because they have large areas of solid colour.

Vector graphics can be scaled up or down without losing any image quality because the paths and shapes they are made from are described with numeric values.

Algorithms and formula are used to recalculate the paths when the graphic is resized.

This keeps the edges of the graphic nice and sharp.

You can see there, like the zebra, it has really nice and sharp edges on that.

Vector image file sizes are typically smaller than bitmap images, which can support file sharing and the upload of images to websites.

Vector graphics can be edited easily.

They are based on mathematical equations that define lines, curves, and shapes rather than on pixels.

That means they are straightforward to modify, for example, resizing and reshaping.

You can use vector graphics for a wide range of purposes, such as logos, icons, and illustrations.

Vector graphics are ideal for printing because they maintain their image quality at any size.

Let's have a quick check.

True or false? Another name for a vector graphic is raster graphic.

Pause the video to consider if that is true or false, and then we'll go through the answer.

Let's check your answer.

The answer was false.

Pause the video to consider why that is false, and then we'll go through the answer.

Let's check your answer.

Raster graphic is another name for a bitmap image.

These are images made up of small dots of colour called pixels.

Well done if you got those correct.

There are some disadvantages of using vector graphics.

Some pieces of software and older web browsers may not fully support vector graphics.

Vector graphics often require more skills to create effective designs than bitmap images, which may mean time or money is needed for training.

Vector graphics have a lack of detail and realism, which means that they can look cartoon-like and therefore aren't suitable for all purposes.

Let's have a quick check.

Which of these images is a raster graphic? Is it A, B, or C? Pause the video to consider your answer and then we'll go through it.

Let's check your answer.

The answer is A.

Well done if you got that correct.

Let's do an activity.

Explain the differences between vector and bitmap images.

Think about: what they're used for, the purpose, editing, printing, storage size, and other advantages or disadvantages.

Pause the video, go back through the slides, use your worksheet and then we'll go through the answers.

Let's check your answers.

Jun says, "Vector drawings are made up of shapes and lines, whereas Bitmap or raster graphics are made up of pixels.

Vectors are used for icons, illustrations, and logos, while bitmaps are often photographs.

Because they're so detailed bitmaps can take up more storage space than vectors.

This means that vectors can be better for uploading to websites.

There are a lot of skills that you need to learn to create effective vector drawings.

This can take time, but it's great fun." Well done if you got that correct.

Let's move to the second part of today's lesson, outline which image type best suits which uses.

Let's start with a quick check.

True or false? Vector graphics are better than bitmaps/raster graphics.

Pause the video to consider if that is true or false, and then we'll check your answer.

Let's check your answer.

The answer was false.

Pause the video to consider why that is false, and then we'll go through the answer.

And let's check your answer.

Neither vector or raster graphics can be considered better than each other overall.

They both have their own advantages and disadvantages.

When creating an image, you should consider which file type is best for your task.

Well done if you got that correct.

Vector graphics are used in newspapers for logos and illustrations as they are scalable without blurring.

Here we have a vector in the top right there.

Bitmaps are also used mostly for photographs.

You can see an example here for bitmap.

As with newspapers, both vector graphics and bitmaps are used within magazines.

Vector graphics are often preferred for design features such as logos, illustrations, and typography due to their scalability.

Bitmaps are used for photographs and where detail is required.

Vector graphics are used for logos and icons on websites.

They often have smaller file sizes than bitmaps, so they can be quicker to upload.

Websites also include bitmaps, often in the form of photographs or complex images.

Vector graphics are often used in presentations as they are crisp and easily visible from a distance.

Bitmaps can also be used for photographs and more detailed images.

In photography, bitmap images are the preferred format.

The images are made up of individual pixels, which can each be a different colour.

This enables smooth colour transitions to be used to create realistic images.

Book covers can be designed using vector, bitmaps or a combination of both.

You see a couple of examples there.

Vector graphics are usually preferred for a large format printing, such as posters as they can be resized easily.

Bitmaps can also be used, but this is not generally recommended as they can lose quality when they are scaled up.

Due to their size, designs for billboards are usually created using vector graphics, which can be enlarged to scale.

Let's have a quick check.

True or false? Vector graphics cannot be scaled.

They look blurry if you resize them.

Pause the video to consider if that is true or false, and then we'll go through the answer.

Let's check your answer.

The answer was false.

Pause the video to consider why that's false, and then we'll go through the answer.

Let's check your answer.

The biggest advantage of vector graphics is that they are infinitely scalable.

When bitmaps are enlarged, they lose their quality and become blurred.

Well done if you got that correct.

Let's do the activity.

Choose an option from the list on the right hand side where: vectors are preferred file type, bitmaps are the preferred file type, both vectors and bitmaps are used, and find out whether a vector can be converted to a bitmap and vice versa.

Pause the video, use your worksheet, look at the options on the list there.

We have newspaper, website, magazine, presentation, photograph, sketch, book cover, poster, and billboard, and consider those questions A, B, and C, and then do some research to find out whether a vector can be converted to a bitmap and vice versa, and then we'll go through the answers.

Let's have a look at the answers.

So Jun says, "Vectors are the preferred file type for billboards.

Billboards can be different sizes but are often large so that people can see them at the side of the road or in town centres.

Vector graphics are used because they can be rescaled to any size without the quality of the image being affected.

The preferred format for photographs is a bitmap.

Bitmaps can show a range of tones and colours and merge one into another seamlessly.

They are extremely detailed and look very realistic.

There are a number of places where both vectors and bitmaps are used.

In newspapers and magazines, vectors are used for logos and illustrations as they're clear and can be resized easily.

They also use bitmaps for photos and more complex images that show lots of detail." For the second part, Jun says, "I found out that vector graphics can be converted into bitmap images.

This process is called rasterization.

Bitmaps can be converted into vectors, and this process is called vectorization or image tracing.

I'd love to find out more about how this works." Well done, Jun there on his answers, and hope you have got those too.

Well done.

Let's move to the last part of today's lesson, Evaluate a vector product.

In this part of the lesson, you'll be evaluating a vector graphic.

If you do not have your own vector graphic, you may choose from these examples: logos, icons, and illustrations.

What skills do we use to create each vector graphic? Let's do a quick check.

Which of these skills are used to create vector graphic? A: resizing objects? B: applying photo filters? C: cropping photos? D: recoloring objects? Pause the video to consider your answer and then we'll check it.

Let's check your answer.

The answer was A and D.

Resizing objects and recoloring objects.

Well done if you got that correct.

B and C are skills related to bitmap or raster photo images.

It might help to explain to someone else the processes you went through to create your design.

Sofia says, "First, I used markup to set the size, colour, and coordinates of my circle.

Jun says, "Remind me, how do you set the coordinates in Inkscape?" Look at the assessment rubric on the next slide.

You will use the rubric to complete your final evaluation of your work within this unit.

Here is an example here, you've got the implementation and evaluation sections here.

You have the emerging, the expected, and exceeding.

You can see different requirements within each of those.

Let's have a quick check.

Look at this design.

Which of the following skills do you think have been used? A: rotating shapes? B: recoloring shapes or lines? C: aligning or distributing shapes or lines? Pause the video to consider your answer and then we'll check it.

Let's check your answer.

The answer was B and C.

Recoloring shapes or lines and aligning or distributing shapes or lines.

Well done if you got that correct.

Let's do the activity.

Take some time to complete the rubric.

Highlight the skills you've used to make your design and choose a score out of three for each area.

Pause the video, use the rubric, and go through and evaluate your vector product, and then we'll go through an example solution.

Let's have a look at an example solution.

So this is Jacob's vector illustration of a crab, and this is his rubric.

In the implementation, he has highlighted that he converted a basic shape to a path and repositioned nodes, changed straight paths to curves, altered the width of stroke and paths.

And in the evaluation, evaluate and reflect on the impact that change had made on an image.

So you can see there that he's given a score of three in each of those sections.

Well done for completing that activity and evaluating your work.

In summary, vector images are made from shapes and paths so they stay sharp when resized.

This makes them good for logos or icons, which need to be presented in different sizes.

Bitmap images are made from pixels.

They can lose quality when resized and are better for photos and detailed pictures.

Well done for completing this lesson, Comparing bitmap and vector graphics.