Session 1 Graphics

1
Session 1 Graphics

• Philip M Russell

2
Types of Graphics

• 3 types
• GIF
• Jpeg
• Png

3
Gif

• Developed by Compuserve
• Cross platform format
• Limited to 256 colours
• Gifs can be linked to form an animation
• Supports transparency
• Supports interlacing
• Own graphics gif file

4
JPEG

• Developed by Joint Photographic Experts Group
• Cross platform format
• Uses up to 16.7 million colours
• Many browsers only support 256 colours max
• Used for Photographs
• Used by most cameras
• Photograph jpeg

5
PNG

• Native format for fireworks
• Very large
• Can do most things
• Layered
• Can compress

6
Interlacing

• Loads every eighth line
• Each line occupies 8 lines
• Then loads every fourth line
• Each line occupies 4 lines
• And so on
• bringing image into focus

7
Interlacing Demo
8
Transparency

• Background of image is invisible
• Lets the picture behind show through
• Only works with png and gif
• Can select a colour to make invisible

9
Transparency demo
10
Compression

• Jpeg images can the compressed to make the file
  smaller.
• The Quality however does get worse.
• Fortunately the screen resolution is poor.

11
Compression Example
12
Flash CS3

• Vector Graphics
• Small size for a large image
• Scalable
• Built into or addon to most browsers
• Animation
• Can Navigate / link

13
Packages

• Photoshop
• Fireworks
• Illustrator
• Corel Xara
• 3-D Studio

14
Conversion

• Only gif, jpg and png can be used
• Convert other formats to the above
• Most formats can be interchanged

15
Adding the Image to the web

• Edit the image
• Save as a suitable size.
• Save in correct format
• Decide its location on the page
• Drap an Drop the image
• Add alt attribute

16
Hyperlinking the Image

• Links image to a URL
• Create graphic and insert in the page
• Assign this the border0 attribute
• Around the image place a hypertext link

17
Backgrounds

• Use small images with muted colours
• Small images tessellate
• Wide graphics produce lines as they tessellate
• Image needs to have low contrast

18
Watermarks

• Background image stays still, text moves over the
  front
• Used in Style sheets
• Can be a background to any tag

19
Client Side Image Maps

• One image
• Different areas can have different links
• Processed on your machine

20
Server Side Image Maps

• Image Map compiled, stored and processed on the
  Server
• More client server interaction
• Can be faster under certain circumstances.

21
Animation

• Several gif images, chained together to form a
  moving image
• Flash can be programmed