1. Adolf Knoll National Library of the Czech Republic adolf.knoll@nkp.cz
Unit no. 2 Digital Image
Adolf Knoll
National Library of the Czech Republic
© Adolf Knoll, National Library of the Czech Republic

2. Learning objectives
After the completion of this unit the learner will be able:
To understand the composition of the digital image and its main parameters:
Resolution
Colours
Compression
Formats
To take his/her own decisions when using the digital image

3. Persistence
How long small spots continue to emit light after the beam is moved. How long it takes to the emitted light from the screen to decay to one-tenth of its original intensity.
Lower persistence requires high refresh rate & it is good for animation
High persistence is useful for displaying highly complex static picture.
Graphics monitors are usually constructed with 10 to 60 microseconds.

4. Resolution
Intensity distribution
Resolution is the number of pointes per inch or centimeter that can be plotted horizontally & vertically.
The smaller the spot size, the higher the resolution.
The higher the resolution, the better is the graphics system
High quality resolution is 1280x1024
The intensity distribution of spots on the screen have Gaussian shape.
Adjacent points will appear distinct as long as their separation is greater than the diameter at which each spot has intensity of about 60% of that at the center of the spot.

5. Addressability
Addressability is a measure of the spacing between the centers of vertical and horizontal lines.
The picture on a screen consists of intensified points.
The smallest addressable point on the screen is called pixel or picture element
In graphics mode there are 800x600

6. When we zoom the image, its structure starts to appear.
We can see that the image consists of elements.
Such an image is called RASTER IMAGE or BITMAP.
Each element has its own colour

7. However, some images do not seem to consist of these elements…as they can be zoomed smoothly. Such image is called VECTOR IMAGE.

8. The differences Raster image
Vector image
When zoomed its structure continues to be smooth
Used for simple graphics and drawings
Typical formats: EPS, AI, CDR, WMF, DXF,…
A special case: SVG
Raster image
When zoomed, its structure shows coloured elements
Used for photorealistic images
Typical formats: JPEG, TIFF, GIF, PNG, …

9. A vector drawing

