Web Graphics

1. Web Graphics Nick Foxall SM5312 week 3: web graphics

2. Graphics on Computers • Any image displayed on a computer screen* is an array of small square dots of colour, called pixels. • There are two types of image representation used for computer graphics: • bitmaps • vector graphics. [*screen can now include almost any device, including mobile phones, PDAs, and flat panel TVs] SM5312 week 3: web graphics

3. Graphics on Computers: Bitmaps • Bitmaps • A bitmapped image consists of an array of colour values, one for each pixel in the image. SM5312 week 3: web graphics

4. Graphics on Computers: Bitmaps • Bitmaps… • are most suitable for images with continually varying tones, such as photographs. SM5312 week 3: web graphics

5. Graphics on Computers: Vectors • Vector Graphics • Created from the mathematical description of a picture, defined from a collection of geometrical shapes, together with stroke and fill information. SM5312 week 3: web graphics

6. Graphics on Computers: Vectors • Vector Graphics… • Are most suitable for line art, flat-colour drawings and patterns, and cartoon-style images SM5312 week 3: web graphics

7. Bitmaps vs. Vectors • Comparison Bitmap Vector Graphic SM5312 week 3: web graphics

8. Bitmaps vs. Vectors Bitmap Vector Graphic Resolution and device dependent: scales to the ‘size’ of the output device Larger file size Resolution and device independent: scalable (theoretically to any size) Smaller file size  SM5312 week 3: web graphics

9. Graphics for the web Bitmap Vector Graphic Used on the web Not used on the web (Except for SVG,and within Flash SWF)  MUST CONVERT SM5312 week 3: web graphics

10. Graphics on Screen • RGB • The colour of a pixel on any display is made up of proportions of the three additive primaries: red, green and blue. • The RGB colour model represents any colour by three numbers, specifying the relative proportions of red, green and blue. • With 24-bit colour (one byte for each of R, G and B) about 16.7 million different colours can be represented. SM5312 week 3: web graphics

11. Graphics on Screen: Colour Space • Colour Space • Colour spaces are a general mechanism for representing colours as a finite sequence of numerical values. They depend on the precise values used for red, green and blue. • sRGB is a standardized colour space recognised by the World Wide Web Consortium for use in web images • colorsync SM5312 week 3: web graphics

12. RGB in Photoshop • Always work on colour images for the web (and video) in RGB mode. • Black-and-white photos can be set to Greyscale mode. • Images in Indexed Color mode may have to be converted to RGB before any adjustments can be made SM5312 week 3: web graphics

13. Web Graphic Formats • Only 3 bitmapped image file formats supported in most web browsers: • GIF • JPEG • PNG SM5312 week 3: web graphics

14. Web Graphic Formats: GIF • GIF (Graphics Interchange Format) • Originally devised for users of the Compuserve Bulletin Board system in the 1980’s • GIF images are indexed colour images, supporting up to 256 colours only • GIFs can include more than one image in a single file (can support simple animation) • GIFs can support transparency (one colour only) • GIFs support lossless compression (though lossy compression can be added) • File extension: .gif SM5312 week 3: web graphics

15. Web Graphic Formats: JPEG • JPEG (Joint Photographic Experts Group) • A specification laid down by the Joint Photographic Experts Group, part of the International Standards Organisation (ISO) • JPEG images are 24-bit colour images (mostly RGB) • Only a single image can be stored in one JPEG file (no animation capability) • JPEGs do not support transparency • JPEGs support lossy compression, and allow for progressive compression / decompression • File extension: .jpg .jpeg SM5312 week 3: web graphics

16. Web Graphic Formats: PNG • PNG (Portable Network Graphics) • Devised as a replacement for the GIF format in the mid-1990s • PNG images can be saved as full 24-bit colour images, OR as indexed colour images: • PNG-24 • PNG-8 • Only a single image can be stored in one PNG file (no animation) • PNGs support transparency using alpha channels, meaning a range of transparency can be supported (e.g. a colour allowing a background to show through) • PNGs support lossless compression, and allow for progressive compression / decompression (called ‘interlaced’) • File extension: .png SM5312 week 3: web graphics

17. Web Graphics: Resolution • Standard screen resolution is generally agreed to be 72 ppi (pixels per inch) • The actual physical size of one screen from another may vary though: • a 1024 x 768 pixel screen may be 17 inches (diagonal) physical size, or 20 inches (diagonal) physical size — its the size of the pixels that are different • Mobile devices now have very fine pixels — 3.5 inch screens, but up to 166 pixels per inch, creating 480 x 320 pixel screens • A 72 ppi image will always occupy the same proportion of a screen, no matter how big or small the screen is physically SM5312 week 3: web graphics

