1 / 15

Web Graphics

Web Graphics. Colours and Display. Graphics and Modems 28.8kbps = 3.6 KB per second 36 KB takes 10 seconds to load. Pixels and color. One bit black and white display. Pixels and colour (continued). Pixels and colour (continued) 8-bit or 256 colour displays. Pixels and colour (continued)

betha
Download Presentation

Web Graphics

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

  2. Colours and Display • Graphics and Modems • 28.8kbps = 3.6 KB per second • 36 KB takes 10 seconds to load. • Pixels and color

  3. One bit black and white display • Pixels and colour (continued)

  4. Pixels and colour (continued) • 8-bit or 256 colour displays

  5. Pixels and colour (continued) • 24-bit “true colour” displays

  6. 256 colours - “palette” “index” or CLUT (colour look up table” • Pixels and colour (continued) True-colour or 24-bit images - each bit has 24 bits dedicated to it, usually in three layers.

  7. Graphic file format • GIF files – Graphic Interchange format. • 256 colours • GIF File compression • Lempel Zev Welch LZW - lossless • Squeezes out inefficiencies in data storage eg large areas of same colour.

  8. Non-interlaced GIF • downloads one line of pixels at a time • Interlaced • stored in a format that allows browsers to begin with low resolution

  9. JPEG • Joint Photographic Experts Group • 24 bit or true colour • used when colour fidelity is paramount • degree of compression=degree of quality • JPEG discards “unnecessary” data - lossy image technique

  10. Delete sample documenticons and replace with working document icons as follows: • From Insert Menu, select Object... • Click “Create from File” • Locate File name in “File” box • Make sure “Display as Icon” is checked • Click OK • Select icon • From Slide Show Menu, Select “Action Settings” • Click “Object Action” and select “Edit” • Click OK

  11. JIF JPG Medium quality JPG Low quality

  12. Uses for GIF and JPEG • Delete sample documenticons and replace with working document icons as follows: • From Insert Menu, select Object... • Click “Create from File” • Locate File name in “File” box • Make sure “Display as Icon” is checked • Click OK • Select icon • From Slide Show Menu, Select “Action Settings” • Click “Object Action” and select “Edit” • Click OK • JPEG - complex photographic illustrations etc where compression does not degrade image quality. • Advantages of GIF • All graphics Web viewers support the GIF format • GIFs of diagrammatic images look better • GIF supports transparency and interlacing

  13. Advantages of JPEG images • huge compression ratios for faster downloads • Gives excellent results for photographs and medical images • Supports full-colour images (24-bit “true colour” images)

  14. Delete sample documenticons and replace with working document icons as follows: • From Insert Menu, select Object... • Click “Create from File” • Locate File name in “File” box • Make sure “Display as Icon” is checked • Click OK • Select icon • From Slide Show Menu, Select “Action Settings” • Click “Object Action” and select “Edit” • Click OK • Dithering • Full colour 24 bit graphic is converted to a black and white. Dithering enables pixels of varying shades to be used to give the impression of fine detail. It can also be used in colour graphics. Dithering is very useful when more colours are needed than are available.

  15. Questions • What is one major consideration when displaying graphics on a web page? • How is colour typically displayed on a computer? • Describe one advantage of GIF. • Describe one advantage of JPEG. • Why is dithering used?

More Related