1. Web Graphics By Chris Harding

2. Contents  Software  Vector Graphics and Pixel Based  Transparent Images  Compression  GIF vs. JPEG  Animated GIF

3. Software  Fireworks (Part of Macromedia Suite)  Photoshop  Paint Shop Pro  Microsoft Paint

4. Web Graphics  Should be kept small. Around 100K mark  Large graphics take time to download  Lots of small graphics can make a sight look good  But cause long page loading times

5. Types of Web Graphics  BMP  PNG  JPEG  GIF

6. Vector Graphics/Pixel  Vector:  Mathematical formula  Smooth edges  Bitmap/Rasterised:  Pixelated

7. Transparent Image  Can be JPEG or GIF  Best done with GIF  Can select one colour to be transparent or background  Best results make Background one colour (like pink!)  Select background for transparent layer

8. Compression  Compacting information  Lossless  Lossy  Lossless  All information retained  Lossy  Information is lost

9. Compression: Lossless (1/3)  Selected information is retained  Example:  aabbbccdddddee  2a3b2c5d2e

10. Compression: Lossless (2/3)  PSD: 6.9 MB  BMP: 1.37 MB

11. Compression: Lossless (3/3)  GIF: 86KB

12. Compression: Lossy (1/2)  Image information  Entropy – data kept  Redundancy – data removed

13. Compression: Lossy (2/2)  Original: 453KB ● JPEG: 4KB

14. Compression Methods  RLE (Run Length Encoding)  Lossless: common Windows file formats.  LZW (Lemple-Zif-Welch)  Lossless: TIFF, PDF, GIF, and PostScript.  Most useful for large areas of single color.  JPEG (Joint Photographic Experts Group)  Lossy: JPEG, TIFF, PDF and PostScript.  Continuous-tone images ie photographs  ZIP  Lossless: PDF and TIFF.  Most effective for large areas of single color.

15. File>Save as... what?! (1/2) Original 2.9 MBs JPEG 275 KBs GIF 161KBs

16. File>Save as... what?! (2/2) Original 372 KBs JPEG 13 KBs GIF 7KBs

17. Animated GIF  Number of different frames  Saved in one file (can be very large)  Play once or looped http://www.webreference.com/dev/gifanim/

18. Animated GIF  Made up of 7 frames  4 frames below  Looped file

19. Web Graphics with CSS  Use CSS with images to create visual effects Add round border to tables Roll over images Menu items  Practical tutorial on this topic next week

20. Summary  Software  Vector Graphics and Pixel Based  Compression Lossless Lossy  GIF vs. JPEG for different uses  Introduce Animated GIF