Unit no. 2 Unit no. 2 Digital Image Digital Image Adolf Knoll Adolf Knoll National Library of the Czech National Library of the Czech Republic Republic [email protected] [email protected] olf Knoll, National Library of the Czech Republic
Dec 27, 2015
Unit no. 2Unit no. 2Digital ImageDigital Image
Adolf KnollAdolf Knoll
National Library of the Czech RepublicNational Library of the Czech Republic
[email protected]@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, ……
<?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
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
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 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
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