Web Site Design Image Optimisation

1
Web Site Design - Image Optimisation

• Hooman Nili with special thanks to Steve Cockett
• Some illustrations have been copied from Yale.edu
  (Lynch and Horton )

2
Why do we optimise images for web use? In short
to provide the user with the highest quality,
most consistent graphical imagery that is
accessible in the shortest time. This means
choice of suitable file format, resolution, file
size, bit depth, compression and other factors.
3
Images and the Web

• One of the great advantages of the web is its
  ability to distribute images world-wide.
• This is particularly true for colour images,
  which are technically challenging and expensive
  to reproduce on paper.

4
Some problems the Web poses for image reproduction

• Limited resolution of computer monitors (and web
  browser windows).
• Small range of file formats supported by popular
  web browsers.
• Limited network bandwidth to the end user places
  limits on file size.
• Different operating system software and monitor
  hardware results in poor colour and luminance
  matching between author and user(s).
• Possibly limited video memory of user machines
  limits colour bit depth.

5

• Importance of user network bandwidth
• Connection Type Download in Kilobytes/sec
  (max)
• 28.8 Kbit/sec modem 3.5
• 56 Kb Kbit/sec modem 6.8
• ISDN Modem 128 Kbit/sec 15.6
• ADSL Connection 512 Kbit/sec 62.5
• Ethernet LAN (10 Mbit) 1,220
• It should be stressed these figures are maximums
  - real world
• performance will be considerably poorer
• (perhaps 1/3 to 2/3 of the above figures)

6
An example page budget

• If we assume the maximum download speeds
• and the figures quoted earlier for user waiting
• times we can arrive at a page kilobyte budget.
• Load Time Users Waiting 28.8 56.6 ADSL
• 10 sec 84 34K 68K 625K
• 15 sec 51 51K 102K 938K
• 20 sec 26 68K 136K 1250K
• 30 sec 5 102K 204K 1875K
• Of course the above budgets assume that the
  connection
• is delivering full speed a more realistic figure
  might be
• half that quoted above (and less than that for
  the higher
• speed links).

7
Reducing file size - a basic example
This original image, saved as a TIFF format file,
with a resolution of 1600 x 1200 is a 5.5Mb file.
8
Step 1 Image resolution reduced (from 1600 x
1200) to a more modest 300 x 225. New file size
376Kb (6.7 of original)
Step 2 Image cropped to eliminate unnecessary
content. New file size 244Kb (64.9 the size of
image after step 1)
9
Save as GIF 51Kb (13.6 of image after step
1) Save as JPEG 14Kb (3.7 of image after step
1) Save as PNG-8 52K (13.8 of image after
step 1)
10
Suggestions for graphics on sites

• Ideally graphics on sites should be to do with
  the substance of the site - rather than to jazz
  up the content (if the content is that dull
  probably no graphics will save it).
• Navigation graphics such as buttons and menus
  should be kept small as they represent
  navigation overhead they are not the content
  the user is presumably seeking.
• Consider making your sites home page a quick
  loading with small graphics and deepening the
  graphics content as the user explores further.

11
Computer Bitmapped Displays and Bitmapped
Graphics
Many current display monitors are based on
Cathode Ray Tubes (CRTs). These tubes transmit
light in 3 colours (red, green blue) which
combines in an additive way (i.e. 100 of each
colour will produce white). Comments?
12
Bitmapped Display
The display hardware and operating system divide
the screen into a grid of small elements, named
pixels. A pixel is the smallest addressable
section of the computer screen. For a black and
white display only 1 bit of information need be
used to store colour for a given pixel.
13
A system for displaying 256 colours
For colour displays more memory is used to store
a colour value for each pixel. For 256 colours,
8 bits of information are needed for each pixel -
in principal these 256 colours are usually
selected from a larger number of available
colours (about 16 million) - but only 256 colours
can be used on screen at once. A colour look up
table (CLUT) is used to map between an index
colour and the true colour.
14
An Example 8 Bit image
The above image shows its colour palette of 256
colours, clearly this CLUT contains a number of
similar colours - but would not be a good CLUT to
represent all images with (e.g. no greens/blues).
As with an 8 bit display system only 1 CLUT can
be used at a time for the whole screen, this
presents limitations.
15
The images at left show the problems of 8 bit
colour images with custom palettes. Image A has
a custom palette and is displayed correctly.
Image B has the same custom palette but is being
displayed with another image with a custom
palette - the result is at least one of the
images palettes is remapped - resulting in
banded display.
16
The Web Safe Palette
A simple solution for 256 colour images might be
to map all Images to the standard system palette
used for your computer, Unfortunately the Mac
and Windows use slightly different Colour
palettes, only about 216 colours are common
between The two - these colours form the basis
for what is sometimes Called the web safe
palette
17
Bitmapped Display
For true colour displays (about 16 million
colours) it is necessary to store 24 bits of
information for each pixel on screen, usually 8
bits for each of the Red, Green, and Blue colour
components.
18
An Example 24 Bit image
Above you can see the image as seen by a user
(the Composite RGB image), and the three 8 bit
images of which it is composed (Red, Green and
Blue). Such systems can represent large numbers
of colours on screen simultaneously and do not
use a CLUT - they are therefore sometimes called
DIRECT colour systems.
19
Web File Formats

• There are a restricted number of image file
  formats usable in popular browsers.
• Popular formats, listed in order of most widely
  supported to least include
• GIF - the Graphics Interchange Format.
• JPEG - the Joint Photographic Experts Group
  format.
