Transcript Displaying colours Images on the web Different kinds of graphic

Digitising Media
Displaying colours
Images on the web
Different kinds of graphic
images
File compression
gifs and jpegs
Colours for the web
Exam questions
The subtractive primaries
(pigments)
Ink combines to
black (dark brown)
3
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
4
The additive primary colours
Light combines to
white
5
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
red
white
green
blue
6
Putting them together
(oversimplified)
7
Digitising Media
Displaying colours
Images on the web
Different kinds of graphic
images
File compression
gifs and jpegs
Colours for the web
Exam questions
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:
 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
Different sorts of images
should have different file types
and some file types should not
be used on the web
9
Image size
vs. File size
For the web, when we consider download times,
the issue is primarily file size
Large 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
10
Digitising Media
Displaying colours
Images on the web
Different kinds of graphic
images
File compression
gifs and jpegs
Colours for the web
Exam questions
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’
12
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, airbrushed images
13
More about kinds of graphics
 Draw packages –
create vector graphics
lines, rectangles, circles
 mathematical / geometric objects
 Resolution independent
14
Digitising Media
Displaying colours
Images on the web
Different kinds of graphic
images
File compression
gifs and jpegs
Colours for the web
Exam questions
To reduce file size,
compression is needed
File sizes for transmission (internet) or storage can be large
A typical colour image (from a digital camera for example)
1024 x 768 pixels
24-bit ‘true colour’
= 2.4 Mbytes
For video
24 frames/second
640 X 480 pixels
24-bit colour
= 77 Gbytes/hour
16
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.
17
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
18
Digitising Media
Displaying colours
Images on the web
Different kinds of graphic
images
File compression
gifs and jpegs
Colours for the web
Exam questions
GIFs
Especially effective at dealing with large
horizontal bands of a single colour
256-colour (8-bit) images
Lossless
Graphics Interchange Format, from Compuserve (patented)
20
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
21
jpeg vs gif
http://www.wfu.edu/~matthews/misc/jpg_vs_gif/Jpg
VsGif.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
22
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
23
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
quickly
more
24
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
25
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)
26
Sometimes animated gif are useful
27
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
28
Digitising Media
Displaying colours
Images on the web
Different kinds of graphic
images
File compression
gifs and jpegs
Colours for the web
Exam questions
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
30
Web-safe colours
To avoid these problems, choose ‘browsersafe colours’, colours that look basically
the same on different platforms.
(8 bit / hexadecimal colours)
http://www.w3schools.com/html/html_colors.asp
31
How to designate colours
What names work?
By name
By number – hexadecimal
For details see:
What is a
hexadecimal
?
http://www.w3schools.com/html/html_colors.asp
For the Web via the internet, use browsersafe colours.
(different browsers and platforms may display colour
values differently especially if one uses names.)
32
Computer speak:
Hexadecimal
This is just an
introduction to hex.
We’ll be going over this
a couple of additional
times.
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
33
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!
34
Anti-aliasing
Apparent smoothing out
of the edges of
images is called:
Anti-aliasing
Anti-aliasing
The 'jaggies'
35
Anti-aliasing (2)
 Anti-aliasing – blend
hues of the colours
Many graphics
programs allow you to
choose whether
images should be
anti-aliased
36
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 8bit colour display (256 colours) shows an image with
more colours.
37
To see for yourself:
Blow up something a
fairly great amount.
Eventually the
underlying
discontinuous range
becomes visible.
38
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)
39
Reference/resource/origin
For the images in this presentation:
http://www.paris-pcgis.com/MI_Enviro/Colors/color_models.htm [accessed 2610-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
40
Digitising Media
Displaying colours
Images on the web
Different kinds of graphic
images
File compression
gifs and jpegs
Colours for the web
Exam questions
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 a
better 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