html5-img
1 / 23

Graphic File Formats

Graphic File Formats. Graphic Formats. Not like HTML, no single standard for what graphics may be used The web is intended to support a wide range of formats What is supported is controlled by the browser If browsers don’t support the format – don’t use it!. The Windows BMP Format.

avent
Télécharger la présentation

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. Graphic Formats • Not like HTML, no single standard for what graphics may be used • The web is intended to support a wide range of formats • What is supported is controlled by the browser • If browsers don’t support the format – don’t use it!

  3. The Windows BMP Format • OK for Windows based systems • Not good for MAC / UNIX / Mobile Devices • Could download “plugins” – but why should they?

  4. Three Graphic Formats of Interest • Graphics Interchange Format GIF • Joint Photographic Experts Group JPEG/JPG • Portable Network Graphics PNG

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

  6. GIFF and Compression • Small files are a good thing on the Web as they take less time to download • GIFF uses a system called the Lempel – Ziv Welch algorithm (LZW) • This process relies on the fact that certain patterns repeat within a file

  7. LZW Compression • Imagine we had a dictionary for each word in a book “the cat sat on the mat” becomes 1 2 3 4 1 5

  8. LZW Compression • Writes the dictionary as it compresses- any new “words” (repeating binary patterns) are added • Doesn’t need to transmit the dictionary as it can be worked out from the compressed data • Is called a “lossless” data format. • Lossless means that none of the image detail is lost by the compression process and still retains its original level of detail.

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

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

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

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

  13. We get an idea of what the image looks like without downloading the whole file

  14. GIFF Transparency

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

  16. The compression process creates errors in the image like so…

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

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

  19. However in photographs the JPEG is better

  20. JPEG compression • Relies on the fact that human vision has certain limitations. • Allows you to specify how much compression is applied to the original image, you may either opt for less compression higher quality or more compression lower quality.

  21. “Non lossy” v “lossy” formats, does it matter? • If it is a photo of a country scene then loss of information is probably not an issue. • If it is a brain scan, then having stray artefacts on the picture due to compression could result in wrong diagnosis!

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

  23. So why isn’t PNG the only graphics format on the Web? • Older browsers don’t support the format. • Internet Explorer 6 and below doesn’t represent transparencies. • Some developers just prefer GIF and JPEG. • Over time GIF and JPEG will probably be replaced by PNG.

More Related