Web Graphics

1
Web Graphics
2
Contents

• Software
• Vector Graphics and Pixel Based
• Transparent Images
• Compression
• GIF vs. JPEG
• Animated GIF

3
Software

• Fireworks
• Photoshop
• Paint Shop Pro
• Microsoft Paint

4

• Fireworks is in the same domain as PhotoShop
• Ideal for creating web-graphics
• Includes a diverse set of editing tools
• Has both bitmap and vector editing capabilities
• For export allows you to try out various
  optimisations
• - Can export in a variety of
• formats,
• e.g. JPEG and GIFs etc.
• Many third party extras are
• available to plug into the software
• Heavily compatible with aspects
• of PhotoShop

5
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

6
Types of Web Graphics

• PNG
• JPEG
• GIF

7
Vector Graphics/Pixel

• Vector
• Mathematical formula
• vector based shape can allow alterations to the
  shape itself by using handles
• Problem is that a special add-in is often
  required to display vector graphics on a web
  page.
• Bitmap/Rasterised
• created using individual pixels

8
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

9
Compression

• Compacting information
• Lossless
• Lossy
• Lossless
• All information retained
• Lossy
• Information is lost

10
Compression Lossless

• PSD 6.9 MB
• BMP 1.37 MB

11
Compression Lossless (2/3)

• PSD 6.9 MB
• BMP 1.37 MB

• Same image compressed using Photoshop (PSD),
  saved as Bitmap (BMP)

12
Compression Lossless (3/3)

• GIF 86KB

13
Compression Lossy (1/2)

• Image information
• Entropy data kept
• Redundancy data removed
• Lossy compression is where redundant information
  is deleted. For images this can be every 3rd or
  5th pixel, as images can contain hundreds or even
  thousands of pixels it is possible to remove a
  number of pixels without loosing the general
  image shape or information.

14
Compression Lossy (2/2)

• Original 453KB

• JPEG 4KB

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

16
FileSave as... what?! (1/2)
Original 2.9 MBs
GIF 161KBs
JPEG 275 KBs
Pictures require a high level of detail and is
often better to save using lossless compression
when lossy can degrade the image to much
17
FileSave as... what?! (2/2)
Original 372 KBs
JPEG 13 KBs
GIF 7KBs
Images for the web can often have very little
difference when different compression is used.
18
Animated GIF

• Number of different frames
• Saved in one file (can be very large)
• Play once or looped

http//www.webreference.com/dev/gifanim/
19
Animated GIF

• Made up of 7 frames
• 4 frames below
• Looped file

20
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

21
Summary

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