1 / 32

Web Graphics

Web Graphics. Nick Foxall. 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 .

johana
Télécharger la présentation

Web Graphics

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related