Week 3 Flashcards
1
Q
Once you know how many pieces your image will be broken into, what process comes next?
A
A process called quantizing assigns 0’s or 1’s to each pixel to represent certain colours. In this step you figure out how many colours you will have available to represent each pixel.
2
Q
What images made up of?
A
Pixels, that are assigned colours that are arranged in a way to make an image
3
Q
Assume for each pixel we have 1 bit to represent the colour. How many colours can you represent?
A
1 bit can hold either 0 or 1
◦ 0 could be white
◦ 1 could be black
Thus 1 bit allows for 2 colours, usually black and white (2^1 →2)
4
Q
How many colours can 2 bit hold?
A
2^2 →4
◦ 00 →White
◦ 01 → Light Gray
◦ 10 → Dark Gray
◦ 11 → Black
5
Q
Can 1 bit colours be realistic?
A
YES
6
Q
How many colours does 4 bits give us?
A
2^4 → 16 Shades (of grey usually)
0000= black
1111= white
7
Q
If an image was 400 pixels by 300 pixels and we used 1 byte (8 bits)
for each pixel, what would the file size be?
A
400 X 300 X 1 byte → 120,000 bytes or ~120 kilobytes
8
Q
What are the 2 models for colour images?
A
- Subtractive Model - CMYK
- Additive Model - RGB
9
Q
What is the subtractive model CMYK and when is it used?
A
- Used for printing
- Ink applied to paper
- Primary Colours → Cyan, Magenta and Yellow
- Ink when applied removes (subtracts) the white
10
Q
What is the additive model RGB and when is it used?
A
- Used on monitors
- “Adding” light to a black background (the monitor)
- Primary Colours → Red, Green and Blue
11
Q
What is an issue with CMYK?
A
Issue: if you’re only using CMY, you never really achieve a true black which is why K stands for the black (ink)
When you buy ink cartridges you also buy black
12
Q
How can we represent true colour?
A
Can represent 2^24 colours → about 16 million different colours
2^ 24 = 2^8 X 2^8 X 2^8 = 256 shades of red, X 256 shades of green X 256 shades of blue
13
Q
How many bytes do we need for true colour?
A
Need 3 bytes (remember: 1 byte=8 bits) for True Colour (1 byte for red, 1 byte for green, 1 byte for blue)
14
Q
What are the 2 ways to encode true colour?
A
- RGB
- Hexadecimal code
15
Q
What is RGB?
A
Amount of Red, amount of Green, amount of Blue in DECIMAL NUMBER
16
Q
What are examples of important colours in RGB?
A
Where 0 is no amount and 255 is the
most allowed
◦ <255, 0, 0> → the most of red, no green, no blue
◦ <0, 255, 0> → the most green, no red, no blue
◦ <100,100,100> → equal middle
amounts of red, green and blue (grey)
◦ <50, 0, 200> → a little red, a lot of blue (blueish purple)
◦ <200, 0, 50> → a lot of red, a little blue (reddish purple)
17
Q
What is hexadecimal code (for colours)?
A
RRGGBB: RR are the digit placeholders for the amount of red, GG amount of Green, BB amount of Blue
◦ Amounts are counted in hexadecimal with these digits: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F
◦ 00 still means 0
◦ Hex FF= Decimal 255
18
Q
What are some important hex to decimal converstions?
A
Hex to Dec → 00=0, 01=1, 02=2, 03=3, 04=4, 05=5, 06=6, 07=7, 08=8, 09=9, 0A=10, 0B=11, 0C=12, 0D=13, 0E=14, 0F=15, 10=16, 11=17,….. FD=253, FE=254, FF=255.
19
Q
What are examples of colours in hexadecimal code?
A
◦ #FF0000 → Red
◦ #00FF00 →Green
◦ #000000 → Black
20
Q
In hexadecimal what colours are the absence of all colour, and the presence of all colours?
A
Absence: black
Presence: white
21
Q
What is the hex code for white?
A
FFFFFF
22
Q
Are these colours the same: <0,0,0> and #000000?
A
Yes both colour black
23
Q
Are these colours the same: <9,8,7> and #090807?
A
Yes, dark dark grey
24
Q
What is <10,15,09> in hex?
A
0A0F09
25
Are these the same colour: <255,0,255> and #FF00FF?
Yes, bright purple
26
Are these the same colour: <66,0,99> and #660099?
No, decimal 66 and decimal 99 are not the same as 66 and 99 in hex. Two different shades of purple
27
Can you represent the same number
of colours using Hex as using RGB?
Yes. Still get 256 shades of red, green, blue each: 16 million colours
They both represent from 0 to 255
28
Roughly, what is the maximum number of colours the human eye can detect?
Less than 10 million, which is why we use 3 bytes (1 byte per colour) because we can create enough shades on the computer
29
What is indexed colour?
- Not true colour
- Used when we don't need 16 million colours (lots of info to store if it's not even necessary)
- Indexed colour is an index that maps to a group of colours we plan to use
30
What types of images don't need a full palette of colours?
Scenerys need colour but things like clip art, cartoon type image, icon, don't always need 16 million colours and can use index instead
31
How many colours does index allow?
2^8=256 different colours
32
What image bit depth does index have?
8 (1 byte/8bits of colour you're allowed to have)
33
Does index have every single colour possible you want on the "pallette"?
No we only index the colours we need
Ex: if we will never use purple in img then don't need to include it in the index of colours, if pic is made mostly of orange, then palette will have more shades of orange
34
Why may an index palette have boxes at the bottom that appear to have no colours in them?
Pictures that didn't even need 256 colours, therefore empty, doesn't even use in palette
35
Can index colour look good even though its only 256 colours compared to 16 million?
Still looks very good
36
How does index colour work?
Combine dots in a way to make all the shades needed in order to get the nuances of the picture
37
With how many bits of colour do shades start to get muddy?
5 bits/4 bits
38
What is the colour #FFFFFF?
Presence of all colour: white
39
What is the colour #00FF00?
Bright green
40
What is the colour #FAFAFA?
Light grey
41
What is the colour <0,0,255>?
Bright blue
42
What is the colour <0,0,0>?
Absence of colour: black
43
What is the colour <14,14,14>?
Dark grey
44
What is the colour <125,125,125>?
Medium grey
45
What are the 2 generalizations for images?
1. Bitmapped images
2. Vector graphics
46
What are bitmapped graphic images?
Image consists of pixels in a grid
47
What are examples of bitmapped images?
- Icons are an example of a bitmapped image
- Icons are usually 32 pixels by 32 pixels
48
What happens when bitmapped images are enlarged (resampled)?
The computer adds new pixels
and guesses on the colour to colour the new pixels (called INTERPOLATION) based on surrounding pixels
- Bitmapped images edges become jagged
49
What are bitmapped images also called?
Raster graphics
50
What are bitmapped images dependent on?
Are resolution dependent:
◦ Bitmapped image on a 640 by 480
screen (lower resolution) appear larger than on a 1280 by 1024 screen
(higher resolution)
51
What happens when bitmapped images are enlarged?
◦ Have larger file size than original
◦ Become distorted and pixelated
52
What types of images are all images from scanners and digital cameras?
Bitmapped images
53
What are common bitmap file formats?
- BMP (has little compression, makes big files!)
- GIF
- JPEG, JPG
- PNG
- PICT (Macintosh)
- PCX
- TIFF
- AFPHOTO (Affinity Photo)
- PSD (Adobe Photoshop)
54
What are some popular bitmap editing tools/software packages?
- Microsoft Paint
- Adobe Photoshop
- Affinity Photo
- Corel Photo-Paint
- Corel Paint Shop Pro
- The Gimp
55
What are vector graphics?
- Vector image is made up of individual, scalable objects.
- Objects are defined by mathematical equations
- Objects consist of lines, curves and shapes
56
What happens to vector graphics as they become enlarged?
- No distortion as image is enlarged
- Still has crisp clean lines.
- Always get perfect representation of it as it was at its smaller size because its just mathematical equations being recalculated to different sizes
57
What is an issue with vector graphics?
Most browsers don’t display vector graphics without a plug in (this is changing such as HTML 5)
58
What can vector graphics be used for?
Only can be used with drawings and icons, not photographs because images are of real things that aren't made up of mathematic formulas
59
What takes up smaller space: vector graphics or images stored as bitmap?
Usually vector graphic image has a smaller file size than the same image stored as a bitmap.
Don't have issues with rugged edges like you get with bitmap
60
Why are vector images great for logos?
- Can be scaled down for business card
- Can be scaled up for a trade show poster
61
What are PDF files an example of?
Vector graphics
Texts are vector but images in PDF aren't, they're bitmapped
62
Does MS Paint use bitmapped or vector graphics?
Bitmapped. If you type something in text and enlarge the text it become pixelated
63
Does Affinity use vector graphics?
Yes a lot of the layers you use in Affinity will most likely be vector graphic (ex.text)
64
What happens when you flatten a document in Affinity?
When you see the command “Document>Flatten” in Affinity Photo, it is changing your Vector layers into a one flat Bitmapped layer!
65
What happens if you resize a flattened document?
Get pixelated, don't have the same crisp clean lines because you turned it into a bitmapped layer
66
T or F: You can convert a vector graphic image into a bitmapped image easily but you cannot easily
convert a bitmapped image into a vector graphic image.
True, you can save a vector graphic as gif, png, jpeg which turns it into a bitmapped image
67
T or F: You can convert a bitmapped image into a vector graphic easily but you cannot easily convert a
vector graphic image into a bitmapped image.
False: you can't take photograph from your camera and turn it into a bunch of mathematical formulas that can resize up. Takes lots of work and effort to
68
Why is it important that photos on websites load quickly?
- Can lose viewers from how long they have to wait
- Still important but was more an issue back when modems were being used
69
How do you make sure files download quickly?
Especially with how many people are on the internet, you want to make sure your files are as small as possible
70
Why do images take long to download?
Large file size
71
How do you figure out how many bytes one large picture in true colour (224 colours) would take up?
- Total Numbers of pixels (Sampling) * Colour Big Depth (Quantize)
- Length (px) * width (px) * Colour bit depth(bytes)
72
Assume we will have a picture that is: 1600 pixels by 1200 pixels, each pixel will need 3 bytes (8 bits for red, 8 bits for green, 8 bits for blue) to represent the colour of each pixel . How many bytes, kilobyte and megabytes is the image?
1200x1600=1,920,000 pixels
each pixel gets 3 bytes for colour= 1,920,000x3=5,760,000 bytes
5,760,000/1024=5625 Kilobytes
5625/1024=5.5 MBytes
73
What does a .raw extension mean?
It's uncompressed
74
What are the units of measure for file size?
- 1 KB = 1024 B
- 1 MB = 1024 KB
- 1 GB = 1024 MB
- 1 TB = 1024 GB
* Some people use 1000 for these conversions CAN DIVIDE BY 1000 FOR EXAM
75
What do we need to keep in mind if we're using image for printing in a flyer or magazine?
- File size doesn’t matter
- Most important issue is the quality of the image!
- Image will be printed with at least 300dpi
76
What do we need to keep in mind if we're using image for displaying in a web page?
- File size is very important
- Bigger files take longer to download
- Quality is important too but want to try to get best quality with smallest file size.
77
How long will it take for a 5.5MB image to download if the client is using high speed connect at
1500 kilobits/ second?
33 seconds
78
How long will it take for a 5.5MB image to download if the client is on a modem that is 56 kilobits per second?
860 seconds or 14.33 minutes
79
How does downloading and internet speed relate to pipes?
- If you have a large pipe you can push more water through it
- If you have a very high speed internet connection, you can push more bits through it
- If pipe is small, you can't push as much
- Same with internet speed, you push as many bits
80
How long will it take for a 5.5MB image to download if the client is on a modem that is 28.8 kilobits per second?
1672 seconds or 28.66 minutes
81
On websites, what are concerns for image quality and file size?
- To be the “appropriate size” for our page, in terms of proportion
- Image to look good (“high quality”)
- To download quickly
82
How can images on websites download quickly but still be appropriate size?
WE NEED TO MAKE OUR IMAGE
FILES SMALLER BUT OUR IMAGE TO
STILL LOOK GOOD!
83
What is the easiest way to reduce file size? What are issues with this?
- To just size down an image to take up less pixels
- Image size isn’t appropriate
-Doesn’t look good
-BUT it does download faster because the image is smaller
84
What are the 2 options to make file sizes smaller?
1. Make the image be physically smaller → LESS PIXELS
2. Compress the image file
85
What happens when you make an image to be physically smaller?
Will change the size it is displayed
at on the screen
- Ex: 100 pixel by 100 image pixel (30KB) is smaller than a 200 pixel by 200 pixel image (118KB)
Not a great method bc you don't always want ur pictures to be small
86
What happens when you compress the image file?
Use tricks to make file smaller without losing the quality of the image or the size (in pixels of the image)
- Still 200 pixels by 200 pixels but the file size is smaller than the original
87
What do some computer science PhD students dedicate their studies to?
Finding new tools, tricks algorithms to compress images so that they're physically the same size in pixels but file size is reduced significantly so that downloading doesn't take as long
88
What is the key goal with compression?
Compress as much as you can
WITHOUT sacrificing quality (losing
information)!
89
What are the 2 types of compression?
1. Lossless
2. Lossy
90
What is lossless compression?
◦ Compress the original bits and bytes into less bits and bytes without losing any of the original info about the picture
◦ When we reopen the file, all the original info about the picture is still there!
◦ NO INFORMATION IS LOST (colours, details)
91
What is lossy compression?
- When compression occurs, some of the original info is lost (and quality)
◦ Selected portions of the image are discarded but the selected portions are the ones that will be the ones that least missed or noticed
◦ CANNOT GET THIS INFO BACK ONCE IT'S DISCARDED
92
What are real life comparisons to lossless and lossy compression?
Lossless: squish ball can squished down and pushed through a pipe and come back out the other end the same
Lossy: taking orange and pushing through pipe, needed to be sliced in half and loses it's juice, most of orange is there but some of og info is lost
93
What are the differences between lossless and lossy?
Lossless:
- Don't lose quality
- Don't get as good compression because you're not giving anything up
Lossy:
- Lose quality and og image info
- Get better compression
94
What does each different type of image file format represents the use of?
A different compression algorithm
95
What are the 3 common compressed image file formats that are acceptable on the World Wide Web?
- gif
- jpg, jpeg
- png
96
What are examples of uncompressed file formats?
- bmp (for Windows)
- raw (common on digital cameras)
