Web Graphics

1
Web Graphics

• Nick Foxall

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

3
Graphics on Computers Bitmaps

• Bitmaps
• A bitmapped image consists of an array of colour
  values, one for each pixel in the image.

4
Graphics on Computers Bitmaps

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

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.

6
Graphics on Computers Vectors

• Vector Graphics
• Are most suitable for line art, flat-colour
  drawings and patterns, and cartoon-style images

7
Bitmaps vs. Vectors

• Comparison

Bitmap
Vector Graphic
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
?
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
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.

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

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

13
Web Graphic Formats

• Only 3 bitmapped image file formats supported in
  most web browsers
• GIF
• JPEG
• PNG

14
Web Graphic Formats GIF

• GIF (Graphics Interchange Format)
• Originally devised for users of the Compuserve
  Bulletin Board system in the 1980s
• 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

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

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

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

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 images resolution is
  called resampling, and always potentially
  involves a loss of quality
• When the resolution is reduced, the process is
  called downsampling

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

20
Web Graphics Resampling

• The 2 most common algorithms for resampling are
• Bilinear Interpolation
• Bicubic Interpolation
• Bicubic is often preferred, as itproduces better
  results

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

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

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

24
Web Graphics Quality vs. Compression
Image quality
File size
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

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 images final background involves
  dithering

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

28
Web Graphics in XHTML

• Images may be embedded in an XHTML document using
  the empty, inline img element, whose src
  attributes value is the URL of a GIF, JPEG or
  PNG file. Example
• ltimg srcimages/forest.png altForest Imagegt
• The compulsory alt attribute provides a short
  text alternative.
• ltimg srcimages/forest.png altForest Image
  titleThe forests of Canada look spectaculargt
• A CSS title attribute also provides a small text
  box that describes an image in more detail when
  rolled over.

29
Web Graphics in XHTML

• Images can be made into clickable hyperlinks.
  Simply wrap a hypertext reference a href tag
  around the img tag
• lta hrefhttp//www.cityu.edu.hkgtltimg
  srcimages/forest.png altForest Imagegtlt/agt
• 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 border0

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 backgr
  ound-image url(background.png)
  background-repeat repeat-x

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!

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