Unit no. 2Unit no. 2Digital ImageDigital Image

Adolf KnollAdolf Knoll

National Library of the Czech RepublicNational Library of the Czech Republic

adolf.knoll@nkp.czadolf.knoll@nkp.cz

© Adolf Knoll, National Library of the Czech Republic

Learning objectivesLearning objectives

After the completion of this unit the learner will be After the completion of this unit the learner will be able:able:

To understand the composition of the digital To understand the composition of the digital image and its main parameters:image and its main parameters: ResolutionResolution ColoursColours CompressionCompression FormatsFormats

To take his/her own decisions when using the To take his/her own decisions when using the digital imagedigital image

We can see that the image consists of elements.

Such an image is called RASTER IMAGE or BITMAP.

When we zoom the image, its structure starts to appear.

Each element has its own colour

However, some images do not However, some images do not seem to consist of these seem to consist of these

elements…as they can be elements…as they can be zoomed smoothly.zoomed smoothly.

Such image is called VECTOR Such image is called VECTOR IMAGE.IMAGE.

The differencesThe differences

Vector imageVector image When zoomed its When zoomed its

structure continues to be structure continues to be smoothsmooth

Used for simple graphics Used for simple graphics and drawingsand drawings

Typical formats: EPS, AI, Typical formats: EPS, AI, CDR, WMF, DXF,… CDR, WMF, DXF,…

A special case: A special case: SVG SVG

Raster imageRaster image When zoomed, its When zoomed, its

structure shows structure shows coloured elementscoloured elements

Used for Used for photorealistic imagesphotorealistic images

Typical formats: Typical formats: JPEG, TIFF, GIF, JPEG, TIFF, GIF, PNG, PNG, ……

A vector drawing

<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"><svg xmlns="http://www.w3.org/2000/svg" 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><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></g>

</svg>

Scalable Vector GraphicsSVG(the information isstored as a textualXML file)

image internal encoding in the file

graphic representation of thesame file

A photorealistic raster image

How we see the digital imageHow we see the digital image

When displayed at a computer monitor or printed, When displayed at a computer monitor or printed, both raster and vector images are seen thanks both raster and vector images are seen thanks to their projection into a raster of couloured to their projection into a raster of couloured elements, called pixels (=picture elements)elements, called pixels (=picture elements)

The number of pixels per a unit of length is called The number of pixels per a unit of length is called resolution or spatial resolution.resolution or spatial resolution.

It is usually given as a number of It is usually given as a number of ddots ots pper one er one iinch nch = = dpidpi

ResolutionResolution

Higher resolution = image able to represent fine Higher resolution = image able to represent fine detailsdetails

Lower resolution = fine details lose their smooth Lower resolution = fine details lose their smooth formsforms

If we wish to have a good representation of If we wish to have a good representation of details in a large image, we should use high details in a large image, we should use high resolution and/or optical zoom at cameras; in no resolution and/or optical zoom at cameras; in no way to use the digital zoom, as it places way to use the digital zoom, as it places probable pixels between the real ones, i.e. it lies.probable pixels between the real ones, i.e. it lies.

Position of the pixelPosition of the pixel

It is storedin a bitmap,where it hasa numberedaddress (x,y).

X

y

Horizontal resolution

Vertical resolution

Position of the pixelPosition of the pixel

Each pixel has a position in the raster; therefore Each pixel has a position in the raster; therefore the resolution can be given as a formula of a the resolution can be given as a formula of a number horizontal pixels by a number of vertical number horizontal pixels by a number of vertical pixels, i.e. pixels, i.e. Resolution = Resolution = xx xx yy, eg. 1,600 x 1,200, eg. 1,600 x 1,200

The same resolution can be also given as a The same resolution can be also given as a result of this formula: 1,600 x 1,200 = 1,920,000 result of this formula: 1,600 x 1,200 = 1,920,000 pixels = ca. 2 million pixels = ca. 2 million (= 2 megapixels)(= 2 megapixels)

