Web graphics
Download
1 / 32

Presentation File - PowerPoint PPT Presentation


  • 245 Views
  • Updated On :

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 .

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Presentation File' - johana


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Web graphics

Web Graphics

Nick Foxall

SM5312 week 3: web graphics


Graphics on computers
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


Graphics on computers bitmaps
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


Graphics on computers bitmaps1
Graphics on Computers: Bitmaps

  • Bitmaps…

    • are most suitable for images with continually varying tones, such as photographs.

SM5312 week 3: web graphics


Graphics on computers vectors
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


Graphics on computers vectors1
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


Bitmaps vs vectors
Bitmaps vs. Vectors

  • Comparison

Bitmap

Vector Graphic

SM5312 week 3: web graphics


Bitmaps vs vectors1
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


Graphics for the web
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


Graphics on screen
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


Graphics on screen colour space
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


Rgb in photoshop
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


Web graphic formats
Web Graphic Formats

  • Only 3 bitmapped image file formats supported in most web browsers:

    • GIF

    • JPEG

    • PNG

SM5312 week 3: web graphics


Web graphic formats gif
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


Web graphic formats jpeg
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


Web graphic formats png
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


Web graphics resolution
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


Web graphics resolution resampling
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


Web graphics resolution resampling1
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


Web graphics resampling
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


Web graphics compression
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


Web graphics lossless compression
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


Web graphics lossy compression
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


Web graphics quality vs compression
Web Graphics: Quality vs. Compression

Image

quality

File

size

SM5312 week 3: web graphics


Web graphics anti aliasing
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


Web graphics transparency indexed
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


Web graphics transparency alpha
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


Web graphics in xhtml
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


Web graphics in xhtml1
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


Web graphics in css
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


Web graphics in xhtml image maps
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


Other web image formats
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


ad