Download design3

Lecture 6b
Multimedia on Web
1
Multimedia
2
Multimedia
HyperText
HyperMedia
is a
MultiMedia
3
What is Multimedia?

Multimedia is everything you can hear or see: texts,
books, pictures, music, sounds, CDs, videos, DVDs,
Records, Films, and more.
• Multimedia is applications that use multiple modalities,
including text, images, drawings (graphics), animation,
video, sound including speech, and interactivity.


Multimedia comes in many different formats.
On the Internet you will find many of these elements
embedded in web pages, and today's web browsers
have support for a number of multimedia formats.
4
Examples of typical present
multimedia applications include
- Digital video editing and production systems.
- Electronic newspapers/magazines.
- World Wide Web.
- On-line reference works: e.g. encyclopedias, games, etc.
- Home shopping.
- Interactive TV.
- Multimedia courseware.
- Video conferencing.
- Video-on-demand.
- Interactive movies.
5
Browser Support

The first Internet browsers had support for text only.

Then came web browsers with support for colors,
fonts and text styles, and the support for pictures
was added.

The support for sounds, animations and videos is
handled in different ways by different browsers.
Some elements can be handled inline, some
requires a plug-in and some requires an ActiveX
control.
6
Multimedia Formats

Multimedia elements (like sounds or videos) are stored in
media files.

The most common way to discover the media type is to look at
the file extension.

When a browser sees the file extensions .htm or .html, it will
assume that the file is an HTML page. The .xml extension
indicates an XML file, and the .css extension indicates a style
sheet.

Picture formats are recognized by extensions like .gif and .jpg.

Multimedia elements also have their own file formats with
different extensions.
7
Multimedia Sound Formats
8
The MIDI Format


The MIDI (Musical Instrument Digital Interface) is a
format for sending music information between
electronic music devices like synthesizers and PC
sound cards.
The MIDI format was developed in 1982 by the music
industry.


MIDI files do not contain sampled sound, but a set of
digital musical instructions (musical notes) that can be
interpreted by your PC's sound card.
The downside of MIDI is that it cannot record sounds
(only notes).
9
The MIDI Format




Click here to play Motzart.
The upside of the MIDI format is that since it
contains only instructions (notes), MIDI files can
be extremely small. The example above is only
30K in size but it plays for nearly 3.5 minutes.
MIDI files are supported by all the most popular
Internet browsers.
Sounds stored in the MIDI format have the
extension .mid or .midi.
10
The RealAudio Format



The RealAudio format was developed for the
Internet by Real Media. The format also
supports video.
The format allows streaming of audio (on-line
music, Internet radio) with low bandwidths.
Because of the low bandwidth priority, quality
is often reduced.
Sounds stored in the RealAudio format have
the extension .rm or .ram.
11
The AU Format




The Au file format is a simple audio file format
that consists of a header of six 32-bit words, an
optional information chunk and then the data.
The format was introduced by Sun
Microsystems.
The AU format is supported by many different
software systems over a large range of
platforms.
Sounds stored in the AU format have the
extension .au.
12
The AIFF Format



The AIFF (Audio Interchange File Format)
was developed by Apple.
AIFF files are not cross-platform and the
format is not supported by all web browsers.
Sounds stored in the AIFF format have the
extension .aif or .aiff.
13
The SND Format



The SND (Sound) was developed by Apple.
SND files are not cross-platform and the
format is not supported by all web browsers.
Sounds stored in the SND format have the
extension .snd.
14
The WAVE Format



The WAVE (waveform) format is developed
by IBM and Microsoft.
It is supported by all computers running
Windows, and by all the most popular web
browsers.
Sounds stored in the WAVE format have the
extension .wav.
15
The MP3 Format (MPEG)



MP3 files are actually MPEG files. But the
MPEG format was originally developed for
video by the Moving Pictures Experts Group.
We can say that MP3 files are the sound part
of the MPEG video format.
MP3 is one of the most popular sound formats
for music recording. The MP3 encoding
system combines good compression (small
files) with high quality.
Sounds stored in the MP3 format have the
extension .mp3, or .mpga (for MPG Audio).
16
What Format To Use?


