1 / 33

Graphic File Formats

Learn about manipulating digital images using binary representation, pixel bit systems, color depth, file sizes, compression, and popular formats like BMP, GIF, JPG, and PNG. Understand color resolution, dithering, interlacing, transparency, and file size calculations.

fsizemore
Download Presentation

Graphic File Formats

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Graphic File Formats

  2. Digital Images are represented by manipulating this…

  3. And this… .

  4. Meaning… Off

  5. And… . On

  6. Or rather .. • 0 zero • And • 1 One • (In fact this is true for everything we see in a computer system!)

  7. 1 Bit Images • Use a single bit to represent each pixel (dot on the screen) 00101

  8. Use more bits and display as a grid… • The following image is 61 pixels wide by 57 pixels high

  9. Quick Calculation of File Size • Image width 800 pixels • Image height 600 pixels 1 pixel = 1 bit, so image is 800 * 600 bits which is 480000 bits or divided by 8! (8 bits in a byte) gives us 60,000 bytes

  10. Make the grid larger and pixels smaller… Here we have increased the image resolution by using more dots per inch (dpi) Increasing dpi means we are cramming in more dots per area of image.

  11. This image is 512 pixels wide by 512 high • This type of image may be referred to as a binary image since each pixel is stored as a single zero or one • This kind of picture is also called a 1 bit monochrome image since it has no colour content

  12. 8 Bit Grey Scale Images • Representing shades of grey… Now 1 pixel = 8 bits

  13. 200 & Fifty 6 Shades of Grey

  14. File Size Calculations • 800 x 600 8 bit image = 480,000 bytes 800 x 600 = 480,000 pixels 1 pixel = 1 byte thus 480,000 bytes 8 x larger than 1 bit system

  15. File Size Calculations • 800 x 600 24bit colour = 1,440,000 bytes 800 x 600 = 480,000 pixels 1 pixel = 3 bytes thus 1,440,000 bytes 24 x larger than our first image (24 bit colour formats – JPEG, BMP)

  16. 24 Bit Colour • Files getting larger • We can now represent 16 million colours • The human eye can only see 10 million of them • Extra colours useful for image processing and special effects • Colour resolution is the number of colours a single pixel may display

  17. 8 bit Colour Images and Look up Tables Draw four blue dots RGB Example No of bytes = 12

  18. Using a Lookup Table Lookup Table Reducing the number of bytes in this example from 12 to 7 The GIF and PNG formats uses a look up table

  19. Only Record Unique Pixel Data Lookup Table

  20. Graphic Formats • We will now look at a few common file formats • BMP • GIF • JPG • PNG

  21. The Windows BMP Format • OK for Windows based systems • Not web friendly • Not good for MAC / UNIX / Mobile Devices

  22. Graphics Interchange Format (GIF) • Pronounce “giff” or “jiff” is a very popular format on the Web • This format was originally devised by CompuServe

  23. GIFF and Colour • Limited to 256 colours, so conversion from 16 million colours to the 256 colour GIF format will result in loss of colour resolution • Makes use of a colour lookup table to store the colour information • It only stores the colours that are in the image

  24. Dithering and GIFs Used to fool the human eye that there is more detail than there really is! A The original unchanged image B 1 bit monochrome with dithering C 1 bit monochrome without dithering – note the loss of detail D 8 bit colour with dithering – note the speckled effect which is common to this process A B C D

  25. GIFF, Dithering and Banding • Without dithering a GIFF file tends to develop harsh transitions called banding.

  26. Interlacing • Images on the web normally drawn from top left to right down the image • The GIFF format allows for a technique called interlacing which displays the image every eighth line at a time.

  27. We get an idea of what the image looks like without downloading the whole file (useful for low bandwidth)

  28. GIFF Transparency

  29. Joint Photographic Experts Group JPEG / JPG • A compression standard best applied to photographs or complex shading / lighting effects • Stores a complete black and white version of the image and most of its colour information • Not all of the colour information is retained, this makes JPEG a “lossy” format as some of the original image information is lost, especially in highly compressed files

  30. When using graphics with large areas of similar colour the GIF format is a better choice.

  31. Zoom in… The GIF is 2K, the JPEG is 15K.

  32. However in photographs the JPEG is better

  33. PNG Format • Offers better compression than GIF – ranging from 10 – 30 % • Is a lossless format so whatever colour data in the original will be present when viewed in the browser • Is not limited to 256 colours with full RGB capabilities • Supports interlacing • Supports transparent colours

More Related