CGMB 324: Multimedia System design

1. CGMB 324: Multimedia System design Chapter 04: Multimedia Element II – Image (Part II)

2. Objectives At the end of this chapter, learners should be able to • understand the concept and theory of image file formats • Identify the differences between raster and vector file format • identify the standard system dependent and independent file formats

3. Image File Formats

4. Image Formats • Digital still images fall into two main categories: • Raster(or 'bit-mapped') images and Vector ('object-oriented') images. • Raster images take the form of a grid or matrix, with each picture element (pixel) having a unique location and independent colour value. • Vector images files are really just a set of mathematical instructions that are used by a drawing program to construct an image. • There is a third category of formats known as metafiles, which are able to contain both raster and vector images.

5. i)Raster Images • A basic understanding of the raster image is essential, since it is the most common category of image created and used within digitization projects. • All scanners and digital cameras produce raster images and most output devices (print and screen) also use them. • common examples of raster file formats  TIFFs, JPEG/JFIFs, and GIFs • Raster images take the form of a grid or matrix. • This pattern becomes easily visible as the image is magnified (i.e. viewed at more than 100%. • Each square (pixel) within the matrix occupies a unique position and can be edited separately.

6. The Raster Grid • The raster image has been magnified by 800% and 1600% to reveal its grid structure. • Each square of colour is a pixel. Orchid.jpg - 100% Zoom Orchid.jpg - 1600% Zoom Orchid.jpg - 800% Zoom

7. i) Raster Images • internally very simple. • If you examine their coding, you will typically find some brief header information describing the structure of the file followed by a series of values, each describing the colour of the individual pixels. • Since a raster image records information for each pixel, its file size can be quite large. • For an uncompressed raster image, the file size will be directly related to its pixel dimensions (spatial resolution) and the extent of the colour information recorded for each pixel (its colour resolution or 'bit-depth')

8. ii)Vector Images • While most raster images result from a digital capture process, vector images are typically created and displayed within drawing programs. • Common vector images include 2- and 3-D architectural drawings, flow charts, logos and fonts. • They consist of lines, curves and shapes with editable attributes such as colour or fill. • Because they are defined by mathematical equations, they are more easily transformed than raster images. • Unlike raster images, vectors are 'resolution independent': they can be reshaped or rescaled without losing quality.

9. Common uses for vector images • Vector images are commonplace. • From designs on cutting-edge magazine covers, to interactive Web graphics they are very much the format of choice in contemporary design. • In certain specialist areas, computer-aided design for example, the vector format is the only choice. • There are many less specialized everyday uses of the vector format, where users may not even be aware they are creating vector images: • Drawing tools in Word, Excel, PowerPoint, etc (e.g. lines, arrows, shapes) • Fonts - most fonts are vector fonts, where each character is scalable • Charts and graphs created in Excel, PowerPoint, etc

10. Example of Vector Image • <rect width="120" height="80" fill="rgb(255,51,0)" stroke="rgb(0,0,204)" stroke-width="4" /> • Using fairly straightforward 'human readable' terms, this instructs the program displaying the image to draw a rectangle with a width of 120 pixels and a height of 80 pixels. It is filled with a shade of orange (as defined by the RGB colour value of Red 255, Green 51, Blue 0), and is outlined with a blue stroke (R 0, G 0, B 204) that is 4 pixels wide

11. Example of Vector Image • If a vector image is resized, there will be no loss of quality. • This is because when resizing a vector what happens behind the scenes is a change to the mathematical instructions. • So if we resize our 120 by 80 pixel original by ten times to 1200 by 800, the sharpness of the original is retained because it is the maths in the code that has been adjusted rather than the physical image itself. 10x = 1200 x 800 1x = 120 x 80

12. Raster and vector images compared

13. iii)Encapsulating Formats (Metafiles and PDLs) • The third category of file formats that can contain or encapsulate raster and vector images. • includes metafiles and Page Description Languages (PDLs). • In addition to holding different types of images and text within the same file, these formats enable, to varying degrees, their contents to be consistently displayed and used across different computer programs and operating systems. • Metafiles contain lists of commands that will draw or display an image when they are run.

