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

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

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

5. The differences 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, …

6. A vector drawing

7. page1.dfltt {font-family:Times New Roman;font-size:14px;font-weight:normal;text- decoration:normal;text-align:left;fill:black;} ; Training Courses Scalable Vector Graphics SVG (the information is stored as a textual XML file) image internal encoding in the file graphic representation of the same file

8. A photorealistic raster image

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

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

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

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

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

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

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

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

17. Each pixel has a unique colour COLOURS

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

19. BLACK No light is reflected All the light is absorbed WHITE All the light is reflected No 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). … let’s try to we think this way: Computer colour system

20. RGB RBG 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)

21. (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) CMY system

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

23. Hue, Saturation, and Brightness/Lightness = HSL/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

24. Colour and pigment Colour for display Pigment for printing

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

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

27. Colour depth 1-bit4-bit8-bit12-bit 24-bit The colour depth says in how deep the pixel is, i.e. it informs about the number of possible colours.

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

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

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

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

32. Decrease of colour depth 24 bit 8 bit4 bit1 bit 2 colours16 colours256 coloursCa. 16.700.000 colours

33. Decrease of image depth 24-bit1-bit4-bit8-bit 1/3 of original size1/24 of original size 1/6 of original size greyscale direction colour direction

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

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

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

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

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

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

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

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

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

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

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

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

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

47. Image types and formats 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 From the point of view of their content the images can be grouped as follows:

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

49. 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/)\ http://www.irfanview.com/http://www.gimp.org/)\http://www.irfanview.com/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) http://www.jpeg.orghttp://www.jbig.orghttp://www.jpeg.orghttp://www.jbig.org  You can look at http://digit.nkp.cz/techstandards_data_en.html for additional information http://digit.nkp.cz/techstandards_data_en.html