One Pixel DimensionOne Pixel Dimension

The pixel has no dimension, while its size is relative: bigger when it has to representa larger surface and smaller when it represents a smaller surface

Pixels: their size and Pixels: their size and dimensiondimension

When we look at an image on computer monitor, it is projected into the displayresolution; therefore, the same scanned photograph looks smaller when

scanned at a lower resolution and larger when scanned at a higher resolution.

ScanningScanning

We should pay due attention to document We should pay due attention to document fixation when scanningfixation when scanning

Due to raster character of the digital image, only Due to raster character of the digital image, only rectangular rotations (90, 180, or 270 degrees) rectangular rotations (90, 180, or 270 degrees) do not modify the image in the postprocessing do not modify the image in the postprocessing workwork

The free rotation does modify it, as the pixels The free rotation does modify it, as the pixels cannot be places exactly on rectangular axescannot be places exactly on rectangular axes

Free rotationFree rotation

Rotated 2 degreesright

NO!

YES, POSSIBLE!

Rotated 90 degreesright

Each pixel has a unique colour

COLOURSCOLOURS

Natural colour systemNatural colour system

+ presence or absence of light

146,116 individual colours

BLACKNo light is reflected All the light is absorbed

WHITEAll the light is reflectedNo light is absorbed

YELLOWYellow light is reflectedThe 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).

… let’s try to we think this way:

Computer colour systemComputer colour system

RGBRGB

R BG

RGB (Red, Green, Blue)

Red (255,0,0)Green (0,255,0)Blue (0,0,255)

Each colour has a range from 0 to 255, i.e. 256 levels

(255,255,0)

There are 256 x 256 x 256 = 16,777,216 possible colours.

(215,185,229)

