1 / 20

Web Graphics

Web Graphics. By Chris Harding. Contents. Software Vector Graphics and Pixel Based Transparent Images Compression GIF vs. JPEG Animated GIF. Software . Fireworks (Part of Macromedia Suite) Photoshop Paint Shop Pro Microsoft Paint. Web Graphics. Should be kept small. Around 100K mark

lave
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 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

More Related