1. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Website Development Graphics Stewart Blakeway FML 213 blakews@hope.ac.uk http://hopelive.hope.ac.uk/computing/ 0151 291 3113

2. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE 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

3. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE 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

4. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE 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

5. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE 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

6. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE 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

7. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Computer images Two types of Computer images: Vector – Mathematical description – Lineart – blueprint Raster or Bitmap – Pixels - individual dots – Screenart – photograph

8. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Vector images Drawing Graphic described in terms of lines and curves – Vectors Vector information – Position – Colour – Line thickness Resolution independent

9. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE 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

10. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Image file types Many available BMP GIF JPG PNG PSD PSP TIFF ……………… plus many more

11. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE File types used by Web Browsers Web Browsers - image file types – GIF – JPG – PNG Supported by browsers because of compression capabilities

12. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE 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

13. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE 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

14. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Obtaining an Image Use someone else’s – Scanners – Web – Disk Make your own – Digital Camera – Draw it

15. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE 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

16. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JPEG - Colours 24 bits per pixel - 16 million colours – Smooth colour quality – Subtle tone and colour changes Separates the brightness information from colour hues

17. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE 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

18. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE 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

19. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE 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

20. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE GIF Format Raster (bit-mapped) Images Graphics Interchange Format Most Common file type on the Web Lossless compression filename.gif

21. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE 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

22. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE GIF Colours 8 bits per pixel – 256 colours – Colour indexing Mac and PCs handle 40 colours differently Browser Safe Palettes – Palette of 216 colours

23. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Palettes Adaptive WebSnap Adaptive Web216 Exact System Grayscale Black and White Uniform

24. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE 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)

25. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Example Transparent GIFs blend very nicely into a web page, rather than appearing with a surrounding box.

26. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE 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

27. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE 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

28. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE 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.)

29. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE 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

30. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE 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

31. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE PNG Portable Network Graphics filename.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

32. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE 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

33. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE 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)

34. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Thumbnail code

35. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Examples of an Optimised image The next set of slides demonstrate download times for a jpg image.

36. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Original 101 Seconds loading time 621 KB 1600 x 1200

37. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE 20% Compression 81 Seconds loading time 460 KB 1600 x 1200

38. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE 40% Compression 50 Seconds loading time 229 KB 1600 x 1200

39. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE 60% Compression 34 Seconds loading time 143 KB 1600 x 1200

40. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE 70% Compression 18 Seconds loading time 72 KB 1600 x 1200

41. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE 80% Compression 13 Seconds loading time 50 KB 1600 x 1200

42. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE 90% Compression 10 Seconds loading time 40 KB 1600 x 1200

43. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE 99% Compression 5 Seconds loading time 35 KB 1600 x 1200

44. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Reducing the quality of the picture will reduce the file size The picture you have just seen is – 1600 x 1200

45. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE 50% Compression 4 Seconds loading time 30 KB 640 x 480

46. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE 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

47. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE 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

48. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Questions?