Web EngineeringAdvanced Web Engineering

1
Web Engineering/Advanced Web Engineering

• Week 10 - Graphical File formats

2
Types of Graphical Formats

• Raster Graphics
• The image is made up of rows of pixels, each with
  a colour associated with it.
• Examples are Bitmap, GIF, JPEG, PNG.
• Vector Graphics
• where the image is described in a language form.
• Generally used for diagrams which are comprised
  of specific lines and shapes, with or without
  fill colours.
• Examples are Metafiles (WMF), SVG.

3
GIF File Format

• GIF stands for Graphic Interchange Format.
• Developed for image transfer among users of the
  CompuServ online service.
• Use a special "lossless" compression algorithm.
• None of the image's original data is lost or
  deleted. Once uncompressed and decoded the image
  exactly matches the original.
• GIF images can be animated.
• Contain a maximum of 256 colours (8-bit).
• Two formats - GIF87 and expanded GIF89a.

4
When to use GIF format

• Images containing lettering and text (hard
  edges).
• Illustrations and line drawings.
• Simple cartoons.
• Transparent images.
• Icons that use only a few colours.
• Pure black and white images.
• Greyscale images with 16 or fewer levels of grey.
  
• Simple animations.

5
JPEG File Format

• JPEG stands for Joint Photographic Experts Group
  (original name of the committee that wrote the
  standard).
• Designed for compressing either full-colour or
  grey-scale images of natural, real-world scenes.
• 16 million (24-bit) colours are available!
• Smaller file sizes than GIF - can be as much as
  14 for the same image.

6
When to use JPEG format

• Full-colour or greyscale images of "realistic"
  scenes.
• Digital photographs.
• Continuous-tone artwork.
• Greyscale images with more than 16 levels of
  grey.
• High-quality 256 colour images.
• Handles only still images. MPEG is a related
  standard for motion pictures.

7
Converting between GIF JPEG

• What happens if you obtain a photograph in GIF
  format?
• Should you convert it to a JPEG?
• This is not a trivial task.
• GIF images have been colour-reduced (called
  colour quantization).
• When converted to JPEG the number of colours will
  increase.
• The JPEG compression algorithm will affect each
  pixel slightly differently.
• Colours from the GIF will therefore be smeared
  into surrounding colours in the JPEG.
• The quality may not be as good as expected.
• Advice leave this to the experts!

8
JPEG Compression

• JPEG is "lossy," - the decompressed image isn't
  quite the same as the original.
• JPEG achieves much greater compression than
  lossless image compression algorithms.
• JPEG is designed to exploit known limitations of
  the human eye.
• Small colour changes are perceived less
  accurately than small changes in brightness.
• JPEG is intended for compressing images that will
  be looked at by humans.
• If you plan to machine-analyse your images, the
  small errors introduced by JPEG may be a problem,
  even if they are invisible to the human eye.

9
JPEG File Size

• A useful property of JPEG is that the degree of
  lossiness can be varied by adjusting compression
  parameters (in range 0-10).
• This means that file size can be traded against
  against image quality.
• Extremely small files can be produced if you
  don't mind poor quality useful for applications
  such as indexing image archives.
• Alternatively, by modifying the parameters to
  accept less compression, the quality of the image
  can be improved.

10
Demonstration

• JPEG_Compress.htm

11
Multiple Saving of JPEG files

• Each time a JPEG file is saved the compression
  algorithm is used.
• Each time some image quality is lost.
• Eventually this image loss becomes obvious.
• When editing JPEG files, minimise the number of
  times you save the file.
• If using software such as Paintshop or Photoshop
  convert and store the file in the software's own
  format.
• Export to JPEG only the final version, ready to
  put on the web.
• This is not a problem with GIF images.

12
GIF Interlacing

• Normally a GIF image is a sequence of pixel data.
• It is stored (and loads onto the screen)
  row-by-row from top to bottom of the image.
• With a slow network connection the image appears
  gradually from top to bottom.
