CO1552 Web Application Development

1
CO1552 Web Application Development

• Week 8

2
Introduction

• The past 7 weeks, we have looked at the history
  to the Internet and we have looked at some HTML
• We are now at the point where we are no longer
  looking at HTML.
• Note Frames have not been covered in these
  lectures, and I dont intend to use frames either.

3
Introduction

• This week we will cover
• A quick coverage of the next three weeks
• Images
• Issues surrounding image usage on the web
• Optimisation Techniques
• Compression
• Linked to LO3, Syllabus 4 (See matrix)

4
Next 3 weeks

• The next three weeks will be spent looking at
  different forms of multimedia, images, sound and
  video.
• Background information is given on each of the
  above. We dont go in to a great level of detail
  of any.
• The main focus of the next three weeks are the
  issues surrounding the use of the said
  multi-media for use on web pages.

5
What is an image?

• Everything that is displayed on a computer
  screen, is made up of a series of dots (known as
  pixels)
• Text is made up of particularly positioned
  pixels. Those pixels are ordered/arranged in a
  way so that we recognise them as letters.
• Each pixel is represented by a series of bits
  (and is therefore a number.) More later

6
What is an image?

• Text is made up of particularly positioned pixels.

7
What is an image?

• An image is also a series of pixels
• These pixels are multi-coloured, and arranged in
  such a way that our brain registers the
  collection of pixels as an image, a picture, a
  photograph, a shape, etc etc etc
• The more pixels in a smaller region of space
  means that there is a higher resolution and the
  image looks more life-like.
• If we were to get close enough, we would see the
  individual pixels.

8
What is an image?
9
What is an image?

• Zoomed in to see individual pixels.

10
What is an image?

• An image that is made of individual pixels,
  arranged in order to make a picture, is known as
  a bitmap image (not to be confused with windows
  BitMap (.BMP) file format) or a raster image.
• There are other ways of storing images
• For example, vector based graphics are stored as
  a formula. To draw a circle, you would record
  the centre (x,y) and the circle diameter.

11
Image Summary

• All this information helps us define what an
  image actually is.
• While it may look pretty on our computer screens,
  the nitty gritty is that an image is merely a
  series of 1s and 0s encoded on to our hard drive,
  which our graphic card interprets and displays as
  an image on the monitor.

12
Image Summary

• As mentioned previously, an image is made up of
  pixels
• Each pixel is represented by a series of 1s and
  0s (bits)
• More bits are required to represent more colours
• 4 bits can represent 16 colours
• 8 bits can represent 256 colours
• 16 bits can represent 65,536 colours
• 24 bits can represent 16.7 million colours

13
Use of Images

• Size does in fact matter
• Dont forget that the web involves connecting two
  (or more) computers by a communication line (e.g.
  phone line or network cable)
• These communication lines have a maximum amount
  of bandwidth
• If an image has a high resolution, and has large
  dimensions, then it will take much longer to
  transmit over communication lines.

14
Size Matters

• There are a number of things which make our
  images larger (in file size)
• Physical dimensions (I.e. width and height)
• Number of pixels per inch (resolution)
• Colour depth (I.e how many colours within the
  image)
• The larger the image, the longer it takes to
  download.

15
Image Tactics

• There are tactics you can use in order prevent
  large images from becoming a problem.
• Instead of embedding an image in to a document,
  put a link to that image instead.
• Use an image gallery, this is a list of links to
  images.
• Use thumbnail images, I.e. reduced size/quality
  of images, linking to their full size/quality
  counterparts.

16
Image Tactics

• You position an image in your document, relative
  to your text.
• You cannot simply specify a coordinate on the
  screen where to display the text
• Because your image is relative to the text
  position, then it is out of your control how it
  will be presented to the end-user (as they can
  alter the size of the browser area)
• Cascading Style Sheets give us a lot more
  flexibility over image positioning. (Tables also
  give us a bit more flexibility)

17
Image Tactics

• If you need to put an image in with the text of
  your document, then there are strategic places to
  put them.
• Exemplifies something in the text, I.e. helping
  to describe something, then put it AFTER the
  text.
• If an image is giving a visual overview, then put
  the image BEFORE the text
• If an image is connected with the text, then put
  it alongside the text.

18
Imageless Audience

• If possible, you should make your documents
  readable without images.
• The ltIMGgt tag has an ALT attribute.
• This text is displayed if the image is not
  displayed in the browser
• This text is read out by a speech synthesizer

19
Image Types

• After all is said and done so far, it is
  important to remember that there are different
  types of images.
• There are,
• Photographs
• Buttons
• Navigation bars
• Comic Strips
• etc

20
Image Types

• Problem
• There are many different types of images, and
  transmitting large files over the internet is a
  problem.
• People came up with ideas on how to make the file
  size smaller, in order to make transmission
  quicker (and to save disk space)
