Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Website Development Graphics Stewart Blakeway FML 213 [email protected]

www.hope.ac.uk Faculty of Sciences and Social

Sciences

HO

PE

Website DevelopmentGraphics

Stewart Blakeway

FML 213

[email protected]://hopelive.hope.ac.uk/computing/

0151 291 3113


Sciences

HO

PE

Session Objectives

• Describe the different file types used in Web pages

• Demonstrate the correct use of file types in Web pages

• Demonstrate graphics optimisation• Describe the importance of the image file

size


Sciences

HO

PE

RGB Colour Model

• Known as the additive model• Cathode Ray tubes use RGB Model• All colours are made up of proportions of red,

green and blue.• Pure red, green and blue = white


Sciences

HO

PE

Colours on the Web

• RGB Colours– Numerical colour specification– Hexadecimal values from #00 to #FF– RGB code = #000000 – Each pair of digits represent combinations of of

red, green and blue• #0000FF = represents pure blue• #CCCCFF = represents a lighter shade of blue


Sciences

HO

PE

Display Definitions

• Display is organised into a grid– Pixels

• Resolution is defined in terms of pixels• Monitors display pixels per inch according to

their resolutions


Sciences

HO

PE

Web graphics

• Web graphics– Different to preparing a image for print

• Consider how the other person will receive the image– Download time

• File type• Compression

– The monitor they will use• Colours• Resolution


Sciences

HO

PE

Computer images

Two types of Computer images:• Vector–Mathematical description– Lineart – blueprint

• Raster or Bitmap– Pixels - individual dots– Screenart – photograph


Sciences

HO

PE

Vector images

• Drawing• Graphic described in terms of lines and curves– Vectors

• Vector information– Position– Colour– Line thickness

• Resolution independent


Sciences

HO

PE

Raster or Bitmap images

• Coloured pixels• Arranged on a grid– Like a mosaic

• A bitmap can be reduced in size• Can be enlarged...but– Degradation of quality


Sciences

HO

PE

Image file types

Many available• BMP• GIF• JPG• PNG• PSD• PSP • TIFF………………plus many more


Sciences

HO

PE

File types used by Web Browsers

• Web Browsers - image file types– GIF– JPG– PNG

Supported by browsers because of compression capabilities


Sciences

HO

PE

Images on the Web

• Images should be – Small– or– Worth seeing

• They may have a much larger file size than the Web page itself!

• Longer download time


Sciences

HO

PE

Download Times

• Vary according to the connection• Use images selectively• Not too many per page

• Typical guidance – total of 20 KB per page– no more than 6 images


Sciences

HO

PE

Obtaining an Image

• Use someone else’s– Scanners– Web– Disk

• Make your own– Digital Camera– Draw it


Sciences

HO

PE

JPEG or JPG format

• Raster images• Joint Photographic Experts Group• Most Common file type for photographs on

the Web– .jpg or .jpeg

• Progressive encoding– Image is brought into focus as it is loaded– Slight increase in file size


Sciences

HO

PE

JPEG - Colours

• 24 bits per pixel - 16 million colours– Smooth colour quality– Subtle tone and colour changes

• Separates the brightness information from colour hues


Sciences

HO

PE

JPEG Compression

• Lossy process – Information is lost in the compression

• Compression Ratios– Typically 10:1 down to 100:1– Greater the compression the smaller the file size– There is no ‘right’ compression ratio – Experiment, starting with the highest compression

ratio and smallest file size


Sciences

HO

PE

JPG Lossy Compression Method

• Algorithm divides the image into squares• Mathematics called Discrete Cosine

Transformation– Divides the squares into curves– Depending on the compression level, discards

some of the smaller (less significant) curves

• If over compressed ‘blockiness’ occurs


Sciences

HO

PE

JPEG Optimisation

Reduce the size of the image• Reduce the resolution to 70-75 pixels per

inch• Increase the compression as much as the

image can allow


Sciences

HO

PE

GIF Format

• Raster (bit-mapped) Images• Graphics Interchange Format• Most Common file type on the Web • Lossless compression