• An interlaced GIF sequences every fourth row of
  the image.
• Users will see a full image, top to bottom, in
  1/4 of the time.
• This image will be fuzzy but should give the user
  enough detail to indicate the content of the
  image.

13
GIF Transparency

• This only works with GIF89a format.
• It enables the image to appear transparent.
• One colour in the colour map is designated as the
  background colour.
• The browser ignores any pixel in the image using
  that colour, allowing the background to show
  through.
• Often used as logos, transparent icons or for
  special character formatting.
• When embedding in HTML take care with borders and
  content flow around/over the image.

14
Demonstration

• GIF_Transparent.htm

15
GIF Animation

• This only works with GIF89a format.
• Need special GIF animation software utilities.
• A single GIF89a file contains a series of GIF
  images.
• The browser displays each image, one after each
  other.
• Special control segments are included between
  each image to control
• The number of times the browser loops through the
  sequence.
• How long to pause between each image.
• Whether the previous image is wiped into the
  background before displaying the next.
• The powerful facilities of animated GIFs can be
  included in HTML documents with minimal effort.
• Generally used for small icons or images as file
  sizes become large very quickly.

16
When shouldimages be used?

• Graphics/Images should not be used for the sake
  of using an image!
• They should support the text in the document.
• They should be used to clarify, illustrate or
  expand on the text.
• Use of graphics include
• photographs
• charts
• graphs
• maps
• drawings
• link-enabled icons
• If it doesn't help the user - DON'T USE IT!

17
Important consideration

• The most important consideration is the delay in
  retrieval time for the page.
• Think about your users and their connection.
• Your HTML text file may be only 10k.
• An image may be 500k.
• The total retrieval time for a document is the
  sum of the retrieval time for each file.
• A 100k image file across a 57.6k modem, depending
  on the time of day may take 15 seconds.
• If the user has a 9.6k modem they'll have plenty
  of time to go and have a coffee!

18
Speeding up image downloads

• Keep the image simple.
• Use the smallest image size possible without loss
  of quality.
• Keep diagrams simple.
• Optimise dimensions.
• Avoid panoramic photographs, empty backgrounds.
• Reuse images
• Particularly for icons and GIF animations as
  images will be cached.
• Isolate large graphics
• Provide thumbnails (small image) with links to
  the image so the user can choose if/when to
  download.
• Specify image dimensions
• Including image height width in the HTML avoids
  the browser having to download, examine and
  calculate the space required.

19
Demonstration

• thumbnails.htm

20
Netscape and the lowsrc attribute

• The image tag provides the lowsrc attribute which
  enables a lower quality image to be temporarily
  viewed while the proper image downloads.
• The image referred by by lowsrc is displayed
  until the image referred to by the src attribute
  has been downloaded.
• Once complete the new image replaces the lower
  quality image.
• It is the user's responsibility to ensure that a
  suitable low quality image is referred to by
  lowsrc.
• In other browsers the lowsrc image is ignored and
  only the src image is downloaded and displayed.

21
Demonstration

• lowsrc.htm

22
Image Resolution

• When scanning/preparing images for the web
  consider the image resolution.
• The image resolution should be limited to 72 dpi
  (dots per inch) as this is the highest quality
  displayed by a monitor.
• Images greater than 72 dpi are a waste of space
  and download time.

23
Demonstration

• image_res.htm

24
Display Resolution

• The display resolution is also important.
• The web engineer has no control over the
  resolution of the user's monitor.
• The size of the monitor is also a key factor.
• Monitor resolutions (and size) can vary
  significantly.
• Common resolution values are
• 640 x 480 (basic)
• 800 x 600
• 1024 x 768 (common on larger monitors)
• 1280 x 1024
• Ensure the display size of your image is sensible
  on different monitor settings (where possible).

25
Demonstration

• monitor_res.htm

26
Image Size

• The height and width attributes of the ltimggt tag
  can be used to control the image size in a
  document.
