Weeks 3 and 4 Flashcards
how many colours can 2 bits hold
2^2 = 4
if an image is 400 by 300 pixels, and we use 1 byte of colour for each pixel, what is the file size
400x300x1byte = 120000 or 120 kilobytes
1 kilobyte is how many bytes
1000 bytes
is an image is 400 by 50 and uses 1 byte of colour, what is the file size
2000
What is the Subtractive model for colour used for
printing - ink applied to paper
what colours does the subtractive model have
cyan, magenta and yellow
how does the ink work in a subtractive model (in terms of white
ink when applied removes the white
what is the additive model used on
monitors
how does the additive model for colour work
adds light to a black background (unlike subtractive model which removes white by adding colour to the page)
how many colours can True Colour represent
2^24 or around 16 million different colours
2^8 = 256 shades of red
2^8 green
2^8 blue
how many bytes are needed to represent true colour
3 bytes - 1 byte for each colour (rgb)
what are the two ways to represent true colour
RGB - amount of Red, amount of Green, amount of Blue>
uses DECIMAL NUMBER system
and Hexadecimal
<255, 0, 0>
all red no green or blue in rgb true colour
0 in RGB represents
no colour
255 in RGB represents
most colour allowed
<0, 255, 0>
most green rgb true colour
<100,100,100>
middle amounts of rgb - gray
<50, 0, 200>
little red, lot of blue, dark blue
<200, 0, 50>
little blue lot of red
dark red
how is hex colour represented (what digits and format)
#RRGGBB RR are the digit place holders 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
09 in hex is
9
0B in hex is
11
0F in hex is
15
FF in hex is
16^115+16^015 = 255
NOT 15*15
how to determine hex digits
multiply each digit by 16^(the digit’s placehoder)
FF0000
red
00FF00
green
000000
black
FFFFFF
white
<0,0,0> in hex
<0,0,0> and #000000?
<255,0,255> in hex
and #FF00FF
<66,0,99> in hex
420063
43B390 in rgb
<67,179,144>
0A0F09
<10,15,09>
what is an example of when you need fewer colours
clipart
what is an example of a bitmapped image
an icon (firefox)
how large are icons usually
32x32 pixels
what is interpolation
when the computer adds new pixels and guesses on the colour to colour and the new pixels
when does interpolation happen
when images are enlarged (resampled
what happens to the image itself and the file size when you enlarge an image
it becomes larger file size and the bitmapped edges become jagged and the image becomes distorted
all images from ___ and ___ are bitmapped
scanners and digital cameras
what is another name for bitmapped images
raster graphics
bitmapped images are___ dependent, meaning
resolution dependant meaning that a bitmapped image on a lower resolution screen will appear LARGER than on a higher resolution screen
Bitmapped image on a 640 by 480 screen (lower resolution) appear larger than on a 1280 by 1024 screen (higher resolution)
what are common bitmap formats
BMP (has little compression, makes big files!) GIF JPEG, JPG PNG PICT (Macintosh) PCX TIFF AFPHOTO (Affinity Photo) PSD (Adobe Photoshop)
what are popular bitmap editing tools/software packages
Microsoft Paint Adobe Photoshop Affinity Photo Corel Photo-Paint Corel Paint Shop Pro The Gimp
what is a vector image made up of
individual scalable objects
what are the objects in vector graphics definded by
mathematical equations
objects consist of lines, curves and shapes…
are vector graphics distorted as the image is enlarged?
no
do most browsers display vector graphics?
Most browsers don’t display vector graphics without a plug in
vector graphics can only be used with __ not __
drawings not photographs
what is an example of a file type that is uses vector graphics
do vector graphics have smaller or larger file size than the same img stored as a bitmap?
Usually vector graphic image has a smaller file size than the same image stored as a bitmap.
it is __ to turn a vector into bitmapped and ___ to turn bitmapped into a vector
easy, hard
what are vectors great for
logos because
Can be scaled down for business card
Can be scaled up for a trade show poster
what are some common vector file formats
AI (Adobe Illustrator) CDR (CorelDRAW) CMX (Corel Exchange) CGM Computer Graphics Metafile DXF AutoCAD WMF Windows Metafile EPS (Encapsulated PostScript) PDF
what are popular vector drawing programs/software packages
Adobe Illustrator Affinity Designer CorelDRAW Xara Xtreme Serif DrawPlus
how to calculate the size of an image
Sampling*quantize
Length (px) * width (px) * Colour bit depth(bytes)
total pixels (sampling) *Colour Bit Depth(Quantize)
too many colours/too large a file size will cause what in terms of your webpage
it will take ur webpage too long to load and therefore people might leave right away
1KiloBytes =
1000Bytes (1024 but 1000 for exam)
1 Megabyte =
1000 kilobytes
1 gigabyte =
1000 megabytes
1 terabyte =
1000 gigabytes
what is the byte higherarchy
bit - byte - kilobyte - megabyte - gigabyte - terabyte
When printing in a flyer/ magazine, what matters/ does not matter
file size does not matter
quality of the image matters
what is the smallest dpi at which the image must be printed
300 dpi
for displaying an image in a webpage what is important/not important
file size is important and so is quality but you want to get best quality with smallest file size because bigger file = longer download
what are two ways to make the image file size smaller
compress the image (using tricks to make the file size smaller without making the img lower quality) or make the image smaller (less pixels but changes the size)
what does the download time depend on that you cannot control
client’s connect speed
that you cant control
what are the two types of compression
lossless
and lossy
what is lossless compression
NO INFORMATION IS LOST
Compress the original bits and bytes into less bits and bytes without losing any of the original information about the picture
so when reopen the file, all the original information about the picture is still there!
what is lossy compression
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 IS DISCARDED
each different type of image file format represents…
the use of a different compression algorithm
common compressed image file formats that are acceptable on the world wide web are
gif, jpg/jpeg, png
uncompressed file formats
bmp (windows)
raw (common digital cameras)
Select the valid RGB colour code that would best represent a shade that the water colour might be on a tropical island (e.g. a turquoise type colour).
A. (200, 200, 5)
B. (150, 150, 150)
C. (4, 199, 199)
D. (0, 302, 302)
E. Both C) and D) are valid shades of colours you might see for the water at a beautiful tropical beach.
C
d does not have valid numbers
Select the hexadecimal colour code(s) that represent valid shades of gray (check all that apply). A. #252525 B. #330333 C. #4g4g4g D. #9a9a9a E. #720720
A, D
c does not have valid digits
(5, 3, 218) in hex is
blue
ee0000
red
(64, 0, 0)
dark red
(56, 56, 56)
dark gray
c5c5c5
light gray
If there are boxes with “X” in an Indexed Colour image palette, that means:
A. the image has too many colours and some will have to be modified
B. some of the colour shades in the image are too similar
C. the image does not require as many colours as the palette can support so the image won’t save properly
D. the image does not require as many colours as the palette can support and this is perfectly acceptable
D
Indicate which of the following statements is NOT true about vector graphics.
A. Vector graphics are defined by mathematical shapes and curves.
B. Vector graphics are clear for images that contain up to 8 colour shades, and blurry in images with higher numbers of colour shades.
C. Vector graphics can be made at any size and later enlarged or shrunk as needed without loss of quality.
D. Vector graphic files usually have a smaller file size than the same image stored as a bitmap.
B
An image is 2000 pixels by 1000 pixels and is true colour. The filesize of this image is ___ bytes.
6000000
There is an image that is 2.3 MB. What is the approximate number of kilobytes in this image? A. 0.0023 B. 2 C. 2300 D. 2300000
2300
A printed image, that is 3 inches by 4 inches, is scanned into a computer with 100 DPI as true colour. Calculate the approximate filesize of this image, assuming no compression is done. A. 120 kilobytes B. 0.36 gigabytes C. 0.36 megabytes D. 360 megabytes
360,000 bytes –> 360 kilobytes –> 0.36 megabytes
true or false Lossy compression will remove some of the original information stored for an image. That information/level of quality can never be retrieved again after the compression.
true
Indicate which of the following options are needed when connecting to a server using FTP or SFTP .
A. Username B. Host/server name C. Port number D. Password not theurl that you type into the browser address bar
Indicate which of the image formats is based on biological discoveries related to the human eye (check all that apply). A. JPG B. PNG-8 C. PNG-24 / PNG-32 D. GIF
JPG
The number of bits needed to store the word queen in ASCII is __ bits.
Using the Huffman Code chart shown in class, storing queen in Huffman would take __ bits.
40
26
Indicate which of the following statements are true (check all that apply).
A. GIFs support up to 256 colours.
B. GIFs do a great job when representing a gradient, such as the orange and red and yellow colours blending into each other in a sunset.
C. GIFs use a lossy compression.
D. GIFs can be dithered to create the illusion of additional colours in the image
A and B
GIFs can be saved such that the image will appear in a series of passes with alternating lines of pixels loading, and the gaps being filled in later on. This process is called____.
interlacing
Which of the following statements are true? (check all that apply)
A. JPGs and GIFs support dithering, but PNGs do not.
B. JPGs do interlacing.
C. JPGs allow for animated images.
D. There is software that saves an image as a JPG and will allow you to control the amount of compression/loss of quality.
D
JPGs are not good for images with clean crisp lines.
True
False
true
Indicate which of the following statements are true (check all that apply).
A. All PNGs support full transparency.
B. PNG-8 supports up to 256 colours.
C. PNG-32 supports up to 2^32 (2 to the exponent 32) colours.
D. In the 90s, PNGs were licensed so users had to pay a small fee (1-2 cents) each time they created a GIF.
B
for D it’s the opposite, PNG’s we’re created due to licensing issues with GIF
PNGs were created as a response to licensing issues with __ in the 90s.
gif
We inserted 2 different images of a girl onto a powerpoint slide as shown below. What do you know for sure about the image under the text Girl B?
(transparent background)
A. The image under the text Girl B must have been stored as a JPG
B. The image under the text Girl B must have been stored as a PNG or GIF
B
Indicate which of the following statements are true (check all that apply).
A. PNG-32 support full transparency.
B. PNG-8 only supports 8 colours
C. PNGs were created in response to licensing issues with GIFs in the 90s
D. ALl PNGs use lossless compression
ACD
What does SFTP Stand for
Secure File Transfer Protocal
What does SFTP do
It moves files from 1 location to another (computer - web server)
What is a web server
A computer that sends or serves up web pages
What are some advantages of a web server
Connected, always available and well maintained
Connected - computer is on all the time and connected to the internet
Always connected Elena’s that it since will never get turned off your website will always be available
Well maintained - the people running the server will take care of security and computer maintenance issues
What is a client
Computer requesting to visit the web page
What is are some examples of a fiile transfer program
Firezilla or WinSCP
What code makes a file transfer program thing available to the internet
0755
What does RAW mean in terms of compression
RAW has no compression at all meaning that it is a large file
It stores info about each pixel one at a time
An image that is 100 by 200 pixels that is RAW will store 60000 bytes of information
What is a strategy for using colour to compress an image
You can break image into parts where you assign each part to a certain colour
This would be lossless
This strategy is best with regular shapes (in reality gif compressions are a lot more complicated
What is another way to compress an image other than assigning each part a colour
Looking for patterns and making a decoding hash table eg
0=1234
1=19999
2=3332
Compressing words - texts in a dictionary ASCII
How is ASCII code represented in terms of bits
Each letter is represented using 8 bits or 1 byte
What is Huffman Coding (compare to ACII)
Rather than ASCII (each letter is 8bits or 1 byte) use the least number of bits for common letters and more bits for less common letters
What did the designer of JPEG compression algorithm realize about the human eye
That the human eye is more sensitive to brightness details than to fine color details.
How does the JPEG compression algorithm work
If it finds two adjacent pixels with very similar colors, it will store both those pixels with the same color and discard the other color.
What are the three file formats we will look at
GIF
PNG
JPG
What determines the best file format for an image
The type of image that we are trying to compress will best determine the best file format to use
What does GIF stand for
Graphic INterchange format
GIFS work cross platform t/f
True
GIFS are widely used across the World Wide Web t/f
True
What amount of colour do GIFS support
8 bit colour
What are GIFS good or not good for
Good for clip art logos animations
Not good for photos or like paintings
How do GIFS work
They look for large blocks of area that all have the same colour
Saving an image with 24 bit colour as a gif will do what to the quality
It will lower the quality the first time you compress it
Are gifs lossy or lossless
Lossless
Do Gifs allow for transparency?
Yes - one colour transparency, meaning it allows for transparency of one colour
What is one colour transparency and what kind of file format allows for it
Allows for transparency on once colour and GIFS allow for this
How does animation work with gifs
Allows for animation
Don’t need a plug in for gif animation!
Works in all browsers, universal format!
What is dithering
Putting two colours next to eachother to create illusion of another colour
Dithering is the process of juxtaposing pixels of two colors to create the illusion that a third color is present.
Do gifs allow dithering
Yes
Gifs do not allow dithering
No, gifs do allow dithering
How do gifs use dithering
If ur image has more than 256 colours, it uses dithering
In a gif, you can reduce the number of colors in a GIF and choose options to control the way colors dither in the application or in a browser.
What is interlacing
process by which the image is drawn in a series of passes rather than all at the same time (file size bigger)
Do gifs use interlacing
Yes
Why use interlacing
Interlacing lets you have a feel for the whole picture, you don’t have to wait around to see it download (good for dial up connections)
How do gifs use compression
By reducing the number of colours in the image
What does JPEG stand for
Joint Photographic Experts Group
Where are JPGs used
Widely used on the World Wide Web
Are JPG cross platform?
Yes works on Mac , windows
How many bits of colour do JPGs support
24 bit colour
3 byte
What are jpgs good for
Photos, computer games, screenshots, stills from a movie etc
Best blends of colour, softer shadow effects, subtle changes in colour
What are jpgs not good for
Well defined lines or sharp changes in colour
Is JPG lossy or lossless
Lossy
What kind data does the jpg discard
Because jpg is lossy it discards more data about colours than about brightness
Onto all info in original image is preserved
do JPG degrade the image quality
yes
How does JPG compression work
Compression is achieved by ‘forgetting’ certain details about the image, which the JPG will then try to fill in later when it is being displayed
can you control the amount of info lost in a JPG compression
Degree of amount of information LOST (lossyness) can be varied by adjusting compression parameters. (controlled by you)
quality of image is _____ to the amount of compression
Inversely proportional
A higher image quality setting (has a lower compression value) results in less data being discarded.
can a JPG use dithering
no because you have the full palette, so no need to combine colours
can a JPG use interlacing
no (recall that interlacing gives u the gist of the image before download finishes)
can a JPG do Animation
no
can a jpg have transparency
no
why were PNGs created
Created specifically because of licensing issues with GIFs in the 90s
what kind of compression does PNG use
lossless
what are the three versions of png
png-8, png-24, png-32
how is png pronoucned
PING
PNG-8 are similar to ___ in what ways
allow 25 colours and one transparent colour, lossless
how are PNG-8 and ___ similar
Storing of colours is more efficient in PNG files than GIFS thus PNG-8 files might be SMALLER than their GIF counterparts (this is software dependent)
PNG-24 and PNG-32
allow for 24 bit colour
allow different levels of transparency (good for shadows) and allows for transparency on each pixel
however only png 32 allows for a full pallette of colour AND transparency. if you want varying levels of transparency with PNG-24, you will lose some colour
PNG-24 and PNG-32 will almost always have a ___ file size than a JPG
larger - jpg = lossy while PNG are lossless
difference between PNG-24 and PNG-32
PNG 32 allows for a full palette with full transparency but with PNG 24 if you want varying levels transparency, you will lose some colours
Type of compression for each file type (GIF, JPG, 3PNGs)
gif = lossless png = lossless jpeg = lossy
GIF, JPG, 3PNGs are well supported in which browsers
GIF, JPG, PNG-8 all browsers
png-24, png-32 = not on IE6
transparency allowed in each file type
gif = one colour only jpg = no png-8 = one colour png-24 = varying levels of opacity and transparency with loss of colour that comes with it png-32 = full transparency with no loss of colour
what each file type is best for
gif, png-8 = logos, cartoons,, drawings and animations for gifs but not png
jpg = photo
png-24, png-32 = photograph images with a need for transparency
which file types allow animation
gifs only not png or jpg
which file types do dithering
png 8 and gifs
not png24 or 32 or jpg
which file types do interlacing
gifs and png 8
not jpeg or png24 or 32
what are the requirements for the shape of the image for each file type
jpg must be rectangular