1. 44212: Web-site Development Optimising Images for Web-pages Ian Perry Room:C49 Extension:7287 E-mail:I.P.Perry@hull.ac.uk http://itsy.co.uk/ac/0506/Sem1&2/44212_WSD/

2. Ian Perry44212: Web-site Development: Optimising Images for Web-pagesSlide 2 Why Optimise Images?  Because they are often much bigger than they need to be! and can be modified without any (much?) visible difference for the user.  What makes an Image BIG? Physical Dimensions (Height & Width) Resolution (Number of Pixels) Colour Depth (No. of Colours) Compression Method (Lossless or Lossy)

3. Ian Perry44212: Web-site Development: Optimising Images for Web-pagesSlide 3 Physical Dimensions  i.e. Height & Width: 1 x 1 cm 6Kb 3 x 3 cm 28Kb 5.5 x 5.5 cm 66Kb  Increasing Physical Dimensions results in an exponential increase in File Size.

4. Ian Perry44212: Web-site Development: Optimising Images for Web-pagesSlide 4 Screen Resolution Standards StandardResolutionNo. of PixelsScreen Size? VGA640x480307,20014” SVGA800x600480,00015” or 17” SVGA1024x768786,43217” or 19” XGA1152x864995,32817”, 19” or 21” Vesa1280x10241,310,72019” or 21” Vesa1600x12001,920,00021” +  The most popular screen resolution is ‘currently’ SVGA (1024x768), however, there are; still a LOT of SVGA (800x600) users out there. an increasing number of users with XGA (1152x864) or Vesa (1280x1024).

5. Ian Perry44212: Web-site Development: Optimising Images for Web-pagesSlide 5 Resolution  i.e. Number of Pixels per Inch (PpI): 360 x 360 Pixels 3 x 3 cm, 28Kb 300 PpI 720 x 720 Pixels 3 x 3 cm, 69Kb 600 PpI 1441 x 1441 Pixels 3 x 3 cm, 169Kb 1200 PpI  ‘Normal’ Printer Resolution is 200 to 300 DpI.  ‘Normal’ Screen Resolution is only 72 to 96 PpI.

6. Ian Perry44212: Web-site Development: Optimising Images for Web-pagesSlide 6 Bits & Colours BitsColours 12 24 416 8256 BitsColours 1665,536 2416,777,216 324,294,967,296 64Lots!  256 Bit colour is considered the minimum for any Multi-media application.

7. Ian Perry44212: Web-site Development: Optimising Images for Web-pagesSlide 7 Colour Depth  i.e. No. of Colours (displayed simultaneously): 591 x 591 Pixels 300 PpI, 5 x 5 cm 8 Bit = 1028Kb16 Bit = 2051Kb 591 x 591 Pixels 300PpI, 5 x 5 cm  There is a direct relationship between the No. of Bits and the File Size.

8. Ian Perry44212: Web-site Development: Optimising Images for Web-pagesSlide 8 Web Safe Colours?  Only 216 Colours? 8 Bits can generate 256 different Colours, but there are only 216 Web Safe Colours.  HEXadecimal Colour Codes: General Format: #RRGGBB 16 Permissible Values: 0 to 9 & A to F

9. Ian Perry44212: Web-site Development: Optimising Images for Web-pagesSlide 9 Web Safe Colour Examples  To be Web-safe only use combinations of: 00, 33, 66, 99, CC & FF.  E.g.: #000000 (black) #FFFFFF (white) #FF0000 (red) #00FF00 (green) #0000FF (blue) #999999 (grey) #FF00FF (fuchsia) #00FFFF (cyan) #FFFF00 (yellow) #00FF00 (lime)

10. Ian Perry44212: Web-site Development: Optimising Images for Web-pagesSlide 10 Compression  A Simple Method Suppose we have a 6 x 4 grid of pixels; some of which are white & some of which are black. WWWWWW WBBBBW WBBBBW WWWWWW Simple Bit-map = 24 Bits Compressed File = 10 Bits However, if we look for sequences of the same colour? W7B4W2B4W7

11. Ian Perry44212: Web-site Development: Optimising Images for Web-pagesSlide 11 Two Types of Compression  Lossless Compression The previous slide is an example of lossless compression, where an exact copy of the original file can be re-created from the compressed file. Can be used to compress any type of file.  Lossy Compression Some information is lost when compression takes place, which can not be recovered when the file is decompressed. Ok for most image files, but can not be used to compress files such as computer software packages or documents. Any loss of data from such files would not be acceptable.

12. Ian Perry44212: Web-site Development: Optimising Images for Web-pagesSlide 12 Why Do We Need To Bother?  Because people DO NOT like waiting! As a rule of thumb, let us assume that each 2.5Kb of data takes around 1 second to ‘arrive’.  The text in an HTML file is relatively small, for the screen space it can occupy: A 5Kb text file will fill your computer screen, in just 2 seconds.  Image files, on the other hand, are not so space efficient: This small Image is 2.636Kb =>

13. Ian Perry44212: Web-site Development: Optimising Images for Web-pagesSlide 13 Image Types?  Lots of Image file formats:.bmp,.eps,.gif,.pcx,.png,.jpg,.tif,.wmf, etc.  Two main Image Types for the Web: each with their own advantages & disadvantages.  GIF - Graphics Interchange Format: simple graphics files (max 256 colours).  JPG (or JPEG) - Joint Photographic Experts Group : complex graphics files (millions of colours).

14. Ian Perry44212: Web-site Development: Optimising Images for Web-pagesSlide 14 GIF Files  Graphics Interchange Format: simple graphics files. max 256 colours. nominally lossless compression.  Suitability? Anything that has big blocks of solid colours, e.g.: Logos Background Images

15. Ian Perry44212: Web-site Development: Optimising Images for Web-pagesSlide 15 JPG Files  Joint Photographic Experts Group: complex graphics files. millions of colours. lossy compression.  Suitability? Image files with lots of subtle colour changes, shading, etc., e.g.: Photographs

16. Ian Perry44212: Web-site Development: Optimising Images for Web-pagesSlide 16 GIF vs. JPG (Simple Image) 2Kb GIF 20Kb JPG (0%) 14Kb JPG (30%) 12Kb JPG (50%)

17. Ian Perry44212: Web-site Development: Optimising Images for Web-pagesSlide 17 GIF vs. JPG (Photograph) GIF 24Kb JPG 16Kb

18. Ian Perry44212: Web-site Development: Optimising Images for Web-pagesSlide 18 So what?  Need to optimise all images we use on our Web-pages in order to keep download times ‘acceptable’, e.g.: 100Kb of data (i.e. an HTML file and associated images) may take around 20 Seconds to ‘arrive’.  To do this: keep the Physical Dimensions of images small. design for a 1024x768 pixel screen size. reduce Image Resolution to 72 or 96 PpI. use the ‘best’ image File Type.