1. Web Programming– UFCFB3-30-1 Lecture 7
Instructor : Mazhar H Malik
Global College of Engineering and Technology

2. Graphics and Colour for the Web LO 2, 6
Lecture 7
Graphics and Colour for the Web
LO 2, 6
Lecture 7

3. In this lecture…
Why use graphics and colour, danger of over-use and inappropriate use
Pixels and resolution
Raster graphic file types gif, jpg, png
RGB colour model, hexadecimal, web safe colours, and colour depth
Lecture 7

4. What is a graphic? A communication tool: Why use a graphic?
picture, chart or illustration
Why use a graphic?
Stress key points
Gain attention
Convey a message without words
Graphics can:
Communicate a message
Educate people
Persuade an audience
Lecture 7

5. What are graphics files?
A graphics file is a representation of an image used to convey visual information
Graphics files include, but are not limited to:
Photographs
Scan
Clip art
Digital art
Icons and bullets
Backgrounds
Lecture 7

6. A graphic image colour can be:
Single colour (black/white) line art
Greyscale (shades of grey)
Colour, usually 256 colours, thousands of colours, or millions of colours
Photo quality images generally need at least 256 colours, but are much better with millions of colours
Lecture 7

7. Images are made up of pixels
Lecture 7

8. Pixels Images on-screen are defined in terms of “pixels”
Pixels are the basic unit of programmable colour
Each pixel contains colour information
Pixels are measured in pixels per inch (ppi)
When printed, pixel squares become dots
The more pixels (dots) per inch, the higher the resolution
The higher the resolution, the higher the quality – and the file size
Lecture 7

9. Web Graphic Resolution
Most monitors have a resolution of 72ppi
Therefore, web graphics only need a resolution of 72ppi
A higher resolution results in a larger (i.e. slower) file for no appreciable improvement in appearance
A graphic that is to be printed needs to have a resolution of 300 dpi for quality
Many web graphics look good on screen and terrible when printed
Lecture 7

10. Screen resolution This is different to picture resolution
Refers to the number of pixels available on the screen
High resolution 1600x1200; Low resolution 1024x768
Lecture 7

11. Raw images Huge Digital cameras with 5 Megapixel resolution
2739 x pixels = 10 x screen (800x600)‏
Raw = 15MB file
Stupid to send files this size
Compress the files
Pixels – 450x300 is large enough for the screen
Representation
Lecture 7

12. Image Descriptions Two types Raster (bitmapped) Vector
Raster images (bit mapped)‏
Vector images (descriptions)‏
Raster (bitmapped)
Photographs are raster images.
Painting programs usually make raster graphics.
Vector
Drawing programs make shapes and edit them.
True type fonts are defined by vectors and curves.
Flash on the web is done with vectors
Lecture 7

13. Compression Lossless: Lossy: Concepts: a→b, b  c, a = c
Throw away unnecessary information
Remove redundancy
Resolution and size
Lecture 7

14. File format for web graphics
The bitmap (also called raster) format mimics on-screen pixels
Images are saved in the form of pixels, and each pixel contains the colour information for that pixel
Examples of this file format used on the web are .gif .jpg and .png files
Lecture 7

15. Bitmap vs. Vector
Lecture 7

16. Understanding Graphic Files Formats
You can currently use only three image file formats on the Web: GIF, JPG, and PNG. Vector format SVG, is not yet in common use.
These formats all compress images to create smaller files. Knowing which file format to use for which type of image is important.
If you choose the wrong file type, your image won’t compress or display properly
Lecture 7

17. GIF
GIF uses a lossless compression technique, meaning that no color information is discarded when the image is compressed
The color depth of GIF is 8-bit, allowing a palette of no more than 256 colors
GIF excels at compressing and displaying flat color areas, making it the logical choice for line art and color graphics
Lecture 7

18. GIF Transparency
With GIF files, you can choose any one color in an image to appear as transparent in the browser
Lecture 7

19. GIF Animation
The GIF format lets you store multiple images and timing information about the images in a single file
Lecture 7

20. JPG JPG is best for photographs or continuous tone images
JPGs are 24-bit RGB images that allow millions of colors
JPGs use a “lossy” compression routine especially designed for photographic images. When the image is compressed, some color information is discarded, resulting in a loss of quality from the original image.
Lecture 7

21. JPG
When you create the JPG file, you can also manually balance the amount of compression versus the resulting image quality
The higher the compression, the lower the image quality.
Lecture 7

22. JPEG Lossy compression – choose how much to throw away.
JPG not designed for this sort of image
Notice the blocky patches
JPEG
SVG
PNG
100%
20% 2%
0.72
3.52
9.67
3.52
0.76
Lecture 7

23. GIF vs JPEG
Lecture 7

24. PNG A royalty-free file format that is intended to replace GIF
This lossless format compresses 8-bit images to smaller file sizes than GIF
PNG supports transparency and interlacing but not animation
Because PNG doesn’t compress your 24-bit images as well as JPG, don’t use it for photos.
Lecture 7

25. SVG A new standard from the W3C
A language for describing two-dimensional graphics using XML
SVG graphics are scalable to different display resolutions and are printable
Not yet supported by most browsers
Lecture 7

26. Using Interlacing & Progressive Display
Interlacing and progressive display are generally the same thing—the gradual display of a graphic in a series of passes as the data arrives in the browser
You can choose this display option when creating GIF, PNG, and JPG files
Lecture 7

27. Lecture 7

28. Colour depth Each pixel in an image holds colour information
Usually either 8, 16 or 24 bits
More bits = more colour information
but larger file size
Lecture 7

29. Colour models There are many colour models
The term 'light blue' can have many interpretations
Need a precise system for describing colours
A colour model is a system used to organize and define colours according to a set of basic properties
These properties, called colour values or colour components, are expressed in a variety of numerical forms
RGB is commonly used to describe web colours
Lecture 7

30. RGB Colour Model
Different amounts of red, green and blue make other colours.
Additive colour model
e.g. computer displays
Colours result from transmitted light
Red+Green+Blue=White
When colour is added the result is always lighter Start out with black (the absence of all colours) and ADD Red, Green, and Blue (base colours)
Lecture 7

31. Describing RGB colours
There are 256 (i.e 0 to 255) possible values for each of red, blue, and green
Red
Green
Blue
Example
255
100
102
204
Lecture 7

32. Describing RGB colours in hexadecimal
The hexadecimal number system is base 16
1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
Each pair describes R or G or B
Written as "#RRGGBB"
Red
Green
Blue
Example FF 00 64 66 CD
Lecture 7

33. Help with colour Many websites help with hexadecimals
Colours can be specified by name e.g. "red"
Try to avoid this as not all browsers support it
Lecture 7

34. Web palette colours Web palette colour chart
A set of 216 colours that will not shift or dither
Also called 'web safe colours'
Are made up using combinations of hexadecimals
00, 33, 66, 99, CC and FF
Lecture 7

35. Summary
You currently can use only three image file formats on the Web: GIF, JPG, and PNG.
These formats all compress images to create smaller files. Unless you choose the appropriate file format, your image will not compress and appear as you expect.
SVG is a new file format from the W3C that offers vector-based graphics for the Web.
Lecture 7