(255,255,255)(#FFFFFF)

(0,0,0)(#000000)

The colours may also be written as range of:• binary numbers from 00000000 to 11111111• hexadecimal from 00 to FF

(255,255,0)(#FFFF00)

(56,108,98)(#386C62)

CMYsystem

How colours and pigments How colours and pigments combinecombine

RGB describes colours:

• R – red• G – green• B – blue

CMYK describes pigments:

• Y – yellow• M – magenta (pink)• C – cyano (aqua)

• K – black (key colour)

HHue, ue, SSaturation, and aturation, and BBrightnessrightness//LLightness = ightness = HSL/HSBHSL/HSB

RGB (255,255,0)HSL (42,255,128)

HSL (x,x,255)= full light

HSL (x,x,0)= no light

HSL (42,155,255)

HSL (42,114,255)

HSL (42,0,255)

HSL (42,255,226)

HSL (42,255,114)

Brightness change

Saturation change

HSL scheme is an alternative to RGB to express colours

Colour and pigmentColour and pigment

Colour for display

Pigment for printing

Colour depthColour depth

1 pixel = 1 bit, i.e. it can be 0 or 1 to express 1 pixel = 1 bit, i.e. it can be 0 or 1 to express only black or white coloursonly black or white colours

The image consisting of 1-bit pixels is called:The image consisting of 1-bit pixels is called: 1-bit image1-bit image or or bilevel imagebilevel image or or black-and-whiteblack-and-white image image If we have a two-megapixel image (If we have a two-megapixel image (1,920,0001,920,000 pixels), pixels),

then such an image will have then such an image will have 1,920,0001,920,000 bits, i.e. bits, i.e. 240,000 bytes (240 KB)240,000 bytes (240 KB)

Colour depthColour depth

1 pixel = 8 bits (= 1 byte), i.e. we can express a 1 pixel = 8 bits (= 1 byte), i.e. we can express a palette of 256 different colourspalette of 256 different colours Then the above two-megapixel image will have 1.92 Then the above two-megapixel image will have 1.92

MBMB

1 pixel = 24 bits (= 3 bytes), i.e. each byte can 1 pixel = 24 bits (= 3 bytes), i.e. each byte can express 256 colours, i.e. altogether express 256 colours, i.e. altogether 16,777,216 16,777,216 possible colourspossible colours Then the above two-megapixel image will have 5.76 Then the above two-megapixel image will have 5.76

MBMB

Colour depthColour depth

1-bit 4-bit 8-bit 12-bit

24-bit

The colour depth says in how deep the pixel is, i.e. it informs about the numberof possible colours.

However, if the colour is However, if the colour is special…special…

If the R, G, and B components have equal values, e.g. If the R, G, and B components have equal values, e.g. (57,57,57) … then the pixel will be grey(57,57,57) … then the pixel will be grey

Such an image will not have 16 million colours, but only Such an image will not have 16 million colours, but only 256 shades of grey256 shades of grey

As we need only one byte to express this, the image will As we need only one byte to express this, the image will be three times smaller than the full (true) colour imagebe three times smaller than the full (true) colour image

The image in shades of grey is a colour image, we The image in shades of grey is a colour image, we should not talk about it as about black-and-white image should not talk about it as about black-and-white image (as we do in the field of non-colour photographs)(as we do in the field of non-colour photographs)

16 million colours24-bit per pixel

16 colours4 bit per pixel

256 shadesof grey8 bit per pixel

Black-and-white1 bit per pixel

How to make the image file How to make the image file smaller?smaller?

The resolution can be smaller, i.e. the The resolution can be smaller, i.e. the number of pixels needed to represent the number of pixels needed to represent the imageimage

The number of colours can be reducedThe number of colours can be reduced The bitmap can be compressed into a The bitmap can be compressed into a

computer filecomputer file

80 dpi = 3.75 times smaller file

300 dpi

Decrease of resolution may produce decrease of readability

Decrease of Decrease of colourcolour depth depth24 bit 8 bit 4 bit 1 bit

2 colours16 colours256 coloursCa. 16.700.000 colours

Decrease of image depthDecrease of image depth

24-bit 1-bit4-bit8-bit

1/3 of original size 1/24of original size

1/6 of original size

greyscaledirection

colourdirection

Image compressionImage compression

The compression can be:The compression can be: lossless lossless – when we open the file, each pixel – when we open the file, each pixel

appears again on the same place, i.e. all the appears again on the same place, i.e. all the original information has been preservedoriginal information has been preserved

lossylossy – the unneeded information is cut off and – the unneeded information is cut off and only its relevant part is preserved; the human only its relevant part is preserved; the human senses are reconstructing the original due to senses are reconstructing the original due to their imperfection to see the losses and their their imperfection to see the losses and their ability to rebuild missing parts through analogy ability to rebuild missing parts through analogy and contextand context

Lossy compressionLossy compression

applied mostly to rich colour images, while to applied mostly to rich colour images, while to black-and-white images only in new approaches black-and-white images only in new approaches based on the JBIG standardbased on the JBIG standard

the two most widespread colour compression the two most widespread colour compression algorithms are:algorithms are: DCT = Discrete Cosine Transform, called JPEG DCT = Discrete Cosine Transform, called JPEG

compressioncompression Wavelet – used in more recent approachesWavelet – used in more recent approaches

Quality of lossy compressionQuality of lossy compression

the quality has to bet set up individually, the quality has to bet set up individually, any possible numerical values of any possible numerical values of compression ratios are true only within a compression ratios are true only within a concrete software image editorconcrete software image editor

the values of compression ratios depend the values of compression ratios depend on the perception of objects within the on the perception of objects within the imageimage

ArtifactsArtifacts

The disturbing elements produced by The disturbing elements produced by lossy compression are called artifactslossy compression are called artifacts

Wavelet artefacts JPEG DCT artefacts

Image formatsImage formats Images are stored in computer formatsImages are stored in computer formats; there are plenty ; there are plenty

of such formats, but we should concentrate on very few of such formats, but we should concentrate on very few that are used more often …that are used more often …

The formats contain information about image The formats contain information about image parameters:parameters: resolutionresolution colour depthcolour depth compressioncompression a lot of other propertiesa lot of other properties

Some formats (e.g., TIFF) may support different values Some formats (e.g., TIFF) may support different values of such parameters, some other ones only one concrete of such parameters, some other ones only one concrete value of a parameter. The choice of the concrete values value of a parameter. The choice of the concrete values affects the quality and character if the image.affects the quality and character if the image.

Web image formatsWeb image formats

JPEG for photorealistic imagesJPEG for photorealistic images GIF for simple coloured graphicsGIF for simple coloured graphics PNG for true photorealistic images or simple PNG for true photorealistic images or simple

graphicsgraphics

All the other formats cannot be displayed directly All the other formats cannot be displayed directly in web browsers; to do it, we need installation of in web browsers; to do it, we need installation of additional viewing components (plug-ins or additional viewing components (plug-ins or ActiveX components)ActiveX components)

JPEG (*.jpg, *.jpeg)JPEG (*.jpg, *.jpeg)

it supports only 16 million colours or 256 shades it supports only 16 million colours or 256 shades of greyof grey

used for photorealistic imagesused for photorealistic images used mostly with lossy compressionused mostly with lossy compression due to artifacts forming squares, smooth due to artifacts forming squares, smooth

surfaces of objects require less compression, surfaces of objects require less compression, while rich variable content allows more lossy while rich variable content allows more lossy compressioncompression

used on the web, in digital cameras, normal used on the web, in digital cameras, normal work with photographs, etc.work with photographs, etc.

JPEG = Joint Photographic Expert Group

GIF (*.gif)GIF (*.gif)

palette format, as it supports only up to 256 palette format, as it supports only up to 256 colours; therefore, not good for photographscolours; therefore, not good for photographs

in-built lossless LZW compressionin-built lossless LZW compression supports animation (sequence of images in one supports animation (sequence of images in one

file) and transparency (a colour from the palette file) and transparency (a colour from the palette can be set up as transparent)can be set up as transparent)

used on web for simple graphics (256 or 16 used on web for simple graphics (256 or 16 colours), for drawings (black-and-white)colours), for drawings (black-and-white)

GIF = Graphic Interchange Format

PNG (*.png)PNG (*.png)

supports up to 16 million colours, excellent for supports up to 16 million colours, excellent for photographsphotographs

in-built lossless PNG compression that is more efficient in-built lossless PNG compression that is more efficient than LZWthan LZW

some software enables to set up the compression ratiosome software enables to set up the compression ratio the most efficient lossless compression for photorealistic the most efficient lossless compression for photorealistic

images among the non-wavelet formatsimages among the non-wavelet formats used anywhere where we need 16 million colours and do used anywhere where we need 16 million colours and do

not wish to apply lossy copmpressionnot wish to apply lossy copmpression

PNG = Portable Network Graphics

TIFF (*.tif)TIFF (*.tif)

supports any resolution and any number of colourssupports any resolution and any number of colours a lot of compression choices:a lot of compression choices:

uncompresseduncompressed LZW (photorealistic images)LZW (photorealistic images) CCITT Fax Group 3 and 4 (black-and-white images)CCITT Fax Group 3 and 4 (black-and-white images) theoretically even JPG and other onestheoretically even JPG and other ones

used there where we foresee further colour image used there where we foresee further colour image processing (mostly used uncompressed)processing (mostly used uncompressed)

best classical solution for black-and-white images when best classical solution for black-and-white images when set up with CCITT Fax Gr. 4 compressionset up with CCITT Fax Gr. 4 compression

supports more images stored in one filesupports more images stored in one file

TIFF = Tagged Image File Format

Wavelet image formatsWavelet image formats

they offer the most efficient lossless and they offer the most efficient lossless and especially lossy compressionespecially lossy compression

the problem is they are not recommended for the the problem is they are not recommended for the webweb

used in special applications where we can used in special applications where we can guarantee the future of user’s comfortguarantee the future of user’s comfort

most used formats: JPEG2000 (*.jp2), MrSID most used formats: JPEG2000 (*.jp2), MrSID (*.sid), and the colour component of the DjVu (*.sid), and the colour component of the DjVu format (see mixed content)format (see mixed content)

Mixed raster contentMixed raster content (MRC) (MRC)

The image is split in:The image is split in: foreground - compressed with new 1-bit foreground - compressed with new 1-bit

compression algorithmscompression algorithms background – compressed with wavelet technologybackground – compressed with wavelet technologyBoth stored in the same computer file: unbeatable Both stored in the same computer file: unbeatable

lossy compression efficiency (up to 10 times more lossy compression efficiency (up to 10 times more efficient than JPEG when enabling similar human efficient than JPEG when enabling similar human perception)perception)

Typical segment of use: scanned journalsTypical segment of use: scanned journalsThe two leading formats are: DjVu (*.djvu/djv) and LDF The two leading formats are: DjVu (*.djvu/djv) and LDF

(*.ldf)(*.ldf)

MRC = Mixed Raster Content

Click and the layers will appear in the following order:

1. Colour background (wavelet compression)

2. Black-and-white foreground3. Coloured black-and-white

foreground

Image types and formatsImage types and formats

Uniform content:Uniform content: Mixed content:Mixed content: any combination of the any combination of the

types from the uniform types from the uniform content content

typical example: a typical example: a scanned page of a scanned page of a coloured journalcoloured journal

image typeimage typebest recommended best recommended

formatformat

simple drawings simple drawings TIFF/Fax Gr. 4, TIFF/Fax Gr. 4,

PNG, GIFPNG, GIF

text text TIFF/Fax Gr. 4, TIFF/Fax Gr. 4,

PNG, GIFPNG, GIF

coloured graphics coloured graphics PNG, GIFPNG, GIF

photorealistic photorealistic images images JPEGJPEG

From the point of view of their content the images can be grouped as follows:

Image in practiceImage in practice archiving: use standard ISO formats (TIFF, JPEG)archiving: use standard ISO formats (TIFF, JPEG) delivery: use the formats the supposed user can handle alone (web delivery: use the formats the supposed user can handle alone (web

image formats) or with your help (any other format)image formats) or with your help (any other format) think he or she can have slow Internet connection or limited think he or she can have slow Internet connection or limited

computing capabilities in his/her computer = do not send or deliver computing capabilities in his/her computer = do not send or deliver excessively large image filesexcessively large image files

for some purposes you may use also the PDF format for delivery for some purposes you may use also the PDF format for delivery (for this you must have a virtual PDF printing driver installed)(for this you must have a virtual PDF printing driver installed)

in digital libraries small preview images, special image servers in digital libraries small preview images, special image servers working on demand, or special imaging techniques may be also working on demand, or special imaging techniques may be also used for special purposesused for special purposes

do not forget that the parameters and the quality of your digital do not forget that the parameters and the quality of your digital image are defined by the purpose for which you create itimage are defined by the purpose for which you create it

More informationMore information

You can use freeware image editors to do a You can use freeware image editors to do a good job, e.g. IrfanView (good job, e.g. IrfanView (http://www.irfanview.com/http://www.irfanview.com/) or Gimp () or Gimp (http://www.gimp.org/)\http://www.gimp.org/)\

You visit the webpages of the Joint Photographic You visit the webpages of the Joint Photographic Expert Group (Expert Group (http://www.jpeg.orghttp://www.jpeg.org) or the Joint ) or the Joint Bilevel Expert Group (Bilevel Expert Group (http://www.jbig.orghttp://www.jbig.org))

You can look at You can look at http://digit.nkp.cz/techstandards_data_en.htmlhttp://digit.nkp.cz/techstandards_data_en.html for additional informationfor additional information