• PNG - the Portable Network Graphics format.
• SVG - the fairly new (and not very widely
  supported) Scalable Vector Graphics
  format.

20
The GIF file format

• The oldest supported file type in web browsers
  and the most widely adopted (Netscape, Mosaic,
  Opera, Explorer, Mozilla amongst others).
• Is a bitmapped file format, using a maximum of 8
  bits of information for each pixel of the image.
• Uses simple compression techniques to reduce the
  file size of the image - which achieve modest
  compression ratios (approx 3-51).
• Compression using GIF is lossless - in that no
  image quality is sacrificed during compression.

21
An example GIF image
22
Other GIF features

• Is capable of using transparency (alpha)
  information, restricted to 1-bit of information
  (i.e. either transparent or not).
• Images can be saved as interlaced GIFs so that
  they can appear to load more quickly (although
  they dont).

23
Interlaced images
Various file formats, GIF amongst them can save
images as interlaced versions (JPEG can use a
similar progressive option). These images will
appear to the user initially as rough impressions
of the final image, and as more of the image file
is downloaded will appear clearer.
24
Transparency
Sometimes it is useful to designate certain
colours in an image as transparent (as the blue
is in the example above). These images can then
be placed over various coloured backgrounds, and
appear to have gaps in the image where the
background shows through. GIF images support one
transparent colour.
25
Problems with transparency
Many image editors (such as Adobe Photoshop) when
images are created, they will be against a given
background colour. Also most shapes will created
in an anti-aliased manner, that is around the
edge of the graphic there will not be a clearly
defined edge but a gradual shift of the colour.
This is fine, unless you make the original
background transparent and place the image over a
different coloured background when a white (or
other colour) halo will be seen.
26
Another Transparent Example
27
The JPEG file format

• An image file format that is optimised for the
  display of photographic imagery.
• Is a bitmapped file format, using a maximum of 24
  bits of information for each pixel of the image.
• Uses Discrete Cosine Transform (DCT) based
  compression to achieve remarkable levels of
  compression - from about 31 up to 1001
• Depending on the compression level chosen (which
  unlike GIF, is variable) considerable quality can
  be lost from the original image, known as a
  lossy compression system.

28
Example JPEG graphic
Zoomed in original image
Original Image
Zoomed JPEG low quality
Zoomed JPEG med quality
29
Other JPEG features

• JPEG graphics have no transparency capability.
• JPEG images can be saved as progressive images,
  giving similar advantages to interlaced GIFs.

30
JPEG compression on non-photographic imagery
JPEG compression is not particularly suitable to
simple diagrams or text, the compression system
expects to work with continuos tone imagery and
will tend to produce that in compressed images -
even when undesired.
31
GIF images

• Good for diagrams and icon based imagery that
  does not contain large numbers of colours
• Offers modest compression, but with no loss of
  quality
• Allows transparency.

JPEG images

• Excellent format for reproduction of
  photographic imagery, or other continuos tone
  images such as many 3D models or complex
  illustrations.
• High compression possible, but with noticeable
  quality loss.
• Not ideal for simple diagrams and text - use GIF
  instead.

32
The PNG file format

• pronounced ping as in ping-pong for Portable
  Network Graphics
• An image format designed to provide a long term
  replacement for the GIF file format.
• Capable of handling 8 and 24 bit imagery.
• Very advanced transparency (up to 8 bits of
  transparency information).
• An interlaced file option
• Compression is lossless, which makes 24 bit PNG
  files quite large as only modest compression can
  be achieved - similar to GIF.

33
(No Transcript)
34
(No Transcript)
35
(No Transcript)
36
(No Transcript)
37
(No Transcript)
38
The original image as seen (for example) on a
Macintosh computer.
On a PC
On an SGI (Silicon Graphics)
39
Below are the same images shown as PNG format
graphics on the three different platforms (Mac,
PC and SGI). The PNG format saves information
about the authoring platform and gamma used. This
information can be used when the image is
displayed on alternative platforms to alter the
amount of correction used so that the image
displays correctly.
40
PNG also offers advanced transparency options,
more so than GIF with up to 256 levels of
transparency (like alpha channels in Photoshop)
the images on the left are the originals and
those on the right are transparent over a green
background.
41
SVG File Format

• SVG or Scalable Vector Format is a relatively new
  format.
• Unlike the other web still image formats it is
  vector based (like Flash) and so should lead to
  small sized - resolution independent imagery.
• Adobe illustrator can save work in SVG format.
• SVG format is XML based and thus an open standard
  (view the detail on http//www.w3.org).
• Its relatively popular (new file formats usually
  take about 3-4 years to gain acceptance).

42
What tools are useful for preparing web imagery?

• Commercial software that offers useful options
  for web imagery would include
• Adobe Photoshop. (GIF, JPEG, PNG)
• Adobe Dreamweaver (particularly good PNG support)
• DeBabelizer - offering excellent batch processing
  capabilities for dealing with large numbers of
  files.
• Shareware/Freeware tools
• Paintshop Pro, a shareware tool similar to
  Photoshop
• Graphics Converter - does what the name suggests
• several online compression resources

43
Example tool - Photoshops Save as web...
commandc
44
It is often useful when preparing many images for
web use to have a tool that will process many
files in the same way automatically. Such tools
include DeBabelizer, but Photoshop via its
actions capability offers very useful batch
processing options.
45
Online Example Compression Tool
http//www.picresize.com/