10. Scalable Vector Graphics SVG (the information is stored as a textual
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "
<svg xmlns=" width="100%" height="100%" >
<desc>page1</desc>
<style type="text/css">
.dfltt {font-family:Times New Roman;font-size:14px;font-weight:normal;text-decoration:normal;text-align:left;fill:black;}
</style>
<defs>
<radialGradient id="Sshd1" fx="50%" fy="50%" x="95%" y="50%" gradientUnits="objectBoundingBox">
<stop id="stop1" offset="0%" style="stop-color:rgb(248,188, 94);stop-opacity: 1.00;"/>
<stop id="stop2" offset="100%" style="stop-color:rgb(128,128,128);stop-opacity: 1.00;"/>
</radialGradient>
</defs>
<rect id="Bpage1" style="fill:#ffedc6;" width="100%" height="100%"/>;
<g id="Oobj48" style="fill:url(#Sshd1);fill-rule:evenodd;" transform="matrix(0.70,-0.54,0.65,0.85,407.00,276.00)">
<rect id="Ggeo46" x="-230" y="-180" width=" 460" height=" 361" style="stroke:rgb(196,128,128);stroke-width:1" />
</g>
<g id="Oobj1" style="fill:url(#Sshd1);fill-rule:evenodd;" transform="matrix(1.50,0.00,0.00,1.00,403.00,272.00)">
<ellipse id="Ggeo1" cx="0" cy="0" rx="130.00" ry="99.00" style="stroke:rgb(128,128,128);stroke-width:1" />
<g id="Oobj47" style="fill:none;fill-rule:evenodd;" transform="matrix(3.46,0.00,0.00,6.53,408.00,263.50)">
<text id="Ggeo45" x=" -48px" y=" -7px" width=" 96" height=" 15" style="font-family:Arial;font-size: 12px;fill:rgb( 0, 64,128);" >
<tspan x=" -48px" y=" 3px">Training Courses</tspan></text>
</svg>
Scalable Vector Graphics
SVG
(the information is
stored as a textual
XML file)
graphic representation of the
same file
image internal encoding in the file

11. A photorealistic raster image

12. How we see the digital image
When displayed at a computer monitor or printed, both raster and vector images are seen thanks to their projection into a raster of couloured elements, called pixels (=picture elements)
The number of pixels per a unit of length is called resolution or spatial resolution.
It is usually given as a number of dots per one inch = dpi

13. Resolution Higher resolution = image able to represent fine details
Lower resolution = fine details lose their smooth forms
If we wish to have a good representation of details in a large image, we should use high resolution and/or optical zoom at cameras; in no way to use the digital zoom, as it places probable pixels between the real ones, i.e. it lies.

14. Position of the pixel y It is stored in a bitmap, where it has
Vertical resolution
It is stored
in a bitmap,
where it has
a numbered
address (x,y). X
Horizontal resolution

15. Position of the pixel
Each pixel has a position in the raster; therefore the resolution can be given as a formula of a number horizontal pixels by a number of vertical pixels, i.e.
Resolution = x x y, eg. 1,600 x 1,200
The same resolution can be also given as a result of this formula: 1,600 x 1,200 = 1,920,000 pixels = ca. 2 million
(= 2 megapixels)

16. a larger surface and smaller when it represents a smaller surface
One Pixel Dimension
The pixel has no dimension, while its size is relative: bigger when it has to represent
a larger surface and smaller when it represents a smaller surface

17. Pixels: their size and dimension
When we look at an image on computer monitor, it is projected into the display
resolution; therefore, the same scanned photograph looks smaller when
scanned at a lower resolution and larger when scanned at a higher resolution.

18. Scanning
We should pay due attention to document fixation when scanning
Due to raster character of the digital image, only rectangular rotations (90, 180, or 270 degrees) do not modify the image in the postprocessing work
The free rotation does modify it, as the pixels cannot be places exactly on rectangular axes

19. Free rotation NO! YES, POSSIBLE! Rotated 2 degrees Rotated 90 degrees
right
Rotated 90 degrees
right
NO!
YES, POSSIBLE!

20. COLOURS
Each pixel has a unique colour

21. Natural colour system + presence or absence of light
146,116 individual colours

22. Computer colour system
… let’s try to we think this way:
WHITE
All the light is reflected
No light is absorbed
BLACK
No light is reflected
All the light is absorbed
YELLOW
Yellow light is reflected
The rest of light is absorbed
Conclusion:
If the model is based on reflection, then black is 0 (RGB).
If the model is based on absorption, then black is 1 (CMY).

23. RGB R G B RGB (Red, Green, Blue) Red (255,0,0) Green (0,255,0)
Each colour has a range from 0 to 255, i.e. 256 levels
(255,255,0)
(215,185,229)
There are 256 x 256 x 256 = 16,777,216 possible colours.

24. CMY system The colours may also be written as range of:
binary numbers from to
hexadecimal from 00 to FF
(255,255,255)
(#FFFFFF)
(0,0,0)
(#000000)
CMY
system
(255,255,0)
(#FFFF00)
(56,108,98)
(#386C62)

25. How colours and pigments combine
RGB describes colours:
R – red
G – green
B – blue
CMYK describes pigments:
Y – yellow
M – magenta (pink)
C – cyano (aqua)
K – black (key colour)

26. Hue, Saturation, and Brightness/Lightness = HSL/HSB
Saturation change
HSL (42,155,255)
RGB (255,255,0)
HSL (42,255,128)
HSL (42,114,255)
HSL (42,0,255)
HSL (x,x,255)
= full light
HSL (42,255,226)
HSL (x,x,0)
= no light
HSL (42,255,114)
Brightness change
HSL scheme is an alternative to RGB to express colours

27. Colour and pigment
Colour for display
Pigment for printing

28. Colour depth
1 pixel = 1 bit, i.e. it can be 0 or 1 to express only black or white colours
The image consisting of 1-bit pixels is called:
1-bit image or bilevel image or black-and-white image
If we have a two-megapixel image (1,920,000 pixels), then such an image will have 1,920,000 bits, i.e. 240,000 bytes (240 KB)

29. Colour depth
1 pixel = 8 bits (= 1 byte), i.e. we can express a palette of 256 different colours
Then the above two-megapixel image will have 1.92 MB
1 pixel = 24 bits (= 3 bytes), i.e. each byte can express 256 colours, i.e. altogether 16,777,216 possible colours
Then the above two-megapixel image will have 5.76 MB

30. Colour depth 24-bit 1-bit 4-bit 8-bit 12-bit
The colour depth says in how deep the pixel is, i.e. it informs about the number
of possible colours.
24-bit
1-bit
4-bit
8-bit
12-bit

31. However, if the colour is special…
If the R, G, and B components have equal values, e.g. (57,57,57) … then the pixel will be grey
Such an image will not have 16 million colours, but only 256 shades of grey
As we need only one byte to express this, the image will be three times smaller than the full (true) colour image
The image in shades of grey is a colour image, we should not talk about it as about black-and-white image (as we do in the field of non-colour photographs)

32. 256 shades of grey 8 bit per pixel 16 million colours 24-bit per pixel
Black-and-white
1 bit per pixel
16 million colours
24-bit per pixel
16 colours
4 bit per pixel

33. How to make the image file smaller?
The resolution can be smaller, i.e. the number of pixels needed to represent the image
The number of colours can be reduced
The bitmap can be compressed into a computer file

34. 80 dpi = 3.75 times smaller file
Decrease of resolution may produce decrease of readability
300 dpi

35. Decrease of colour depth
24 bit
8 bit
4 bit
1 bit
Ca colours
256 colours
16 colours
2 colours

36. Decrease of image depth
1/3 of original size
1/6 of original size
1/24
of original size
greyscale
direction
colour
direction
24-bit
8-bit
4-bit
1-bit

37. Image compression The compression can be:
lossless – when we open the file, each pixel appears again on the same place, i.e. all the original information has been preserved
lossy – the unneeded information is cut off and only its relevant part is preserved; the human senses are reconstructing the original due to their imperfection to see the losses and their ability to rebuild missing parts through analogy and context

38. Lossy compression
applied mostly to rich colour images, while to black-and-white images only in new approaches based on the JBIG standard
the two most widespread colour compression algorithms are:
DCT = Discrete Cosine Transform, called JPEG compression
Wavelet – used in more recent approaches

39. Quality of lossy compression
the quality has to bet set up individually, any possible numerical values of compression ratios are true only within a concrete software image editor
the values of compression ratios depend on the perception of objects within the image

40. Artifacts
The disturbing elements produced by lossy compression are called artifacts
Wavelet artefacts
JPEG DCT artefacts

41. Image formats
Images are stored in computer formats; there are plenty of such formats, but we should concentrate on very few that are used more often …
The formats contain information about image parameters:
resolution
colour depth
compression
a lot of other properties
Some formats (e.g., TIFF) may support different values of such parameters, some other ones only one concrete value of a parameter. The choice of the concrete values affects the quality and character if the image.

42. Web image formats JPEG for photorealistic images
GIF for simple coloured graphics
PNG for true photorealistic images or simple graphics
All the other formats cannot be displayed directly in web browsers; to do it, we need installation of additional viewing components (plug-ins or ActiveX components)

43. JPEG (*.jpg, *.jpeg)
it supports only 16 million colours or 256 shades of grey
used for photorealistic images
used mostly with lossy compression
due to artifacts forming squares, smooth surfaces of objects require less compression, while rich variable content allows more lossy compression
used on the web, in digital cameras, normal work with photographs, etc.
JPEG = Joint Photographic Expert Group

44. GIF (*.gif)
palette format, as it supports only up to 256 colours; therefore, not good for photographs
in-built lossless LZW compression
supports animation (sequence of images in one file) and transparency (a colour from the palette can be set up as transparent)
used on web for simple graphics (256 or 16 colours), for drawings (black-and-white)
GIF = Graphic Interchange Format

45. PNG (*.png)
supports up to 16 million colours, excellent for photographs
in-built lossless PNG compression that is more efficient than LZW
some software enables to set up the compression ratio
the most efficient lossless compression for photorealistic images among the non-wavelet formats
used anywhere where we need 16 million colours and do not wish to apply lossy copmpression
PNG = Portable Network Graphics

46. TIFF (*.tif) supports any resolution and any number of colours
a lot of compression choices:
uncompressed
LZW (photorealistic images)
CCITT Fax Group 3 and 4 (black-and-white images)
theoretically even JPG and other ones
used there where we foresee further colour image processing (mostly used uncompressed)
best classical solution for black-and-white images when set up with CCITT Fax Gr. 4 compression
supports more images stored in one file
TIFF = Tagged Image File Format

47. Wavelet image formats
they offer the most efficient lossless and especially lossy compression
the problem is they are not recommended for the web
used in special applications where we can guarantee the future of user’s comfort
most used formats: JPEG2000 (*.jp2), MrSID (*.sid), and the colour component of the DjVu format (see mixed content)

48. Mixed raster content (MRC)
The image is split in:
foreground - compressed with new 1-bit compression algorithms
background – compressed with wavelet technology
Both stored in the same computer file: unbeatable lossy compression efficiency (up to 10 times more efficient than JPEG when enabling similar human perception)
Typical segment of use: scanned journals
The two leading formats are: DjVu (*.djvu/djv) and LDF (*.ldf)

49. MRC = Mixed Raster Content
Click and the layers will appear in the following order:
Colour background (wavelet compression)
Black-and-white foreground
Coloured black-and-white foreground

50. Image types and formats
From the point of view of their content the images can be grouped as follows:
Uniform content:
Mixed content:
any combination of the types from the uniform content
typical example: a scanned page of a coloured journal
image type
best recommended format
simple drawings
TIFF/Fax Gr. 4, PNG, GIF
text
coloured graphics
PNG, GIF
photorealistic images
JPEG

51. Image in practice archiving: use standard ISO formats (TIFF, JPEG)
delivery: use the formats the supposed user can handle alone (web image formats) or with your help (any other format)
think he or she can have slow Internet connection or limited computing capabilities in his/her computer = do not send or deliver excessively large image files
for some purposes you may use also the PDF format for delivery (for this you must have a virtual PDF printing driver installed)
in digital libraries small preview images, special image servers working on demand, or special imaging techniques may be also used for special purposes
do not forget that the parameters and the quality of your digital image are defined by the purpose for which you create it

52. More information
You can use freeware image editors to do a good job, e.g. IrfanView ( or Gimp (
You visit the webpages of the Joint Photographic Expert Group ( or the Joint Bilevel Expert Group (
You can look at for additional information