Web Programming– UFCFB3-30-1 Lecture 7 Instructor : Mazhar H Malik Email : mazhar@gcet.edu.om Global College of Engineering and Technology

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

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

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

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

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

Images are made up of pixels Lecture 7

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

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

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

Raw images Huge Digital cameras with 5 Megapixel resolution 2739 x 1825 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

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

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

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

Bitmap vs. Vector Lecture 7

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

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

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

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

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

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

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

GIF vs JPEG Lecture 7

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

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

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

Lecture 7

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

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

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

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

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

Help with colour Many websites help with hexadecimals http://www.ficml.org/jemimap/style/color/wheel.html Colours can be specified by name e.g. "red" Try to avoid this as not all browsers support it Lecture 7

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 http://www.pagetutor.com/common/bgcolors216.html Lecture 7

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