14. iii) Encapsulating Formats (Metafiles and PDLs) • Vector drawing commands are most common, but metafiles can also include raster information or text. • Sometimes they are little more than a kind of envelope, containing an instruction to open up another image file. • Common metafile formats include the Computer Graphics Metafile (CGM), Windows Metafile (WMF), and Enhanced Metafile (EMF). • The Computer Graphics Metafile is older and will run on most computer operating systems. • The other two were developed specifically for the Windows operating system, but are used more widely.

15. Advantages of encapsulating formats • These formats do some or all of the following: • Enable the exchange of files across different platforms and applications • Include raster, vector, text and layout information on different layers within the same file • provide added functionality, including hotspots and linking • Allow easier resource discovery by using internal metadata and unique digital object identifiers • Support multi-page images • Enable 'locking' to provide security and assist in rights management

16. Standard System Independent Formats

17. Standard System Independent Formats • The following brief format descriptions are the most commonly used formats. • GIF (gif87a, gif89a) • JPEG • TIFF • PNG

18. GIF • Graphics Interchange Format (GIF) devised by the UNISYS Corp. and Compuserve, initially for transmitting graphical images over phone lines via modems • Uses the Lempel-Ziv Welch algorithm (a form of Huffman Coding), modified slightly for image scan line packets (line grouping of pixels) • Limited to only 8-bit (256) color images, suitable for images with few distinctive colors (e.g., charts) • Supports interlacingmode (appears to load quickly but pixellates itself over time until it finally becomes clear) e.g. http://www.davent.demon.co.uk/iterlace.html

19. Interlaced (loads quicker, but fades in) aka The Venetian Blind effect Non-Interlaced (smooth from top to bottom)

