Date post: | 19-Dec-2015 |
Category: |
Documents |
View: | 220 times |
Download: | 0 times |
Displaying colours Images on the web Different kinds of graphic imagesFile compressiongifs and jpegs Colours for the webExam questions
Digitising Media
3
The subtractive primaries (pigments)
Ink combines to black (dark
brown)
4
Colour-printing
Printers create colour by subtracting. Colour printers use Cyan Magenta Yellow blacK CMYK
Although black can be achieved by adding colours together, in fact, it’s four colour printing with black as a separate colour)
Reflectance
CMYK
5
The additive primary colours
Light combines to white
6
How monitors work
Monitors create colour by adding light. They use red, green
and blue light. RGB White is achieved by
adding red and blue and green together (shining a light on a wall)
Luminance
black
redwhite
green
blue
7
Putting them together(oversimplified)
Displaying colours Images on the web Different kinds of graphic imagesFile compressiongifs and jpegs Colours for the webExam questions
Digitising Media
9
Images Use the smallest file size
that gives a satisfactory image.
The right choice improves download characteristics and appearance
Choose the correct file types for images:
Different sorts of images should have different file types and some file types should not be used on the web
Img tags should have sizes (attributes of height and width) –
This improves the user experience by allowing the browser to render the page correctly even when the page is downloading
10
Image size vs. File size
For the web, when we consider download times, the issue is primarily file sizeLarge file sizes worsen users experiences of the web because they take a long time to download.
A quick-to-download page usually means that any images on it have been made quite small
The size of the image on the screen does not necessarily reflect the size of the file
Example
Displaying colours Images on the web Different kinds of graphic imagesFile compressiongifs and jpegs Colours for the webExam questions
Digitising Media
12
Two Kinds of Computer Graphics
Raster (‘bit maps’) – pixel by pixel description of the image – array (1-bit, 8-bit (usual), 24 or 32)
Vector – mathematically described images ('line from a to b' | 'a line through point a with slope c') described as ‘resolution independent graphics’
13
More about kinds of graphics
Paint packages –
create bitmapped images
another term: raster graphics
Scanning images create bitmaps as well. Other example: photographs in digital formats, air-brushed images
14
More about kinds of graphics
Draw packages – create vector graphics
lines, rectangles, circles mathematical / geometric objects
Resolution independent
Displaying colours Images on the web Different kinds of graphic imagesFile compressiongifs and jpegs Colours for the webExam questions
Digitising Media
16
To reduce file size,compression is needed
File sizes for transmission (internet) or storage can be largeA typical colour image (from a digital camera for example)
1024 x 768 pixels24-bit ‘true colour’
= 2.4 MbytesFor video
24 frames/second640 X 480 pixels24-bit colour
= 77 Gbytes/hour
17
File compression
Get rid of redundant information – file size gets smaller without loss of information. (restore the information at a later time if needed – for example, a long strip of solid colour, could be stored as a sequence of bits or stored in a more efficient manner
Other ways of compressing file information, loses information but information that we don’t notice being gone.
18
Two types of file compression
“lossless” – same amount of information, smaller file size (eliminate redundancy)
“lossy” – loss of information but we may not notice or care
Displaying colours Images on the web Different kinds of graphic imagesFile compressiongifs and jpegs Colours for the webExam questions
Digitising Media
20
GIFs
Especially effective at dealing with large horizontal bands of a single colour
256-colour (8-bit) images
LosslessGraphics Interchange Format, from Compuserve (patented)
21
JPEG (aka .jpg)
“Lossy” – it loses information, but if this loss is barely perceptible or not perceptible at all, a great significant reduction in file size can be achieved.
24-bit (16.7 million colours)
Joint Photographics Experts Group
22
jpeg vs gif
http://www.wfu.edu/~matthews/misc/jpg_vs_gif/JpgVsGif.html photo comparison and graphics comparison – image quality and file size
http://www.siriusweb.com/tutorials/gifvsjpg/graphics and photos comparisons
Jpeg for photos and other continuous toned images
Gifs for large swatches of single colours
23
Other forms for web
.png – a replacement (in some ways an improvement) on gif, patent-free with some nice technical properties.
.svg – scalable vector graphics – up or down to any size of image – small file size, additional processing load on client machine
_______________________________Avoid device-dependent formats unsuitable over the
Internet.bmp – limited to Windows.pict – limited to MAC
24
More about gif, png, jpeg
You can create interlaced gif and png images – when a low-resolution version of an image appears as soon as the image begins downloading. Similarly you can create progressive jpg, which have the same effect.
(-) The file size of the interlaced (or progressive) image is larger and takes longer to download(+) The user usually gets to see something of the image more quickly
25
Transparency in gifs pngs
Transparency is when you allow the background to show through. The logo on this page for example is a transparency
(Technically one colour on the palate is reserved, the browser (or other application) is instructed in displaying the image to show the colour of the background
You can’t achieve this with jpg. You can with gifs and pngs
26
Animated gifs
Animation is a sequence of images, shown sequential giving a sense of movement. Allowed in the gif format. (other formats don’t allow it)
(you can achieve animation in other ways – through Flash and through Java)
27
Sometimes animated gif are useful
28
Tools for compressing images- optimising graphics
These tools have the capability to compress jpg’s and gif’s. You get to see the quality of the image before you commit yourself to that level of compression, so you know the file size + the image quality
Choosing an appropriate balance of image quality and file size for the purposes that the image will be used
eg thumbnails
Paint Shop Pro is available on the Public Desktops
Displaying colours Images on the web Different kinds of graphic imagesFile compressiongifs and jpegs Colours for the web Exam questions
Digitising Media
30
Using the right colours for the web Different platforms show colours differently
– sometimes only a little, sometimes very differently
If you choose your colours for the web correctly, the differences between different platforms and different browsers will be very small
31
Web-safe colours
To avoid these problems, choose ‘browser-safe colours’, colours that look basically the same on different platforms.
(8 bit / hexadecimal colours)http://www.w3schools.com/html/html_colors.asp
32
How to designate colours
By name By number – hexadecimal
For details see:http://www.w3schools.com/html/html_colors.asp
For the Web via the internet, use browser-safe colours.
(different browsers and platforms may display colour values differently especially if one uses names.)
What names work?
What is a hexadecimal
?
33
Computer speak:Hexadecimal
Hexadecimal numbers use a base 16.Decimal use base 10 (‘deci’ means 10; ‘hex’ means 6 – ‘hexadeci’ 16)
Binary use base 2.
Why base 16? Human readable and useable. Easy to convert to binary (which is what machines read
and use)http://kb.indiana.edu/data/afdl.html
This is just an introduction to hex.
We’ll be going over this a couple of additional
times.
34
Hexadecimal colours
HTML colours are specified with three pairs of hex digits, preceded by a hash sign. Each pair of digits represents the quantity of red, green & blue that make up the colour. Thus:– #FFFFFF refers to white– #000000 refers to black– #FF0000 refers to red
There are lookup tables!
35
Anti-aliasing
Apparent smoothing out of the edges of images is called:Anti-aliasing Anti-aliasing
The 'jaggies'
36
Anti-aliasing (2)
Anti-aliasing – blend hues of the colours
Many graphics programs allow you to choose whether images should be anti-aliased
37
Dithering
Dithering can be used as a general way to create illusions of colours and shades – let’s it seem as if there are more colours or shade than there really are‘application dither’ occurs when an application
(PhotoShop, PaintShopPro … ) creates an image in a format like gif png-8 from a original with more colours
‘browser dither’ occurs when a web-browser using an 8-bit colour display (256 colours) shows an image with more colours.
38
To see for yourself:
Blow up something a fairly great amount. Eventually the underlying discontinuous range becomes visible.
39
Quick terminology review
Anti-aliasing – a way to create the illusion of a sharp edge (where in fact its actually jagged) by taking an number of intermediate colours
Dithering – a way to use a limited palate of colours to create a wider range of colours and tones (dithering is also a term in sound technology for a similar phenomenon)
40
Reference/resource/origin
For the images in this presentation:http://www.paris-pc-gis.com/MI_Enviro/Colors/
color_models.htm [accessed 26-10-04, last accessed 15-10-07]
http://www.rgbworld.com/color.html [accessed 26-10-04, last accessed 15-10-07]
http://www.help4web.net/webmaster/Color/BasicColorWheel.html [accessed 26-10-04, last accessed 15-10-07]
And on slides where they were presented with URL or copyright information
Displaying colours Images on the web Different kinds of graphic imagesFile compressiongifs and jpegs Colours for the web
Exam questions
Digitising Media
From the 2009 past exam paper Colours and images
(i) Monitors create colour by adding light. How many colours do monitors use? What are they? [1 mark]
(ii) Printers create colour by subtracting light. How many colours do printers use? What are they? [1 mark]
(iii) What is the meaning of hexadecimal? What colours do the following hexadecimal codes produce?
(1) #000000(2) #FFFFFF(3) #888888 [2 marks]
(iv) What would be a good file type for a photograph? [1 mark]
From the 2007 past exam paper:
(b) What colours are represented by the following hexadecimal codes:
#0000FF
#FFFFFF [1 mark]
(c) Explain the differences between bitmap and vector image formats. Explain the difference between a lossy and a lossless compression algorithm? [3 marks]
43
From the 2006 past exam paper:
(c) What colours are represented by the following hexadecimal codes:(i) #FF0000(ii) #222222(iii) #FFFFFF [2 marks]
(d) What are the differences between a GIF and a JPEG? When would a GIF be abetter choice of image format? When would a JPEG be a better choice? [3 marks]
44
Practical work on this
You’ll be doing practical work with image compression in the Terminal session in week 6.
45
On your own
In the textbook – read about other methods of digitising multi-media – sounds, moving images, sounds and images together
47