The WAVE format is one of the most popular
sound format on the Internet, and it is
supported by all popular browsers. If you want
recorded sound (music or speech) to be
available to all your visitors, you should use the
WAVE format.
The MP3 format is the new and upcoming
format for recorded music. If your website is
about recorded music, the MP3 format is the
choice of the future.
17
Multimedia Graphic/Image Formats
18
Image Representation


Bit map techniques (raster)
• Pixel: short for “picture element”
• RGB
• Luminance and chrominance
Vector techniques
• Scalable
• PDF and PostScript
19
1-bit Images
• Each pixel is stored as a single bit (0 or 1), so
also referred to as binary image.
• Such an image is also called a 1-bit
monochrome image since it contains no color.
20
8-bit Gray-level Images
•
Each pixel has a gray-value between 0 and
255. Each pixel is represented by a single
byte; e.g., a dark pixel might have a value of
10, and a bright one might be 230.
21
24-bit Color Images
•
•
In a color 24-bit image, each pixel is represented by
three bytes, usually representing RGB.
•
This format supports 256x256x256 possible combined colors,
or a total of 16,777,216 possible colors.
•
However such flexibility does result in a storage penalty: 24-bit
color image would require 921.6 kB of storage without any
compression (640x480).
An important point: many 24-bit color images are
actually stored as 32-bit images, with the extra byte of
data for each pixel used to store an alpha value
representing special effect information (e.g.,
transparency).
22
8-bit Color Images