filename.gif


Sciences

HO

PE

Interlacing

• Means of storing a image file• As the image loads more and more detail

appears• Full resolution once downloaded completely• Users with slow connections need not wait

for full resolution to download


Sciences

HO

PE

GIF Colours

• 8 bits per pixel– 256 colours– Colour indexing

• Mac and PCs handle 40 colours differently• Browser Safe Palettes – Palette of 216 colours


Sciences

HO

PE

Palettes

• Adaptive• WebSnap Adaptive• Web216• Exact• System• Grayscale• Black and White• Uniform


Sciences

HO

PE

Transparency

• One colour of the palette is designated as transparent

• Image file sizes are slightly larger• Avoid a halo effect – make sure that the background of the images is

close to the background colour used in the web page (before making the background transparent)


Sciences

HO

PE

Example

Transparent GIFs blend very nicely into a web

page,

rather than appearing with a surrounding box.


Sciences

HO

PE

GIF Compression• Average compression ratio of

4:1 (depends on number of repeated colours)

• Uses pattern-recognition– Looks for patterns of same

coloured pixels – Represents the pattern with a

number (colour indexing)

1.6 KB

1.8 KB


Sciences

HO

PE

GIF files

• File size after compression

– Complex images • Many of different colours• Around 80% of the original file size

– Simple images• Few colours• Around 10% of the original file size


Sciences

HO

PE

Animated Gif Images

• Animated gif file– Single file stored in .gif format– Contains series of images / frames – User defined delay sequence– Animation can be

• Looped (Forever)• Finite (once, twice etc.)


Sciences

HO

PE

Anti-aliasing

• Adds intermediate colours to smooth edges (by mixing the colours of the image’s edges and the background’s colour)

• Increases the file size

• Curves need it more than rectangular shapes


Sciences

HO

PE

GIF optimisation

• Make the image as small as possible• Use as few as possible colours• Avoid anti-aliasing– But not at the cost of spoiling your image

• Reduce the number of colours in the palette


Sciences

HO

PE

PNG

• Portable Network Graphicsfilename.png

• Used to replace GIFs– Less common and not supported by older

browsers

• 48 bits per pixel• Good compression without loss of quality• Transparency and interlacing supported


Sciences

HO

PE

PNG optimisation

• Make the image a small as possible• Use as few colours as possible• Avoid anti-aliasing– But not at the cost of spoiling your image

• Reduce the number of colours in the palette


Sciences

HO

PE

Thumbnail images

• Smaller image linking to a larger image• Need two versions of the image– Small– Larger

• Fireworks has a Batch Process (File Batch Process..) to create the smaller images (thumbnails)


Sciences

HO

PE

Thumbnail code

<a href=“large_image.jpg”>

<img src=“small_image.jpg” alt=“click here to see a larger picture” height=“” width=“”>

</a>


Sciences

HO

PE

Examples of an Optimised image

• The next set of slides demonstrate download times for a jpg image.


Sciences

HO

PE

Original101 Seconds loading time621 KB1600 x 1200


Sciences

HO

PE

20% Compression81 Seconds loading time460 KB1600 x 1200


Sciences

HO

PE



Sciences

HO

PE



Sciences

HO

PE



Sciences

HO

PE



Sciences

HO

PE



Sciences

HO

PE



Sciences

HO

PE

• Reducing the quality of the picture will reduce the file size

• The picture you have just seen is– 1600 x 1200


Sciences

HO

PE



Sciences

HO

PE

• Reduce the size of the image to the minimum you can get away with

• Apply the maximum compression you can get away with

– More compression, less quality– Easy to reduce an image, not so easy to enlarge


Sciences

HO

PE

Fireworks Demonstration

• How to set transparency• How to reduce the size of the image• How to change the palette• How to reduce the quality• How to create a thumbnail


Sciences

HO

PE

Questions?

Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Website Development Graphics Stewart Blakeway FML 213 [email protected]

Documents

faculty of sciences

social sciences hope

social sciences hope

social sciences hope

images slide

web images

time slide

image file size slide