Difference between revisions of "Bitmap Graphics"
(→Ardi) |
(→TRC PowerPoint) |
||
(38 intermediate revisions by 8 users not shown) | |||
Line 1: | Line 1: | ||
+ | =Overview= | ||
+ | ===CraigNDave=== | ||
+ | <youtube>https://www.youtube.com/watch?v=uikzbe-9d40&list=PLCiOXwirraUBIKvhutnNnMkVTpQ_psPN2</youtube> | ||
+ | |||
+ | https://www.youtube.com/watch?v=uikzbe-9d40&list=PLCiOXwirraUBIKvhutnNnMkVTpQ_psPN2 | ||
+ | |||
+ | ===Computer Science Tutor=== | ||
+ | <youtube>a3Y_ZvOr0K0</youtube> | ||
+ | |||
+ | https://www.youtube.com/watch?v=a3Y_ZvOr0K0&list=PL04uZ7242_M6O_6ITD6ncf7EonVHyBeCm&index=8 | ||
+ | |||
== Definitions == | == Definitions == | ||
{| class="wikitable" | {| class="wikitable" | ||
Line 30: | Line 41: | ||
== File Size == | == File Size == | ||
− | File Size of a bitmap file links nicely to this all as it is essentially the [[Bitmap_Graphics#Colour%20Depth|Colour Depth]] multiplied by the [[Bitmap_Graphics#Resolution|Resolution]]. This is because for every pixel there needs to be a colour assigned to it. Hence, an image, 100 pixels high, 500 pixels wide, with a colour depth of 24, bits would have the size of (100*500*24=) 1,200,000 bits or (100*500* | + | File Size of a bitmap file links nicely to this all as it is essentially the [[Bitmap_Graphics#Colour%20Depth|Colour Depth]] multiplied by the [[Bitmap_Graphics#Resolution|Resolution]]. This is because for every pixel there needs to be a colour assigned to it. Hence, an image, 100 pixels high, 500 pixels wide, with a colour depth of 24, bits would have the size of (100*500*24=) 1,200,000 bits or (100*500*24/8=) 150,000 bytes if it would be a bitmap image. |
+ | |||
+ | <youtube>https://www.youtube.com/watch?v=3x64f1Qqjhs&list=PLCiOXwirraUBIKvhutnNnMkVTpQ_psPN2</youtube> | ||
+ | |||
+ | https://www.youtube.com/watch?v=3x64f1Qqjhs&list=PLCiOXwirraUBIKvhutnNnMkVTpQ_psPN2 | ||
+ | |||
+ | ==MetaData== | ||
+ | The file size can easily be calculated (see above) however additional data will also be stored as well as the data for each pixel. This is called MetaData. This could include information such as the width & height, file format, colour depth, location, author etc. | ||
+ | |||
+ | <youtube>https://www.youtube.com/watch?v=E44bekOiHSU&list=PLCiOXwirraUBIKvhutnNnMkVTpQ_psPN2</youtube> | ||
+ | |||
+ | https://www.youtube.com/watch?v=E44bekOiHSU&list=PLCiOXwirraUBIKvhutnNnMkVTpQ_psPN2 | ||
== Problems with Bitmap Graphics == | == Problems with Bitmap Graphics == | ||
Line 42: | Line 64: | ||
==Compared With Vector Graphics== | ==Compared With Vector Graphics== | ||
− | Bitmaps are stored pixel by pixel However, in a vector graphic the image is stored | + | Bitmaps are stored pixel by pixel However, in a vector graphic the image is stored by calculating the points, lines and shapes used to create the image. A drawing list is created to recreate the image. Vector graphics can be resized using mathematics so increasing the size has no effect on quality of the image. |
The file size of a vector graphic can be significantly smaller than a bitmap. the drawing list is essentially the instructions to rebuild the image. However if you attempted to capture a real world photograph, you would essentially have so many shapes to represent the changes in colour that the file size might not be any smaller. | The file size of a vector graphic can be significantly smaller than a bitmap. the drawing list is essentially the instructions to rebuild the image. However if you attempted to capture a real world photograph, you would essentially have so many shapes to represent the changes in colour that the file size might not be any smaller. | ||
+ | |||
+ | <youtube>https://www.youtube.com/watch?v=LCz6IP4-Rlk&list=PLCiOXwirraUBIKvhutnNnMkVTpQ_psPN2</youtube> | ||
+ | |||
+ | https://www.youtube.com/watch?v=LCz6IP4-Rlk&list=PLCiOXwirraUBIKvhutnNnMkVTpQ_psPN2 | ||
=Revision Questions= | =Revision Questions= | ||
− | + | '''try to add more questions on: | |
+ | *file size calculations | ||
+ | *meta data | ||
+ | *problems with bitmaps | ||
+ | *benefits of vector graphics | ||
+ | |||
+ | '''Also '||' is the feedback for an answer, and could be greatly improved''' | ||
+ | |||
<quiz display=simple> | <quiz display=simple> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
{from the following What program are vector images created in? | {from the following What program are vector images created in? | ||
Line 65: | Line 88: | ||
|| Paint creates bitmap images | || Paint creates bitmap images | ||
- FL studios | - FL studios | ||
+ | || FL studios is used for music creation | ||
+ Adobe illustrator | + Adobe illustrator | ||
|| Correct adobe illustrator is used to create vector images | || Correct adobe illustrator is used to create vector images | ||
− | |||
− | + | {When are bitmap graphics used? | |
− | |||
− | When are bitmap graphics used? | ||
| type="()"} | | type="()"} | ||
+ They are produced when a camera or a scanner is used and most clip art is saved as a bitmap- meaning that they can be changed and edited | + They are produced when a camera or a scanner is used and most clip art is saved as a bitmap- meaning that they can be changed and edited | ||
Line 80: | Line 101: | ||
| type="()"} | | type="()"} | ||
- The largest element of a picture | - The largest element of a picture | ||
− | + | + | || |
− | - Resolution | + | + The smallest element of a picture |
+ | - Resolution | ||
+ | || Resolution is determined by the number of pixels in an image | ||
{What do you call the number of pixels in a screen ? | {What do you call the number of pixels in a screen ? | ||
| type="()"} | | type="()"} | ||
− | - Pixelation | + | - Pixelation |
+ | || Pixelation occurs when a bitmap image is enlarged | ||
- Colour | - Colour | ||
+ | || A bitmap image must store the colours of pixels | ||
+ Resolution | + Resolution | ||
− | - | + | - Bit depth |
+ | || The amount of bits available per pixels | ||
{What is meant by color depth ? | {What is meant by color depth ? | ||
| type="()"} | | type="()"} | ||
- The Number of pixels on screen | - The Number of pixels on screen | ||
− | || This is known as | + | || This is known as resolution |
+ The Number of colors that can be represented by an image | + The Number of colors that can be represented by an image | ||
- The size of the file | - The size of the file | ||
+ | || | ||
- How good the Image looks on a scale of 1 to 10 | - How good the Image looks on a scale of 1 to 10 | ||
|| What where you thinking? | || What where you thinking? | ||
Line 105: | Line 132: | ||
- Decreases | - Decreases | ||
|| Increasing resolution increases number of pixels and therefore increases the amount of data stored | || Increasing resolution increases number of pixels and therefore increases the amount of data stored | ||
+ | |||
+ | { How would the color white be represented in one pixel of an image with a 2 bit color depth? | ||
+ | |type="()"} | ||
+ | + 00 | ||
+ | - 01 | ||
+ | - 10 | ||
+ | - 11 | ||
+ | } | ||
+ | |||
+ | { Calculate the file size of an image with the resolution of 400x300 and a bit depth of 16 in bytes. | ||
+ | |type="{}"} | ||
+ | { 2400 } | ||
+ | || To calculate file size, multiply the number of pixels by the bit depth | ||
+ | |||
+ | { What is metadata? | ||
+ | |||
+ | | type="[]"} | ||
+ | + Information about the author of a file | ||
+ | - How big a file is | ||
+ | + Information about the file | ||
+ | - Pixels in a bitmap | ||
+ | || meta data is data about data, an example could be the author of the file. | ||
+ | } | ||
+ | |||
+ | { What are the problems with bitmap graphics? | ||
+ | | type="()"} | ||
+ | - Colour Depth | ||
+ | || Colour depth is the amount of colours available per pixel | ||
+ | + Pixelation | ||
+ | || Pixelation is when a bitmap becomes blurry when scaled up | ||
+ | - Resolution | ||
+ | - File size | ||
+ | |||
+ | { What are some benefits of vector graphics? | ||
+ | | type="[]"} | ||
+ | - No pixels | ||
+ | || All images have pixels. | ||
+ | + Reduced file size | ||
+ | + Stored as instructions | ||
+ | || It can be upscaled infinitely without losing quality | ||
+ | - Higher bit depth | ||
+ | |||
+ | { Calculate the file size of an image with a resolution of 1920x1080 and a bit depth of 16 bytes | ||
+ | |type="{}"} | ||
+ | { 4147200 } | ||
+ | || To calculate file size, multiply the number of pixels by the bit depth | ||
+ | |||
+ | { Which of these are examples of meta data? | ||
+ | | type="[]"} | ||
+ | +Location of the image | ||
+ | +The time the image was taken | ||
+ | -How many pixels | ||
+ | +Author of the image | ||
+ | || Remember, Meta data holds data about data. | ||
+ | } | ||
+ | |||
+ | { Why do bitmap images lose quality when enlarged? | ||
+ | | type="[]"} | ||
+ | +The pixels are stretched into larger blocks making the image look pixelated | ||
+ | -Pixels are lost | ||
+ | -The image gets smaller | ||
+ | } | ||
+ | |||
+ | { Why don't vector graphics lose quality when enlarged or made smaller? | ||
+ | | type="[]"} | ||
+ | -The colours don't change | ||
+ | +All the pixels are enlarged and made smaller by a scale factor so the image will retain the pixel sizes. | ||
+ | -The image is too big | ||
+ | } | ||
+ | |||
+ | { Calculate the file size of an image with a resolution of 1024x768 with a bit depth of 16, give your answer in Bytes | ||
+ | |type="{}"} | ||
+ | { 196608 } | ||
+ | || Remember that to calculate file size you multiply the pixels by the bit depth. Remember that the question might ask you to convert. | ||
+ | |||
+ | { What is the minimum file size of an image with with a 16x16 resolution and 4 colours. Give your answer in Bytes. | ||
+ | |type="{}"} | ||
+ | { 128 } | ||
+ | |||
+ | {Which of these are Vector image properties? | ||
+ | | type="[]"} | ||
+ | +The image is described by mathematical definitions | ||
+ | -The image loses quality when the size is changed | ||
+ | -The image has a larger file size | ||
+ | +The image has a smaller file size | ||
</quiz> | </quiz> |
Latest revision as of 08:35, 25 September 2020
Contents
Overview
CraigNDave
https://www.youtube.com/watch?v=uikzbe-9d40&list=PLCiOXwirraUBIKvhutnNnMkVTpQ_psPN2
Computer Science Tutor
https://www.youtube.com/watch?v=a3Y_ZvOr0K0&list=PL04uZ7242_M6O_6ITD6ncf7EonVHyBeCm&index=8
Definitions
Name | Definition |
---|---|
Bitmap image | Bitmap images are stored as a series of pixels. |
Pixel | A pixel is a single point in a graphic image with an assigned colour. Many of them on a screen are assigned a colour in a specific place to recreate a bitmap image. |
Colour Depth
Colour depth is either the number of bits used to indicate the colour of a single pixel, in a bitmap image, or the number of bits used for each colour component of a single pixel. This means the number of bits needed to code an image. For example an image will only need 1 bit colour depth for black and white, i.e. a 0 for white or 1 for black, such as the following image...
although if an image has 24 bit colour depth, it can code up to 16777216 colours. This uses a 24bit binary number to represent each pixel, and the highest value you can represent using 24bits is 16777215 + 1 for 0. such as the following image...
Resolution
Resolution is determined by the height and width of an image file, for example:
This square has a total of 10000 pixels because it is 100 pixels high and 100 wide. You multiply the height by the width. This image was downsized from a larger image to this resolution.
The image above is the same image but downsized to the larger resolution of 200 x 200. This resolution is double the previous image so it looks of equal quality even though it is double the resolution.
File Size
File Size of a bitmap file links nicely to this all as it is essentially the Colour Depth multiplied by the Resolution. This is because for every pixel there needs to be a colour assigned to it. Hence, an image, 100 pixels high, 500 pixels wide, with a colour depth of 24, bits would have the size of (100*500*24=) 1,200,000 bits or (100*500*24/8=) 150,000 bytes if it would be a bitmap image.
https://www.youtube.com/watch?v=3x64f1Qqjhs&list=PLCiOXwirraUBIKvhutnNnMkVTpQ_psPN2
MetaData
The file size can easily be calculated (see above) however additional data will also be stored as well as the data for each pixel. This is called MetaData. This could include information such as the width & height, file format, colour depth, location, author etc.
https://www.youtube.com/watch?v=E44bekOiHSU&list=PLCiOXwirraUBIKvhutnNnMkVTpQ_psPN2
Problems with Bitmap Graphics
One of the major problems with bitmap graphics is that when an image is zoomed into, you can see all of the pixels used for that image, hence some of the initial quality is lost, for example, here is a bitmap image when not zoomed in. This image is 100 x 100:
However, when enlarged, what's known as 'pixelation' begins to occur, for example, in this enlarged version of the previous image. The image can also become blurry due to pixelation, this image is 100 x 100 but is been displayed at 500 x 500:
Compared With Vector Graphics
Bitmaps are stored pixel by pixel However, in a vector graphic the image is stored by calculating the points, lines and shapes used to create the image. A drawing list is created to recreate the image. Vector graphics can be resized using mathematics so increasing the size has no effect on quality of the image.
The file size of a vector graphic can be significantly smaller than a bitmap. the drawing list is essentially the instructions to rebuild the image. However if you attempted to capture a real world photograph, you would essentially have so many shapes to represent the changes in colour that the file size might not be any smaller.
https://www.youtube.com/watch?v=LCz6IP4-Rlk&list=PLCiOXwirraUBIKvhutnNnMkVTpQ_psPN2
Revision Questions
try to add more questions on:
- file size calculations
- meta data
- problems with bitmaps
- benefits of vector graphics
Also '||' is the feedback for an answer, and could be greatly improved