• Setting the height and width (in pixels) is
  efficient as the browser can reserve the space
  before downloading the image.
• The image is automatically scaled to fit the
  predefined space.
• Take care that the proportions of the original
  image are retained or distortion will occur.
• If height and width are used to enlarge an image
  you may lose image quality (particularly
  photographs).
• If height and width are used to reduce an image
  remember that the full-size image file must be
  downloaded so this is not very efficient.
• Better to set the size of the image file itself.

27
Demonstration

• image_size.htm

28
Image Editing Software

• Photoshop
• Photoshop Deluxe Home Edition (often provided
  free with scanners)
• Photoshop Elements (cut-down version of the
  commercial product, 90)
• Photoshop 7.0 (serious commercial product 500!)
• Paintshop
• Again often provided with scanners.
• Basic version.
• Commercial version - expensive
• Microsoft Photo Editor
• Provided with Office 97/Office 2000.
• Basic image editing facilities.
• Many others - See current digital
  photography/imaging magazines

29
PNG Formatthe future

• PNG (Portable Network Graphics) is raster
  graphics format which may increasingly replace
  GIF and TIFF formats for web applications.
• It uses a lossless compression algorithm.
• More information can be found at
• http//www.libpng.org/pub/png/
• Start with the "basic introduction to PNG
  features"

30
Vector Graphics

• Until now graphics on the web has been primarily
  raster graphics.
• A standard is currently being developed for a
  web-based vector graphics format.
• SVG is short for Scalable Vector Graphcs.
• More information can be found at
• http//www.w3.org/Graphics/SVG/
• Think of vector graphics as similar to the
  drawing facilities in Microsoft Word.
• Once drawn a shape has an identity and can be
  moved, sized, rotated etc.
• This is different to an image drawn in Paint
  where, once drawn, the shapes become basic
  coloured pixels.

31
What is SVG?

• SVG is a language for describing two-dimensional
  graphics in XML.
• It allows the following types of graphics
  objects
• Vector graphic shapes (paths consisting of
  straight lines curves).
• Images.
• Text.
• Graphical objects can be grouped, styled,
  transformed and composed into objects.
• Text is within the XML standard making the
  graphic searchable and accessible.
• SVG drawings can be dynamic and interactive.
• Simple and efficient vector graphics animation is
  available through scripting.

32
A possible exampleof SVG

• A map of the London Underground could be drawn in
  SVG.
• Different lines/stations could be highlighted
  according to user selection.
• The map could change dynamically depending on
  certain conditions (using scripting).
• Imagine a map which displayed the time of the
  next train beside each station.
• Textual Information on the map (perhaps station
  names) could be located through search engines.

33
What is needed for SVG?

• Currently the main browsers do not directly
  support SVG.
• Special plug-in viewers are currently available.
• One such viewer is available from Adobe
• http//www.adobe.com/svg/
• SVG code can be written in any text editor
  (similar to HTML/XML)
• Visual SVG development software will become
  available.
• See the links on the web for initial beta
  versions.
• Other software packages will allow export to SVG
  format.
• This is currently provided by Adobe Illustrator
  version 9.0.

34
SVG Demos from Adobe

• The following pages show screen captures of some
  SVG Demos...
• Available from
• http//www.adobe.com/svg/demos/

35
(No Transcript)
36
(No Transcript)
37
(No Transcript)
38
(No Transcript)
39
(No Transcript)
40
Resources

• Transparent GIF files
• http//members.aol.com/htmlguru/transparent_images
  .html
• General Web Engineering Information
• http//members.aol.com/htmlguru/
• Frequently Asked Questions on JPEGS
• http//www.faqs.org/faqs/jpeg-faq/
• Information on PNG Graphics Format
• http//www.libpng.org/pub/png/
• Information on Vector Graphics
• http//www.w3.org/Graphics/SVG/
• Information for slides taken from above resources
  and "HTML XHTMLThe Definitive Guide", Musciano
  Kennedy, O'Reilly.