Image file formats

1. Image File Formats <ul><ul><li>Harrow Computer Club – Wed, 1 Dec 2010 </li></ul></ul><ul><ul><li>Bob Watson MA CMath MIMA MBCS </li></ul></ul>

2. Start at the End Extension Colour Compression Common Uses JPG, JPEG 24-bit Lossy Photos, web pics GIF 8-bit Lossless Web graphics – buttons, icons, etc PNG up to 24-bit Lossless Web – replacement for GIF TIF, TIFF 24-bit Lossless Professional Photos etc

3. Types of Image Files <ul><li>Vector </li></ul><ul><li>Images created from geometrical primitives such as points, lines, curves and other mathematically defined shapes </li></ul><ul><li>Bitmap </li></ul><ul><li>Images recorded as an array of pixels – typically used for the representation of photographic images </li></ul>

4. Vector Images <ul><li>Not really relevant to this talk but we need to define them so we know what we're not talking about </li></ul><ul><li>Stored as instructions, not pixels </li></ul><ul><li>eg: Draw Line from point A to point B with thickness T and colour C </li></ul><ul><li>or: Draw Circle with centre at X, radius R, line thickness T, line color C, inside colour Z </li></ul><ul><li>Essentially "drawings" or cartoons </li></ul><ul><li>Created by specialist tools such as Adobe Illustrator or Corel Draw </li></ul>

5. Vector Images <ul><li>Files are typically quite small as they contain just simple instructions not information about every pixel </li></ul><ul><li>Resolution Independent – nothing in the instructions need specify absolute measurements – can all be relative to the picture size </li></ul><ul><li>Vector images can be resized (and enlarged in particular) without any loss of quality </li></ul>

7. Bitmap Images <ul><li>Images stored as a rectangular matrix of pixels </li></ul><ul><li>Pixel = picture element = a coloured dot </li></ul><ul><li>Used for photographs, "paint" images, etc </li></ul><ul><li>Can capture more subtlety than vector images </li></ul><ul><li>The colour of every separate pixel is stored, so typical file sizes much larger </li></ul><ul><li>Pixel dimensions are fixed - cannot easily be enlarged without loss of quality </li></ul>

9. x 5 x 20

10. File Sizes <ul><li>Bitmap files typically larger than vector files </li></ul><ul><li>For photos, need at least 8-bits for each of the three primary colours (Red, Green, Blue) </li></ul><ul><li>Inkjet printers typically print at 300 or 600 dots per inch (dpi) </li></ul>Picture Size Resolution (dpi) Pixel Size Pixels File Size 6" x 4" (postcard) 300 1800 x 1200 2M 6 MB 6" x 4" (postcard) 600 3600 x 2400 8M 24 MB 10" x 8" 300 3000 x 2400 7M 21 MB 10" x 8" 600 6000 x 4800 28M 84 MB

11. Compression <ul><li>Lossless </li></ul><ul><li>Reduce file size without losing image quality Not as effective as lossy compression Prioritise image quality over small file size </li></ul><ul><li>Lossy </li></ul><ul><li>Take advantage of limitations of human vision Discard “invisible” information Allow variable quality levels (compression) </li></ul>Lowest Compression Highest Compression Larger file size Smallest file size Best image quality Worst image quality

12. Original 1.5 MB High Lossy Compression 92 KB

13. Compression <ul><li>Lossless </li></ul><ul><li>RLE (Run Length Encoding) – Windows bitmap files (bmp, ico) </li></ul><ul><li>LZW (Lempel-Ziv-Welch) – GIF & TIFF files </li></ul><ul><li>ZIP – TIFF files </li></ul><ul><li>Lossy </li></ul><ul><li>JPEG (Joint Photographic Experts Group) </li></ul><ul><li>Best suited to photos and paintings of realistic scenes with smooth variations of tone and colour </li></ul>

14. Colour <ul><li>For photos, need 8-bits per primary colour </li></ul><ul><li>24-bits (3 bytes) per pixel </li></ul><ul><li>16M different colours </li></ul><ul><li>Can reduce file size if image does not need so many distinct colours </li></ul><ul><li>Use fewer bits per pixel – eg 8-bits (1 byte) </li></ul>

15. GIF Files <ul><li>Pictures can contain at most 256 different colours </li></ul><ul><li>File format defines a “palette” of 24-bit colours </li></ul><ul><li>Each pixel stored as an 8-bit index into this palette </li></ul><ul><li>Use 8-bits (1 byte) per pixel </li></ul><ul><li>LZW Compression – lossless </li></ul><ul><li>Good for images with limited set of colours such as logos, web buttons etc </li></ul><ul><li>Also support animation </li></ul><ul><li>Supported by all web browsers </li></ul><ul><li>Possible copyright problems </li></ul>

16. Animated GIF

17. Animated GIF

18. JPEG Files <ul><li>Full 24-bit colour – 16 million colours </li></ul><ul><li>Compressed with JPEG algorithm </li></ul><ul><li>Good for pictures with subtle colour variations eg: photographs </li></ul><ul><li>Typically produced by digital cameras </li></ul><ul><li>Supported by all web browsers </li></ul>

19. TIFF Files <ul><li>Tagged Image File Format </li></ul><ul><li>Owned by Apple but a published spec </li></ul><ul><li>Originally designed as a common format for scanners but now a popular professional format for colour images, photos, etc </li></ul><ul><li>Can hold various “tags” as well associated with the image eg: photographer, copyright, subject details, ... </li></ul><ul><li>Supports several compression formats – mostly lossless </li></ul><ul><li>Commonest is LZW, others include ZIP and JPEG and NONE!! </li></ul><ul><li>Many possible variations “ Thousands of Incompatible File Formats” </li></ul>

20. PNG Files <ul><li>Portable Network Graphics </li></ul><ul><li>Designed to replace GIF files as there was a patent issue with LZW compression </li></ul><ul><li>Also eliminates the restriction on number of colours </li></ul><ul><li>Does not support animation </li></ul><ul><li>Lossless compression (DEFLATE related to ZIP) </li></ul><ul><li>Supported by most modern web browsers </li></ul>

22. The End Extension Colour Compression Common Uses JPG, JPEG 24-bit Lossy Photos, web pics GIF 8-bit Lossless Web graphics – buttons, icons, etc PNG up to 24-bit Lossless Web – replacement for GIF TIF, TIFF 24-bit Lossless Professional Photos etc