SM5312 week 3: web graphics1 Web Graphics Nick Foxall

SM5312 week 3: web graphics2 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: 1.bitmaps 2.vector graphics. [*screen can now include almost any device, including mobile phones, PDAs, and flat panel TVs]

SM5312 week 3: web graphics3 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 graphics4 Graphics on Computers: Bitmaps Bitmaps… are most suitable for images with continually varying tones, such as photographs.

SM5312 week 3: web graphics5 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 graphics6 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 graphics7 Bitmaps vs. Vectors Comparison BitmapVector Graphic

SM5312 week 3: web graphics8 Bitmaps vs. Vectors 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 BitmapVector Graphic 

SM5312 week 3: web graphics9 Graphics for the web Used on the webNot used on the web (Except for SVG, and within Flash SWF) BitmapVector Graphic  MUST CONVERT

SM5312 week 3: web graphics10 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 graphics11 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 graphics12 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 graphics13 Web Graphic Formats Only 3 bitmapped image file formats supported in most web browsers: GIF JPEG PNG

SM5312 week 3: web graphics14 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 graphics15 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 graphics16 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 graphics17 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 graphics18 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 graphics19 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 graphics20 Web Graphics: Resampling The 2 most common algorithms for resampling are; Bilinear Interpolation Bicubic Interpolation Bicubic is often preferred, as it produces better results

SM5312 week 3: web graphics21 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 graphics22 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 graphics23 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 graphics24 Web Graphics: Quality vs. Compression Image quality File size

SM5312 week 3: web graphics25 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 graphics26 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 graphics27 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 graphics28 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: The compulsory alt attribute provides a short text alternative. A CSS title attribute also provides a small text box that describes an image in more detail when rolled over.

SM5312 week 3: web graphics29 Web Graphics in XHTML Images can be made into clickable hyperlinks. Simply wrap a hypertext reference a href tag around the img tag: 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 graphics30 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 graphics31 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 graphics32 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