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@nkp.cz © Adolf Knoll, National Library of the Czech Republic

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

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.

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.

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

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

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

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, …

A vector drawing

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" "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 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

A photorealistic raster image

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

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.

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

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)

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

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.

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

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

COLOURS Each pixel has a unique colour

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

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).

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.

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

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)

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

Colour and pigment Colour for display Pigment for printing

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)

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

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

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)

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

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

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

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

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

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

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

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

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

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.

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)

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

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

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

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

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)

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)

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

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

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

More information You can use freeware image editors to do a good job, e.g. IrfanView (http://www.irfanview.com/) or Gimp (http://www.gimp.org/)\ You visit the webpages of the Joint Photographic Expert Group (http://www.jpeg.org) or the Joint Bilevel Expert Group (http://www.jbig.org) You can look at http://digit.nkp.cz/techstandards_data_en.html for additional information