18. Web Graphics: Resolution & Resampling • Images for embedding in Web pages should always be saved at screen resolution, which is taken to be 72 ppi • The process of changing an image’s resolution is called resampling, and always potentially involves a loss of quality • When the resolution is reduced, the process is called downsampling SM5312 week 3: web graphics

19. Web Graphics: Resolution & Resampling • We often need to downsample images for the web to get them to screen resolution (72 ppi) AND to get them to an appropriate pixel dimension required for a web page layout • This saves file size, AND reduces unnecessary use of bandwidth when users access your page SM5312 week 3: web graphics

20. Web Graphics: Resampling • The 2 most common algorithms for resampling are; • Bilinear Interpolation • Bicubic Interpolation • Bicubic is often preferred, as itproduces better results SM5312 week 3: web graphics

21. Web Graphics: Compression • Compressing bitmapped images reduces the amount of storage they require, AND the time they take to transfer over a network (bandwidth usage) • Compression algorithms may be lossless or lossy. • Lossless: file is compressed, without any loss of original image quality • Lossy: file is compressed, but with (permanent) loss of original image quality; • Degree of loss dependent on amount of compression: a balance has to be found SM5312 week 3: web graphics

22. Web Graphics: Lossless Compression • Rearranges data in the image file, but does not discard data • Works better for ‘graphic’ style images, and for text-turned-to-image situations, where large blocks of colour are more effectively compressed • Lossless compression algorithms include LZ77, LZ78, LZW and Huffman • GIF and PNG web file formats use lossless compression SM5312 week 3: web graphics

23. Web Graphics: Lossy Compression • Rearranges data in the image file, and discards data that is (generally) not easily perceived by the eye • Works better for continuous tone images, photographs • The JPEG web file format use lossy compression, and employs its own compression algorithm • Programmes like Photoshop allow the designer to control and compare the degree of compression against the loss in image quality, and strike a balance SM5312 week 3: web graphics

24. Web Graphics: Quality vs. Compression Image quality File size SM5312 week 3: web graphics

25. Web Graphics: Anti-aliasing • The smoothing of fine lines and edges in order to produce better results at lower (i.e. screen) resolutions • Anti-aliasing softens “the jaggies” —the jagged edge effect: • Particularly useful for rendering text as a graphic SM5312 week 3: web graphics

26. Web Graphics: Transparency (indexed) • Transparency (a transparent background, or a transparent area of an image) can be set in GIF and PNG file formats • GIF and PNG-8 (both indexed colour formats) support selection of a single colour as a transparent colour. • Getting the edges of other colours to look smooth against the image’s final background involves dithering SM5312 week 3: web graphics

27. Web Graphics: Transparency (alpha) • Transparency (a transparent background, or a transparent area of an image) can be set in GIF and PNG file formats • PNG-24 uses alpha channel transparency • Meaning degrees of transparency (or opacity) can be included in a PNG-24 file, allowing a background to show through in various ways SM5312 week 3: web graphics

28. Web Graphics in XHTML • Images may be embedded in an XHTML document using the empty, inline img element, whose src attribute’s value is the URL of a GIF, JPEG or PNG file. Example: • <img src=“images/forest.png” alt=“Forest Image”> • The compulsory alt attribute provides a short text alternative. • <img src=“images/forest.png” alt=“Forest Image” title=“The forests of Canada look spectacular”> • A CSS title attribute also provides a small text box that describes an image in more detail when rolled over. SM5312 week 3: web graphics

29. Web Graphics in XHTML • Images can be made into clickable hyperlinks. Simply wrap a hypertext reference a href tag around the img tag: • <a href=http://www.cityu.edu.hk><img src=“images/forest.png” alt=“Forest Image”></a> • This is mostly used for creating image-based navigation buttons • The image will likely have a blue border, similar to the text underline, indicating a hyperlink. But normally we use CSS to hide or turn off all image hyperlink borders. Example: • img { border:0; } SM5312 week 3: web graphics

30. Web Graphics in CSS • Images may be referenced in a CSS document or specification, usually with a simple URL link to the image. • Images can be used for backgrounds and borders in CSS. • Example for a background image in the body element: • body { background-color: #FFFFFF; background-image: url(background.png); background-repeat: repeat-x; } SM5312 week 3: web graphics

31. Web Graphics in XHTML: image maps • An image map contains “hot spots”, which act as link anchors. • “Hot spots” may be defined by the shape and coords attributes of area or a elements within a map element • “Hot spots” are referred to by a usemap attribute of the img tag. • The easiest way to create image maps is within DreamWeaver! SM5312 week 3: web graphics

32. Other Web Image Formats • SVG (Scalable Vector Graphics) • A vector graphics markup language recommended by the W3C (World Wide Web Consortium) • Has little support and is rarely used • SWF (ShockWave Flash) • Flash animations employ vector graphics, although since Flash 7, bitmap elements and effects have also been added • Both formats are embedded into XHTML documents using the object tag SM5312 week 3: web graphics