20. GIF 89a • GIF89a supports simple animation(Graphics Control Extension has control over delay time, transparent index, etc. • Software such as Coral Draw and Photoshop will allow access and editing of GIF images.

21. Original Image – Jetty.jpg 300 x 225 pixels, 60.3 KB 24-bit color • The 2 images (Jetty1.gif and Jetty2. gif) show the 256 color limitation of GIF. • Only the use of flat colors, like in a cartoon or in charts/diagrams, can benefit from GIF. Jetty2.gif  19KB, 0% Dither 216 Web-palette, 4 second @ 56.6kbps Jetty1.gif  35KB, 100% Dither 216 Web-palette, 7 second @ 56.6kbps

22. Dithering

23. JPEG • A standard for photographic image compression created by the Joint Photographic Experts Group (JPEG) • Takes advantage of limitations in the human vision system to achieve high rates of compression • UseLossy compression that allows user to set the desired level of quality/compression

24. JPEG 2000 • A new image coding system that uses state of the art compression techniques based on wavelet technology. • Its architecture allows a wide range of uses from portable digital cameras to advanced pre-press, medical imaging and other applications which require high quality images • It has the file extension *.jp2, *.j2k • JPEG2000 compression technology retains image quality better than the old JPEG. It is also faster and uses small amounts of data. • This new standard is revolutionizing digital imaging as we know it.

25. JPEG 2000 JPEG Compressed 6KB Original Image 700KB JPEG 2000 Compressed 6KB Compression Ratio  116:1

26. Common JPEG’s Compression • Common JPEG's compression (known as DCT - Discrete Cosine Transform) cuts the pixels into blocks of 64 (8x8) and processes each block independently, shifting and simplifying the colors so there is less information to encode. • Pixels are changed only in relation to the other pixels within their block, so two identical pixels that are next to each other, but in different blocks, could be transformed in different ways. • Consequently, when high compression (maximum simplification) is used, the block boundaries become obvious, causing the 'blockiness' or 'blocking artefact' frequently observed in the common JPEG.

27. JPEG 2000 Compression • In contrast to common JPEG’s compression processes, the JPEG 2000's wavelet compression processes much larger areas of the image at once - sometimes the whole image. • This avoids any blocking. The wavelet compression is also able to make a distinction between significant detail in the image, like edges, and less significant areas, for example, where there are slight variations in the colour. • At very high compression JPEG 2000 will still introduce artefacts (visible distortion in the image), but by concentrating its compression on the less significant parts it gives much better overall quality than a JPEG of the same file size.

28. A Bit On Wavelet Compression • The advantage of wavelet compression is that, unlike the (old) JPEG, the wavelet algorithm does not divide image into blocks, but analyzes the whole image. It allows us to get best compression ratio, while maintaining the quality. Wavelet (left) compression provides higher quality at a ratio of 105.6:1 while JPEG (right) delivers a ratio of about 103.8 with visible blockiness in the image. JPEG compression file size: 1895 bytescompression ratio - 103.8 Wavelet compressionfile size: 1861 bytescompression ratio - 105.6 http://www.cs.sfu.ca/CourseCentral/365/li/material/cgi-bin/wavelet.cgi http://www.owlnet.rice.edu/~elec301/Projects00/wavelet_image_comp/img-compression-theory.html

29. Tagged Image File Format (TIFF) • Tagged Image File Format (TIFF), stores many different types of images (e.g., monochrome, greyscale, 8-bit & 24-bit RGB, etc.) -> tagged • Developed by the Aldus Corp. in the 1980's and later supported by Microsoft. • TIFF is a lossless format (when not utilizing the new JPEG tag which allows for compression). • Leaves room for implementors to pick and choose what features they'll support. • It does not provide any major advantages over JPEG and is not as user-controllable. It appears to be declining in popularity.

30. PNG (Portable Network Graphics) • Designed to replace the older and simpler GIF format and, to some extent, the much more complex TIFF format • For image editing, it provides a useful format for the storage of intermediate stages of editing. • Since it is lossless and supports up to 48-bit true color or 16-bit grayscale; saving, restoring and re-saving an image will not degrade its quality, unlike JPEG

31. PNG (Portable Network Graphics) • PNG's compression (approximately 50% in general) is among the best that can be had without losing image information and without paying patent fees • To get the most out of PNG, only save into it from an original bitmap source. • It will reduce to about half the size and you can work on it, like a bitmap. • However, you must have an image editor which supports PNG to take advantage of this. • Web browsers can usually read PNG

32. PNG (Portable Network Graphics) • The bitmap on the left (200 KB) and the PNG on the right (120 KB) are, in theory, identical. • As long as the image editor supports PNG, you can use it like a BMP. • PNG is also an alternative when the image has to be left uncompressed. • At least, it will be only about 50-70% the size of the bitmap. Dancer.bmp Dancer.png

33. System Dependent Formats

34. System Dependent Formats • Many graphical / imaging applications create their own file format particular to the systems they are executed upon. • Disadvantage: Very proprietary and not compatible with others. • Example : MacDraw (PICT) , Windows Bitmap (BMP)

35. Macintosh: PAINT and PICT • PAINT was originally used in the MacPaint program, initially only for 1-bit monochrome images. • ThePICT format is used in MacDraw (a vector based drawing program) for storing structured graphics • PICT format is widely used among Mac OS graphics and page-layout applications as an intermediary file format for transferring images between applications.

36. Microsoft Windows Bitmap - BMP Format • Windows bitmap standard graphics file format for Microsoft Windows • stored in a device-independent bitmap (DIB) format • allows Windows to display the bitmap on any type of display device. • Used in PC Paintbrush and other programs • It is capable of storing 24-bit bitmap images • The term "device independent" means that the bitmap specifies pixel colour in a form independent of the method used by a display to represent colour.

37. Microsoft Windows Bitmap - BMP Format • The default filename extension  *.bmp • Each bitmap file contains a bitmap-file header, a bitmap-information header, a colour table (used to select colours when the image is displayed), and an array of bytes that defines the bitmap bits. • Bitmap supports compression using RLE (Run-Length Encoding) method

38. Application Dependent Formats • We also have image formats which are dependent upon the specific programs used. • For example, Adobe Photoshop has its own *.psd format, while Paint Shop Pro has its *.psp format. • It is often better to save in a program’s native format if you use it frequently. • This is because the native format is likely to retain all the special effects you use and remain as an uncompressed image, thereby retaining full quality. • However, if the images need to be transferred amongst various users and previewed, it is better to save it as a (Windows) bitmap.

39. References • http://www.tasi.ac.uk/advice/creating/fformat.html