• There are different standards that enable us to
  make our file sizes smaller. These are known as
  file formats.
• There are several main players of file formats.
  A discussion of the different file formats is
  too involved for this lecture.

21
Image Size

• It is important to understand the difference
  between OPTIMISATION and COMPRESSION.
• OPTIMISATION
• Fine tune an image so that it runs more quickly
  or takes up less space. (Something you can do)
• COMPRESSION
• Maximising your storage space rather than
  altering the image during its creation (Something
  your computer will do for you)

22
Image Size

• Again
• I repeat that an image is made up of a number of
  pixels (all placed next to each other)
• Each pixel is a dot (a very small dot)
• Each pixel contains a colour
• Because we are talking about computers, we can
  only store things in 0s and 1s. Therefore we
  use a number to represent a different colour.

23
Image Size

• By using a number to represent the colour, then
  obviously, the larger the number, the more
  colours can be represented.
• The more colours that can be represented, then
  this is known as increasing the colour depth.
• 4 bits can represent 16 colours
• 8 bits can represent 256 colours
• 16 bits can represent 65,536 colours
• 24 bits can represent 16.7 million colours

24
Image Size

• Optimisation technique
• Reduce the colour depth of an image.
• If an image uses less colours, then you can
  reduce the size of the number required to
  represent the pixels.
• If we have an image that is 10 pixels wide, and
  10 pixels high, and a colour depth of
• 256 colours, then we will use 800 bytes
• 16.7million colours, then we will use 2400 bytes

25
Image Size

• Reduce colour depth-gt

4 pixels at 4 bits each 16 bits
4 pixels at 8 bits each 32 bits
4 pixels at 16 bits each 64 bits
4 pixels at 24 bits 96 bits
26
Image Size

• Reduce Image resolution
• Computer screens max of 72 pixels per inch, if
  image is seen only on computer, then no point in
  displaying more than this.
• Image dimensions
• Minimise (especially scanned images)
• Change image size smaller (but be warned you are
  most likely to lose quality) try it yourself!

27
Image Size

• Another way to make the image file size smaller,
  would be to compress the data within the file.
• Compressing the data is just like squeezing the
  data together, to force it to take less space.
• There are several different ways to compress
  image file data.

28
Image Size

• There are two main classifications of image
  compression. These are known as Lossy and
  Lossless.
• Lossy data compression is when some of the data
  is thrown away, therefore taking up less space.
• Lossless data compression is when all of the data
  is kept in its original condition, and instead,
  patterns are located within the file, and
  replaced by a code representing that pattern.

29
Image Size

• An example of a Lossy file format is the JPG
  standard.
• A JPG file format involves,
• Breaking the data up in to logical blocks
• Depending on image quality index, the compression
  routine throws away parts of the data
• By throwing away parts of the data, we reduce the
  quality. There is a complex algorithm in place to
  work out which pixels should be thrown away.
• Photographs are best stored as JPGs

30
Image Size

• An example of a loss-less file format is the
  GIF file format.
• A GIF file format involves,
• It looks through the image and locates any
  patterns
• It removes the pattern, and replaces it with a
  code
• This works best with images that have patches of
  solid colour.
• Buttons are best stored as GIF file format.

31
Conclusion

• This week, we have looked at,
• What is an image a combination of pixels.
• That we can categorise image usage
• Different image compression types
  lossy/lossless
• And why image size is important, and how this is
  a problem that can be solved by you and your
  computer.

32
Why use images on the web?

• We use a graphic to express or communicate
  something that cannot be expressed in textual
  form
• We use graphics to enhance the visual appeal of a
  text based system
• We use graphics to make our system more usable.
• ! We use graphics because we can !

33
Image Categories

• Categorising images helps us understand where and
  when we will (or should) use them.
• Indispensable image
• This is an image which provides such information
  which cannot be presented verbally, such as a
  passport photograph, a map etc
• Supportive Image
• Verbal description may be understandable without
  the image. Image provides some essential facts.

34
Image Categories

• Eye-Catching Image
• Images used to catch somebodys attention (for
  example images used in advertising)
• Image against boredom
• To avoid using plain text
• Decorative Image
• For example a background image, or navigation bar.

35
Image Categories

• Symbol
• For example a company logo
• Image as a hold
• If re-reading a document, it may be easier to
  locate an image while skimming the document,
  rather than re-reading all text.
• Image for atmosphere
• An image can help create an atmosphere so that
  the reader can put his/her soul in to the subject
  area.

36
Use of Images

• Keep your structure
• It is sometimes better to add the structure to
  your document text before you apply the images.
  A badly structured document does not read well,
  even if it has images.
• Dont let decoration deteriorate communication
• A decorative image should not make it difficult
  for the message to get through. Use of
  background images in web pages can often be
  destructive to web sites, in that they may the
  reading of the text more difficult (and sometimes
  impossible)