Many systems can make use of 8 bits of color
information (the so-called “256 colors") in producing
a screen image.
Such image files use the concept of a lookup table
to store color information.
Basically, the image stores not color, but instead just
a set of bytes, each of which is actually an index into
a table with 3-byte values that specify the color for a
pixel with that lookup table index.
23
File Formats


For internet work there are two types of files
you need to be familiar with: JPG and GIF.
There are many other file types but the vast
majority of all images on the internet are
based on one of these two formats.
24
GIF




It is so simple!
Limited to 8-bit (256) color images only, which, while
producing acceptable color images, is best suited for
images with few distinctive colors (e.g., graphics or
drawing).
GIF standard supports interlacing - successive display of
pixels in widely-spaced rows by a 4-pass display process.
GIF actually comes in two flavors:
1. GIF87a: The original specification.
2. GIF89a: The later version. Supports simple animation via a
Graphics Control Extension block in the data, provides simple
control over delay time, a transparency index, etc.
25
JPEG




JPEG: The most important current standard for image
compression.
The human vision system has some specific limitations
and JPEG takes advantage of these to achieve high rates
of compression.
JPEG allows the user to set a desired level of quality, or
compression ratio (input divided by output).
Image, with a quality factor Q=10%, yields 1.5% of the
original size. In comparison, a JPEG image with Q=75%
yields an image size 5.6% of the original, whereas a GIF
version of this image compresses down to 23.0% of
uncompressed image size.
26
Choosing Which Format to Use


Unless you have a very good reason to use
a different format, you should always use
either JPG or GIF for your internet files.
Indeed, many browsers and email programs
will only recognize these formats.
27
Choosing Which Format to Use



JPG: This format is best for images with a
large number of colours, such as
photographs.
This format was specifically developed for
use with photos.
Most photo-image software applications
which come with cameras and scanners
tend to use JPG by default.
28
Choosing Which Format to Use



GIF: Use this format for images with a lower
number of colours and with strong, clearly
defined lines.
Images which contain simple shapes and/or
text usually use gif, e.g. logos, buttons,
icons, etc.
You may also find that small thumbnail-sized
photo images can work better as gif.
29
Choosing Which Format to Use
Photos: Use JPG
Logos: Use GIF
• If you're not sure which format to use, save your
image in two versions - one of each. You can then
compare image quality and file size to see which is
best.
30
Optimising an Image File


With internet images, the goal is generally to
have maximum image quality with minimum
file size.
Optimising an image refers to the process of
balancing various compromises in order to
achieve this goal.
31
Optimising an Image File
File size is determined by two main factors:

Image Size (Resolution)
This is determined by the number of pixels in the image. The bigger
the image, the more pixels it has and the larger the file size.
To optimise the image size we will crop and/or resize the image.

Image Quality (Compression)
JPG and GIF are both "compressed" formats, which means you can
lower the file size by reducing image quality. Note that GIF and JPG
files are handled differently when it comes to compression.
To optimise jpg files we will compress them. To optimise GIF files we
will reduce the number of colours.
32
Optimising an Image File
33
Optimising an Image File
34
Optimising an Image File
JPG Options
Quality: 12
File Size: 23K
Quality: 3
File Size: 13K
Quality: 0
File Size: 12K
35
Optimising an Image File
GIF Options
36
Optimising an Image File
256 color
64-Colour GIF
Colour Table
37
Optimising an Image File
GIF Options
The rule of thumb is:
Always use the lowest number of colours you can get away with.
38
Multimedia Video Formats
39
Standard video file types

avi

wmv (windows media video - new format)

mpeg

mov (better known as quicktime)

RealVideo

Flash
40
The AVI Format



The AVI (Audio Video Interleave) format was
developed by Microsoft.
The AVI format is supported by all computers
running Windows, and by all the most popular
web browsers. It is a very common format on
the Internet, but not always possible to play on
non-Windows computers.
Videos stored in the AVI format have the
extension .avi.
41
The Windows Media Format




The Windows Media format is developed by Microsoft.
Windows Media is a common format on the Internet,
but Windows Media movies cannot be played on nonWindows computer without an extra (free) component
installed.
Some later Windows Media movies cannot play at all
on non-Windows computers because no player is
available.
Videos stored in the Windows Media format have the
extension .wmv.
42
The MPEG Format


The MPEG (Moving Pictures Expert Group)
format is the most popular format on the
Internet. It is cross-platform, and supported
by all the most popular web browsers.
Videos stored in the MPEG format have the
extension .mpg or .mpeg.
43
The QuickTime Format



The QuickTime format is developed by
Apple.
QuickTime is a common format on the
Internet, but QuickTime movies cannot be
played on a Windows computer without an
extra (free) component installed.
Videos stored in the QuickTime format have
the extension .mov.
44
The RealVideo Format



The RealVideo format was developed for the
Internet by Real Media.
The format allows streaming of video (online video, Internet TV) with low bandwidths.
Because of the low bandwidth priority,
quality is often reduced.
Videos stored in the RealVideo format have
the extension .rm or .ram.
45
How to reduce size of videos

Shorten length
Reduce resolution
More compression
Drop frame rate

Use video streaming



46
Video Streaming





You see video on-demand (i.e.. it plays as it
downloads).
Essentially you download part of the file to
act as a buffer.
Once you start playing from the buffer, the
file continues to download topping up the
buffer.
However you may need a special server to
stream your media from.
Common streaming formats are
•
mov, mpeg-4, wmv, ra (real video), flash
47
What is Flash?




Flash is a multimedia graphics program
specially for use on the Web.
Flash enables you to create interactive
"movies" on the Web.
Flash uses vector graphics, which means
that the graphics can be scaled to any size
without losing clarity/quality.
Flash does not require programming skills
and is easy to learn.
48
The Flash (Shockwave) Format



The Flash format was developed by
Macromedia.
The Flash format requires an extra
component to play. This component comes
preinstalled with the latest versions of
Netscape and Internet Explorer.
Videos stored in the Flash format have the
extension .swf.
49
The Flash (Shockwave) Format



Macromedia Flash is an excellent choice for
delivering video on the Internet.
It has better browser penetration and
provides more creative opportunities than
any other video format.
Flash files can include graphics, animation,
video, audio and interactive material.
50
Flash vs. Animated Images and Java
Applets


Animated images and Java applets are often
used to create dynamic effects on Web
pages.
The advantages of Flash are:
•
•
•
Flash loads much faster than animated images.
Flash allows interactivity, animated images do
not .
Flash does not require programming skills, java
applets do.
51
The Flash (Shockwave) Format
Flash uses the following file types and extensions:



FLA: Flash file. This is the "master" document file for a
flash project, i.e. the source file you work with in the Flash
authoring program. These files can only be opened with
Flash — not the Flash Player.
FLV: Flash Video. Supported from version 7, FLV files are
the preferred format for delivering video clips via Flash.
SWF: Flash delivery file — the file that end users see.
This is a compressed version of the FLA file which is
optimized for viewing in a web browser, the standalone
Flash Player, or any other program which supports Flash.
This file type cannot be edited in Flash.
52
End of Lecture 6b
53