Elective Part C – Multimedia Production and Web Site Development Page 11

Chapter 2.3 – Multimedia Basics: Attributes of Multimedia Elements

2.3.1 Text Attributes
Character Set/Character Text are stored as codes in a computer, while different encoding schemes have been
Encoding System defined for computer system in order to display different languages properly.
Encoding Scheme Language Specification on webpage
Big5 Code Traditional Chinese charset = big5
GB Code Simplified Chinese charset = gb2312
HZ (Hanzi) Code Simplified Chinese charset = hz
Unicode All languages charset = utf-8
Typeface and Font Typeface
The design for a complete set of characters, such as Times New Roman, Arial, etc.
Font
The complete set of characters for a typeface at one particular font size, such as
Times New Roman 14 point, with font style excluded.
Remark
 If a web page consists of font which the user does not install into the computer,
the font will not be properly displayed, or will be replaced by the default font
setting of the computer.
 Serif font (襯線字體): There are decorations at the character stroke end
 San Serif font (無襯線字體): There are no decorations at the character stroke
end
Font Size  Font size are measured in points. The larger the points, the bigger the text are
 A point is a unit for measuring the height of characters, and is equivalent to
1/72 inch. Which means, a letter of size 72 points takes up approximately one
inch vertically
Font Style  Refers to the specific characteristics of the font
 Bold, italic, underline and strikethrough are four typical font styles. In addition,
they can be mixed together
Paragraph formatting  Spacing: line spacing, character spacing and paragraph spacing
 Alignment: left-aligned, centre-aligned, right-aligned and justified
 Indentation: first-line indent, left indent and right indent
Page Layout  Size of paper
 Orientation: Portrait and Landscape
 Margins
 Header and footer

Information and Communication Technology – Revision Notes/Written by Patrick Chan

Elective Part C – Multimedia Production and Web Site Development Page 12
2.3.2 Graphics Attributes (Bitmaps)
Resolution Definition
It is the measurement of number of pixels in an image. The larger the resolution, the
more the details on an image can be displayed, and the larger the file size is.
Measurement
 Dimension of pixels: Width x Height, such as 1920x1080 pixels
 Pixel Density: Measured in ppi
Aspect Ratio Definition
It is the ratio of the width to the height of an image. If the aspect ratio does not fit,
distortion will occur (as the image is stretched horizontally, vertically or both).
Example
Horizontal side: Vertical side
= 1024: 768
= 4: 3
Colour Depth It is the number of bits used to represent the colour of each pixel. The measurement
unit is bit per pixel (bpp). The larger the colour depth, the more the colours can be
displayed on an image, thus the more natural the image, and the larger the file size
is.
Colour Depth Combination Equivalent to
1-bit 21 = 2 Black and White (B&W)
4-bit 24 = 16 16-colour
8
8-bit 2 = 256 Indexed colour/256-color
16-bit 216 = 65536 High colour
24
24-bit 2 = 16777216 True colour
30/36/48-bit Billions or above Deep colour
Colour Model It refers to the abstract mathematical model that uses tuples (元組) of numbers to
describe the ways of how colors can be represented. Typically, one colour model
consists of three or four colour components.
RGB Colour Model  Shorthand for Red, Green and Blue
 It is an additive colour model (加法模式)
 It reproduces colour by mixing the three
primary colours, i.e. red, green and blue
 Uses 24 bits for colour storage, with 8 bits
assigned to each colour component
 RGB value: ranging from 0-255 for each color
 Used for screen display
CMYK Colour Model  Shorthand for Cyan, Magenta, Yellow and Key
(black), four inks used in colour printing
 It is an subtractive colour model (減法模式)

Information and Communication Technology – Revision Notes/Written by Patrick Chan

Elective Part C – Multimedia Production and Web Site Development Page 13
 Uses 32 bits for colour storage, with 8 bits
assigned to each colour component
 Percentage value: 0-100% for each ink
Remark
As CMYK mixing colours in a subtractive manner,
the quality performance is not as exquisite (細膩) as
that of RGB. Which means, the DPI setting of the
printer must be higher than the PPI of the monitor
in order to obtain a similar exquisiteness.
Greyscale (B&W)  Images reproduced are composed of shades of
grey only, varying from the darkest black and
the brightest white
 Uses 8 bits for colour storage
 Has RGB values whereby R=G=B
 Suitable for output devices like black and white
laser printers
Indexed Colour  A compression technique to manage digital
(Pseudocolour/Indirect images’ colors in a limited fashion, so as to save
Colour) computer storage space and speed up
transmission
 Colour depth is reduced from 24-bit to 8-bit
HSV Colour Model  It stores a hue (色調) value, a saturation (色彩
飽和度) value and an intensity (亮度) value
 It is natural
 Often used by artist

Bitmaps File Size Uncompressed

= Image resolution in pixel x Colour depth in bits
= 1920x1080 pixels x 24 bits
= 6075 KB
Compressed
= Uncompressed File Size / n (assumed that the compression ratio is n:1)
= 6075 / 10 (assumed that the compression ratio is 10:1)
= 607.5 KB

Past Paper Question (DSE 2012 2C Q3ai)

Peter draws a picture on a piece of paper. The piece of paper is 8 x 6 inches. He wants to use a scanner to
scan the picture with 1200 pixels per inch and 24-bit colour. Without file compression, what is the
approximate file size of the scanned image (in MB)? Show your calculation. (2 marks)

Information and Communication Technology – Revision Notes/Written by Patrick Chan

Elective Part C – Multimedia Production and Web Site Development Page 14
Solution
= 8 x 6 x 1200 x 1200 x 3 (1)
= 198 MB (or 197) (1)

Performance
Good. Most candidates were familiar with the estimation of the file size of the scanned image.

Past Paper Question (DSE 2013 2C Q2d)

Peter has a true-color photo with resolution 5184 x 3456. Estimate the file size of the photo in MB without
compression. Show your calculation. (2 marks)

Solution
= 5184 x 3456 x 24bits (1)
= 51 / 51.3 / 51.26 MB (1)

Performance
Good.

Past Paper Question (DSE 2014 2C Q3dii)

Mr Li has some photos for the web site. The resolution of a photo is 4096x2160 and its colour depth is 24
bits. Mr Li decides to lower its resolution. He wants to keep the original aspect ratio and the color depth.
The photo should be as clear as possible but the uncompressed file size must be below 1.6 MB. Suggest
the new resolution of the photo.

Solution
1024 x 540 (2 marks)
(1 mark only for correct aspect ratio (in whole number) less than 1024 x 540)

Performance
Fair. About a third of the candidates were aware of the requirement of keeping the original aspect ratio as
well as the colour depth.

2.3.3 Graphics Attributes (Vector Graphics)

Line definition Defined by the location of the two points.
File Size  Small file size as it does not consist of pixels, i.e. resolution independent
 It depends on the complexity of the picture. The more complex the picture, the
larger the file size is

Information and Communication Technology – Revision Notes/Written by Patrick Chan

Elective Part C – Multimedia Production and Web Site Development Page 15
2.3.4 Audio Attributes
Wave pattern Loudness (響度) If the waves have a larger amplitude (波幅), sound
would be louder, and vice versa (Positive
relationship)
Pitch (音調) If the wavelengths (波長) are short, the pitch would
be higher, and vice versa (Negative relationship)
Sampling Rate  It is the number of samples taken from the analog audio signal in one second,
and is measured in Hz or kHz
 The higher the sampling rate, the better the sound quality, and the larger the file
size is
 The maximum audible frequency for human is 20 kHz, which means
human cannot be aware of the improvement of sound quality when the
sampling rate is very large, i.e. above 44.1 kHz
 The maximum speech frequency of human is 4 kHz, which means small
sampling rate can be used in the digitization of telephone conversation
Sample Size  It is the number of bits used to store a taken sample
 The larger the sample size, the sound quality will be closer to the original
source, and with a larger file size
 The smaller the sample size, there will be more noise in the sound, while the
file size will be smaller

Common sampling rate Audio type Sampling rate Sample size

and sample size Telephone 11100 Hz (11.1 kHz) 8-bit
AM Radio 11025 Hz (11.025 kHz) 8-bit
FM Radio 22050 Hz (22.05 kHz) 16-bit
CD Audio 44100 Hz (44.1 kHz) 16-bit
DVD Audio 96000 Hz (96 kHz) 24-bit
Professional Audio 48000/96000 Hz (48/96 20/24-bit
kHz)

Audio Channel  The more the audio channels, the richer the listening experience is, and the
larger the file size
 Mono (one waveform)
 Stereo (two waveforms)
 Surrounding sound (base waveform included)
Remark
A stereo audio file will have a double file size when compared to a mono audio file.

Uncompressed Audio = Sampling rate (Hz) x Sample Size (bits) x Number of channel x Duration (s)

Information and Communication Technology – Revision Notes/Written by Patrick Chan

Elective Part C – Multimedia Production and Web Site Development Page 16
File Size = 44100 Hz x 16 bits x 2 x 60 s
= 10.1 MB

Bit Rate It refers to the number of bits used to store one-second compressed audio.
Constant Bit Rate (CBR)  It means the bit rate is constant during the
encoding process of audio
 Useful for streaming audio file with limited
capacity
 Not the optimal choice for storage because
insufficient bits are allocated on the complex
sections, while wasting the bits on simple
sections, resulting in quality degradation
Audio type CBR (kbps)
AM Radio 32
KM Radio 96
Streaming Audio 128
CD 192/256/320
Variable Bit Rate (VBR)  It means the bit rate is continuously changed
during the encoding process of audio
 Suitable for storage as more bits are allocated
on the complex sections, while less bits are
allocated on the simple sections, thus producing
a better sound quality
 Not suitable for streaming on the Internet due to
the larger file size produced

Compressed Audio File = Constant Bit Rate (bps) x Duration (s)

Size = 128 x 1000 bps x 60 s
= 937.5 KB
OR
= Uncompressed Audio File Size / n (Assumed that the compression ratio is n:1)

Past Paper Question (DSE 2012 2C Q2b)

The Principal wants to record his speech during a morning assembly and post it onto the web site. The
following audio specifications can be used for the recording:
Audio Format P Q R S
Channel Stereo Mono Stereo Stereo
Sampling Rate 22.05 kHz 22.05 kHz 44.1 kHz 44.1 kHz
Sample Size 16-bit 16-bit 16-bit 8-bit

Information and Communication Technology – Revision Notes/Written by Patrick Chan

Elective Part C – Multimedia Production and Web Site Development Page 17
(a) When comparing P and S, the Principal finds that one of them has more noise. Which one? Explain
briefly. (2 marks)
(b) If P is used, the file size is 5 MB. Estimate the file sizes for Q, R and S. (3 marks)

Solution
(a) S has more noise because it has a lower sample size. (uses 8-bit sample size) (1+1)
(b) Q = 2.5 (1)
R = 10 (1)
S = 5 (1)

Performance
Good. Almost all candidates understood how sampling rate and sample size affect the sound quality. Most
candidates could estimate correct file sizes based on the audio specifications.

Past Paper Question (DSE 2013 Q3d)

Ms Li wants to record a song and save it as an audio file.
(a) She uses a sampling rate of 44.1 kHz. What does this mean? (1 mark)
(b) She uses a sample size of 16 bits. What does this mean? (1 mark)
(c) She uses stereo recording. What does this mean? Give a reason to support the use of stereo recording.
(2 marks)

Solution
(a) In one second, 44100 samples are taken. (1)
(“44.1 x 1024” is unacceptable)
(b) 16 bits of data is used to represent each sample. / The sample size is 16 bits. (1)
(c) It is a kind of humanization that it produced sound heard from various directions as in natural hearing.
/ Use two channels (left and right) to record sound. (1)
The song is livelier when it is played. / The recorded song close to real one. (waveform) (1)
(“better quality / good sound / record sound clearly / two sound tracks” are unacceptable)

Performance
Fair. Only a few candidates could clearly and precisely explain the meaning of sampling rate and sample
size. Candidates’ justifications on using stereo recording are vague, such as “good sound quality” and
“good quality”, but without further explanation.

Past Paper Question (DSE 2014 2C Q3cii)

Mr Li adds a 60-second sound track to the video file. The file size increases by 10 MB. The details of the
sound track are given below.

Sample Size: 16-bit

Information and Communication Technology – Revision Notes/Written by Patrick Chan
Elective Part C – Multimedia Production and Web Site Development Page 18
Channel: Stereo

Estimate the sampling rate of the sound track. (2 marks)

Solution
(10 x 1024 x1024 x 8) / 16 / 2 / 60 = 43.7 KHz (40 KHz to 44.1 KHz or equivalent) (2)
(1 mark for dealing with the stereo in the expression)

Performance
Fair. Candidates were familiar with the relationship between sampling rate and the sample size of a video.

Past Paper Question (DSE 2015 2C Q1a,1b,1cii)

Mr Ho is the technician at ABC Secondary School. He uses a recording system to store speeches given by
the Principal. The system stores audio files using format P, with the following attributes:

Sampling rate: 22.05 kHz

Sample size: 16 bits
Number of channels: 2
Data Compression Ratio: 10:1

(a) Estimate the file size of a 1-minute speech in MB. (2 marks)

(b) (i) When Mr Ho increases the sampling rate from 22.05 kHz to 44.1 kHz, the sound quality is
(i) improved. Why?
(ii) Mr Ho tries to use a sampling rate greater than 44.1 kHz but he does not feel that the sound quality
(ii) is further improved. Why not? (2 marks)
(c) Mr Ho wants to combine a speech audio file and a school song audio file, as shown below.

When making Y, the school song is embedded as the background music to the speech. What attributes
of the audio files should Mr Ho consider? Give two examples. (2 marks)

Solution
(a) (16 x 2 x 22.05 x 1000 x 60) / (10 x 8 x 1024 x 1024) (1)
= 0.5 MB (1)
(b) (i) More audio data in each sample is collected so that Mr Ho can recognize the improvement. (1)
(ii) Human beings are not easily aware of the increase of audio data with sampling rate greater than
Information and Communication Technology – Revision Notes/Written by Patrick Chan
Elective Part C – Multimedia Production and Web Site Development Page 19
(ii) 44.1 kHz. (1)
(c) amplitude, loop / number of channels (1x2)

Performance
(a) Fair. In general candidates were able to write the formula to estimate the file size of the audio file.
However, only a small number of them were aware of the data compression ratio and did the
calculation correctly.
(b) Fair. Less than half of the candidates were able to explain clearly that more data collected would lead
to a better sound quality. They showed the concept that human beings are not easily aware of the
increase of audio data with a sampling rate greater than 44.1 kHz.
(c) Fair. About a third of the candidates were able to name two attributes of an audio file. Some of the
candidates were not able to correctly spell the essential term ‘amplitude’.

2.3.5 Video Attributes

Video Standard Digital Video Standards Advanced Television Systems Committee (ATSC)
Used in USA, Canada, etc.
Digital Video Broadcasting (DVB)
Used in European countries
Integrated Services Digital Broadcasting (ISDB)
Used in Japan
Analog Video Standards Phase Alternating Line (PAL)
 Used in Europe, Hong Kong and Asian countries
 25 frames are transmitted each second
 625 individual scan lines for each frame
National Television System Committee (NTSC)
 Used in North America and most of South
America
 30 frames are transmitted each second
 525 individual scan lines for each frame
Sequential Colour with Memory (SECAM)
 Used in Europe
 25 frames are transmitted each second
 625 individual scan lines for each frame
Frame Size (Resolution) The larger the frame size, the higher the quality of the video (more details can be
shown), and the larger the file size is.
Common video frame sizes 1280x720 (HD)
(aspect ratio: 16:9) 1920x1080 (Full HD)
2560x1440 (Wide Quad HD – 2K)
3840x2160 (Ultra HD – 4K)

Information and Communication Technology – Revision Notes/Written by Patrick Chan

Elective Part C – Multimedia Production and Web Site Development Page 20
7680x4320 (Full Ultra HD – 8K)
Progressive Scan (p)  Video draws a complete frame in each screen
refresh / All lines in each frame are refreshed
one by one
 Advantage: smoother motion and higher reality
Interlaced Scan (i)  Video draws a frame in successive passes of
alternating lines in each screen refresh / Every
other lines in each frame are refreshed
 Advantage: reduce video blinking and sooth
dizziness (暈眩) of users
Frame Rate It is the number of video frames displayed on the screen in one second. It is
measured in frames per second (fps). The higher the frame rate, the smoother the
motion of the video and the larger the file size.
Common frame rate 24 fps – widely used in film
standard 25 fps – used for direct compatibility with television
30 fps – a film camera’s frame rate
50/60 fps – progressive format used by HDTV
72 fps – an experimental format
Colour Depth Most videos use colour depth of 24-bit
Sound information Audio is always embedded in a video. The file size of audio cannot be neglected
when calculating the file size of a video file.

Uncompressed Video = Frame size (pixels) x Frame rate (fps) x Colour depth (bits) x Duration (s)
File Size (audio = 1920x1080 pixels x 24 fps x 24 bits x 60 s
excluded) = 8.3 GB

Bit rate Same as audio, compressed video will have an attribute of bit rate, which is
measured in bps, and can be encoded using CBR or VBR.

Compressed Video File = Constant Bit Rate (bps) x Duration (s) + Audio File Size
Size (audio included) = 10 Mbps x 60 s + 20 MB
= 10x1024x1024 bits x 60s + 20 MB (or 10x1000x1000 bits x 60s +20 MB)
= 75 + 20 MB
= 95 MB
OR
= Uncompressed Video File Size / n + Audio File Size (Assumed that the
= compression ratio is n:1)

Information and Communication Technology – Revision Notes/Written by Patrick Chan

Elective Part C – Multimedia Production and Web Site Development Page 21
Past Paper Question (DSE Practice Paper Q1bii)
Peter decides that all the videos uploaded should be converted to a standard format. Suggest two attributes
(apart from video file format and frame rate) in which the videos can be standardized. (2 marks)

Solution
Resolution (frame size), bit rate, encoding scheme (any two) (1x2)

Performance
About half of the candidates were not familiar with the attributes of video and did not suggest adequate
attributes in which the videos could be standardized.

Past Paper Question (DSE 2013 Q1d,1eii,1eiii,2e)

(a) Mr Au sets up a web site to provide a movie-on-demand service so that customers can watch movies
online. It takes Mr Au 200 seconds to upload a 60 MB movie to the server. Estimate the transmission
bit rate and show your calculation. (2 marks)
(b) After logging on to the web site, customers can watch movies, as shown below:

(i) Customers can choose option 1080i. What does the number of 1080 represent?
(ii) The letters ‘p’ and ‘i’ after the numbers refer to ‘Progressive’ and ‘Interlaced’ respectively.
Briefly describe what these terms mean. (4 marks)
(c) Peter is a photographer. He sets up a web site to sell photos online. Peter wants to provide a function
on the web site so that users can produce a video from a number of photos. Suggest three
attributes/features of the function. (3 marks)

Solution
(a) 60 x 1024 x 1024 x 8 / 200 or 60 x 8 / 200 (1)
= 2516582.4 bit/s or 2.4 Mbps (2.5 Mbps) (1)
(b) (i) Number of lines scanned per second (2)
(i) (1 mark only for “height”)
(i) (“Resolution / number of pixels scanned per second / each frame / in the width” are unacceptable)
(ii) In progressive video, all lines in each frame are refreshed one by one. (1)
(ii) (“update line by line” is unacceptable)
(ii) In interlace video, every other lines in each frame are refreshed. (1)
Information and Communication Technology – Revision Notes/Written by Patrick Chan
Elective Part C – Multimedia Production and Web Site Development Page 22
(ii) (“change one after another / after layer” are unacceptable)
(c) Frame rate / resolution / File format / transition effect / audio / sub-titles (1x3)

Performance
(a) Good. Most candidates estimated the transmission bit rate successfully. Some candidates, however,
could not show their calculations.
(b) Satisfactory. About a quarter of the candidates could describe the meaning of “Progressive” and
“Interlaced” clearly. Some candidates only wrote “number of lines”, but did not explain in accordance
of the “number of lines scanned per second”.
(c) Fair. Candidates mixed up the attributes/features of photos and that of the function for producing a
video from a number of photos.

Past Paper Question (DSE 2014 Q3ci)

Mr Li converts the animation into a video file with the following attributes.

Frame rate: 24 frames / second

Resolution: 320 x 240 pixels
Colour Depth: 24 bits
Bit rate: 500 kbps
Length of the video: 60 seconds

Mr Li expects that the file size should be

24 x 60 x 320 x 240 x 24 / 8 = 316 MB

However, the actual file size is much smaller. Estimate the actual file size and briefly explain why it is
much smaller than Mr Li expects. (2 marks)

Solution
500 kbps x 60 s = 3.6 MB (3.5 MB to 4 MB or equivalent) (1)
The actual file size is much smaller because data compression is used in the video. (1)

Performance
Fair. Only a small number of the candidates were able to clearly explain how the bit rate affects the size of
a video file.

Past Paper Question (DSE 2015 Q1d)

The Principal wants to upgrade the recording system so as to broadcast videos using streaming
technology. Mr Ho uses MPEG format for the videos at a transmission bit rate of 450 Kbps.

Information and Communication Technology – Revision Notes/Written by Patrick Chan

Elective Part C – Multimedia Production and Web Site Development Page 23
(a) 2 MB of data needs to be downloaded before starting to play a video. Estimate the waiting time before
the video can be played. (2 marks)
(b) The Principal thinks that the waiting time is too long. Suggest how to adjust one attribute of the video
to reduce waiting time. (1 mark)

Solution
(a) (2 x 1024 x 1024 x 8) / (450 x 1000) (1)
= 37.3 seconds (1)
(b) Reduce the frame rate/resolution/compression ratio so as to create a video with a smaller file size and
hence reduce the waiting time. (1)

Performance
Satisfactory. About a third of the candidates were able to estimate the waiting time with the given bit rate
and the data size. About half of the candidates were able to answer (b) correctly.

2.3.6 Animation Attributes

Types of Animation  2D Animation: including bitmap- and vector-based animation
 3D Animation: using polygons to create animation, such as motion capture (動
作採集) and crowd simulation (群集模擬)
Attributes of 2D Animation
Resolution (Frame Size)  Bitmap-based/Frame-based Animation: Resolution Dependent
 Vector-based/Pathway Animation: Resolution Independent
Frame Rate  Higher frame rate means smoother motion
Colour Depth  Bitmap-based/Frame-based Animation: 8-bit
 Vector-based/Pathway Animation: 24-bit
Looping  The animation will start over again
Other properties of 2D Animation (more details will be listed in Chapter 2.4)
Properties of bitmap-  Support by most browsers
based animation  Duration can be affected by frame rate and the number of still images involved
 Transparency can be applied
 Uses flip-book animation mechanism
Properties of vector-  Support true color, sound effects and interactivity
based animation  Small file size with short loading time
 Need extra plug-in for browsers
 Keyframe and tweening
 Keyframe is the frame containing the main object
 Tweening means creating tween/intermediate frames between two
keyframes in order to make the motion smoother

Information and Communication Technology – Revision Notes/Written by Patrick Chan

Elective Part C – Multimedia Production and Web Site Development Page 24
Other Animation Technologies
Java (Applet (小程式)) Virtual Reality Modeling Language (VRML)
 Using a thread (線程)  Incorporates 3D shapes, colors, textures and sound
 The thread contains an animation loop to produce a “virtual world”
 Update screen multiple times per second  Supports Java, sound, animation and JavaScript

Past Paper Question (DSE Sample Paper 2C Q3d)

Mr Wong wants to design a demonstration tool for showing how an ancient Chinese character changes to
its modern shape by morphing. Some professionals suggest that the frame rate of the demonstration
should be greater than 20 frames per second.
(a) Do you agree this suggestion? Explain briefly. (2 marks)
(b) Should the frame rate be very large, for example, 100 frames per second? Explain briefly. (2 marks)

Solution
(a) Yes (1),
it is because the animation cannot be shown smoothly if the frame rate is too low. (1)
(b) No (1),
Because animation can be shown smoothly when the frame rate is about 30 frames per second. If the
frame rate is too high, a large amount of resources (such as memory) are needed. (1)

Past Paper Question (DSE Practice Paper 2C Q3cii)

Janice is a web designer. She is designing a web site for Easy Travel Agency. Janice wants to create an
animation to zoom out so that the logo of the company appears smaller. Janice wants to set the number of
frames per second for the animation as either 10 or 30. Give an advantage of each setting. (2 marks)

Solution
10 fps: The file size is smaller and hence it alleviates the network traffic. (1)
30 fps: The display of the animation is smoother in motion. (1)

Information and Communication Technology – Revision Notes/Written by Patrick Chan

Elective Part C – Multimedia Production and Web Site Development Page 25
Chapter 2.4 – Multimedia Basics: Multimedia File Types
2.4.1 Text File Formats
TXT (Plain Text File)  Only preserve ASCII characters
 Don’t preserve formatting features
 No security control provided
 Smallest File Size
DOC/ODT (Document)  Preserve formatting features
 Advanced functions, for example, mail merge, are provided
 Provide security control such as password protection
 Moderate File Size
RTF (Rich Text Format)  Preserve formatting features
 Cross-platforming
 Do not contain macros
 Good for e-mail
 File Size is similar to DOC format
PDF (Portable Document  Preserve formatting features
Format)  Cross-platforming
 PDF Editor is needed to edit PDF file
 Provide security control such as password protection (deter people from
editing)
 Largest File Size

Past Paper Question (DSE 2014 2C Q4a)

Tom and Mary are going to develop an online platform for the students of an education institute to do
mathematics quizzes online and offline. Tom suggests providing the quizzes in PDF, instead of JPG, for
students to download. Give two reasons to support his suggestion. (2 marks)

Solution
It has smaller file size. / It supports form filling. / It supports text copying. /
It can be read by screen reader programs. / It can contain multiple images. /
It can include multimedia elements (e.g. audio and video). / It can include hyperlinks. /
The text can be shown clearly (without zigzag) when its size is increased. (1x2)

Performance
Poor. Only a small number of the candidates were able to formulate satisfactory ideas when analyzing a
comparison between the file formats PDF and JPG.

Information and Communication Technology – Revision Notes/Written by Patrick Chan

Elective Part C – Multimedia Production and Web Site Development Page 26
2.4.2 Graphics File Formats
Bitmap File Formats (Uncompressed)
BMP (Bitmap)  Easy to create
 Supported by all browsers
 More realistic as no compression is applied
 Supports true color
 Large file size because it is uncompressed
 Clarity will be lost when the size is reduced
Bitmap File Formats (Lossless Compression)
Basic Concept
This compression technique is for symbolic data in which it reproduces an exact, bit-identical data of the
original data. The compression ratio will be lower for the reproduced file.
BMP (Bitmap)  It supports Run-length Encoding (RLE) 8 compression technique
 RLE 8 breaks down a group of data into 2-byte pairs:
the first byte represents the count of the data;
the second byte represents the repeated data
Example 1 Example 2
Original data 01 01 01 01 01 01 01 03 03 05
Compressed data 04 01 03 01 02 03 01 05
 Unsuitable for the complex images as it may produce a negative
compressed file (with larger file size to the original one) due to its
technical limitation (refer to example 2 of the above table)
GIF (Graphics  It supports Lempel-Ziv-Welch (LZW) compression technique
Interchange Format)  Supports up to 8-bit color depth
 Supports animation and transparency
 Can be used to sharpen the text edge
 Supports interlacing
the image will be displayed in successive passes of alternating lines which
allows a reasonable partial display of the image before the full image is
painted when the connection is slow (e.g. heavy network traffic)
PNG (Portable Network  Better compression than GIF (about 2/3 file size of GIF)
Graphics)  Supports true color
 Supports adjustable transparency and interlacing
 More compatible with web browsers and image editing software than gif
TIFF (Tag Image File  Using Group 4 (G4/CCITT) or LZW compression technique will produce a
Format) lossless compressed TIFF image
 PDF also supports CCITT compression

Information and Communication Technology – Revision Notes/Written by Patrick Chan

Elective Part C – Multimedia Production and Web Site Development Page 27
Bitmap File Formats (Lossy Compression)
Basic Concept
This compression technique is for diffused (離散) data in which bits which are not needed for reproduction, for
example, the redundant parts of the image that human eye cannot distinguish, will be removed. It produces
file with higher compression ratio which facilitates fast transmission.
JPEG (Joint  Supports Discrete Cosine Transform (DCT) compression technique
Photographic Experts  Supports true color
Group)  Supports sequential (line-by-line) encoding or progressive encoding
 Progressive encoding allows a reasonable preview after receiving only
a portion of the data
 Work well on photographs and naturalistic artwork (自然的藝術品)
 Should be reserved for final publishing during image editing
TIFF (Tag Image File  Using JPEG-based compression technique will produce a lossy compression
Format) TIFF image
 Used on scanner, DC, fax software for desktop publishing and 3D applications
Comparison Table for Bitmap File Formats
Format BMP JPEG GIF PNG TIFF
Colour Depth 24-bit 24-bit 8-bit 24-bit 24-bit
Compression Uncompressed / Lossy (DCT) Lossless (LZW) Lossless Lossless
Type Lossless (RLE (CCITT/LZW) /
8) Lossy (JPEG)
Compression Nil High Low Low (slightly Varies
Ratio (Uncompressed) higher than
/ Low (Lossless) GIF)
Animation Not support Not support Support Not support Not support
Transparency Not support Not support Support Support and Not support
Adjustable
Applications Any kinds of Photos, web Simple cartoons Simple images Scan and fax
image graphics (web or images (good for
album) uploading)

Vector Graphics File Format

SVG (Scalable Vector  XML and 2D Graphics for the Web
Graphics)  Used in printing, portable devices and image editing

Information and Communication Technology – Revision Notes/Written by Patrick Chan

Elective Part C – Multimedia Production and Web Site Development Page 28
Past Paper Question (DSE Practice Paper 2C Q2e,3a)
1. Amy is a web designer. She designs a web site to promote monuments to tourists in Hong Kong. She
creates a design for the first page of the web site, both with text and images.

Amy wants to show the images in this design using interlacing. Give the main advantage of this
technique. (2 marks)

Solution
It is faster to play the contour of the images. (2)
(1 mark for “faster to play”)

Information and Communication Technology – Revision Notes/Written by Patrick Chan

Elective Part C – Multimedia Production and Web Site Development Page 29
2. Janice is a web designer. She is designing a web site for Easy Travel Agency. The first page of the web
site is sketched below:

Janice first draws the company logo using a vector graphics software package. Then, she exports the
logo using the filename ‘logo.gif’ with a resolution of 50 x 30.
(a) Why does Janice need to export the logo in another format instead of using the logo in vector
graphics format directly? (1 marks)
(b) Give two reasons to explain why Janice wants to export the logo in GIF format instead of JPEG
format. (2 marks)
(c) After inserting the logo into the web page, Janice feels that the web page will look much better if
the resolution of the logo is 150 x 90. There are two ways to alter the resolution:
(1) Use the HTML code ‘<img src=”logo.gif” width=”150”>’.
(2) Use the vector graphics software package again to export the logo with a resolution of 150 x
90.
Which method do you suggest? Explain briefly. (2 marks)

Solution
(a) It is because the browsers do not support such a graphics format. (1)
(b) It is a lossless image. (compression) / It supports transparency. / It supports animation. (1x2)
(c) Method (2) should be used. (1)
Otherwise, the enlarged bitmap graphics will become vague with saw-tooth edges. (1)

Performance
The students were weak in demonstrating the concepts of lossy and lossless compression for GIF and
JPEG and explaining the limitation that browser could not support the display of vector graphics.

Information and Communication Technology – Revision Notes/Written by Patrick Chan

Elective Part C – Multimedia Production and Web Site Development Page 30
Past Paper Question (DSE 2012 2C Q3aii)
Peter has to submit a multimedia project assignment to his teacher via email. He draws a picture on a
piece of paper. He wants to use a scanner to scan the picture. There are two different methods that can be
used when scanning an image: ‘lossless’ and ‘lossy’. Compare these two methods in terms of file size,
compression and colour depth. (3 marks)

Solution
For ‘lossless’,
the file size is larger; (1)
the file keeps all the information of the image without data loss while the other one does not; (1)
the file keeps the color depth while the other one may diminish the color depth (color depth remains
unchanged/number of colors decreases) for better compression performance in general. (1)

Performance
Good. A few candidates wrongly stated that ‘lossy’ has compression while ‘lossless’ does not.

Past Paper Question (DSE 2013 2C Q2a)

Peter is a photographer. He sets up a web site to sell photos online. The photos are in the file formats
PNG, JPG and BMP. Compare these formats by writing ‘Yes/No’ in the following table. (3 marks)
Compression (Yes/No) Data loss in compression (Yes/No)
PNG
JPG
BMP

Solution
PNG: Yes, No (1)
JPG: Yes, Yes (1)
BMP: No, No (1)

Performance
Good. Most candidates could identify the characteristics of different file formats.

Past Paper Question (DSE 2014 2C Q1di)

Mary creates four transparent images of different walking paths and incorporates them into the floor plan
so that visitors can select one walking path for their visit. Suggest a file format for the transparent images.
(1 mark)

Solution
GIF / PNG (1)

Information and Communication Technology – Revision Notes/Written by Patrick Chan

Elective Part C – Multimedia Production and Web Site Development Page 31
Performance
A high proportion of the candidates were able to suggest an appropriate file format for transparent images.

Past Paper Question (DSE 2015 2C Q1ei,1eii)

(a) The Principal wants to insert the school logo in the school web page. Mr Ho suggests using GIF
format instead of JPG format. Justify his suggestion. (1 mark)
(b) The Principal wants to insert his photo in the school web page. Mr Ho suggests using PNG format
instead of GIF format. Justify his suggestion. (1 mark)

Solution
(a) GIF is lossless compression. (1)
(b) The greatest color depth of PNG format is larger than that of GIF format. (1)

Performance
Satisfactory: The majority of the candidates were able to identify clearly the difference between the
properties of GIF, JPG and PNG.

2.4.3 Audio File Formats

Uncompressed File Format
WAV (Waveform)  Native audio file format of Microsoft Windows
 Maximum audio quality with all samples kept in the audio sound track
 Very large file size
 Commonly accepted by various applications
 Supports streaming
 Suitable for editing because information is sufficient
MIDI (Musical  A set of instructions that indicate how to play an instruction
Instrument Digital  A protocol that enables computer, keyboards and other musical device to
Interface) communicate with each other
 When playing back, the computer will look up the actual instrument sound
from a wave table stored in the sound card
 The file size is very small (about 1/100 of WAV) because it represents sound
information that includes value of musical score (樂譜) only (e.g. notes (音
符) pitch, length, amplitude) instead of the capture points of analog music
 Always used for background music of a web page
 May not be supported by all software, such as Adobe Flash
 Easy and precise to edit
Conversion between WAV and MIDI format
 WAV to MIDI is difficult because notes cannot represent all authentic sound
 MIDI to WAV is easy because instrumental sound is a kind of authentic sound

Information and Communication Technology – Revision Notes/Written by Patrick Chan

Elective Part C – Multimedia Production and Web Site Development Page 32
Uncompressed File Format
AIFF (Audio Interchange  Created by MacOS
File Format)  Using lossless storage method
 Same as WAV, file size is large
Lossless Compressed File Format
WMA (Windows Media  Compression Ratio: 2:1
Audio)  Supports streaming
ALAC/ALE (Apple  Developed by Apple
Lossless Audio  Supports streaming
Codec/Apple Lossless
Encoder)
Lossy Compressed File Format
MP3 (MPEG 1/2 Layer  It uses perceptual audio coding (感觀式音訊編碼) and psychoacoustic
3) compression (聲響心理學壓縮) to remove all superfluous information, which
is the redundant and irrelevant parts of a sound signal that human ear
cannot hear
 1/10 size of uncompressed audio files with standard bit rates 128 kbps
 Can be broken up into pieces while each piece is still playable
 Supports streaming
RA (RealAudio File)  Developed by RealNetworks
 Low-bitrate format
 Use variety of audio codecs
 Supports streaming
WMA  Compression Ratio: 10:1
 Supports streaming
AAC/M4A (Advanced  Developed by Motion Picture Experts Group (MPEG)
Audio Coding)  Supports streaming
 Suppose to replace MP3
 Support high sampling rate and more audio channels than MP3

Past Paper Question (DSE 2012 1B Q5bii)

Students can submit writing in electronic form and multimedia files for publication in the e-newsletter. Mr
Li encourages students to submit audio files in wav format rather than other common formats. Why? (2
marks)

Solution
It contains much information of the original data (quality) (1)
so that Mr Li can edit and extract necessary audio information. (1)

Information and Communication Technology – Revision Notes/Written by Patrick Chan

Elective Part C – Multimedia Production and Web Site Development Page 33
Performance
Poor. General description, such as ‘better sound quality’ but have no further explanation, is not an
acceptable answer. Candidates could not explain why wav format is better than the other formats.

Past Paper Question (DSE 2012 2C Q2a)***

John is a web page designer. He designs a web site for a secondary school. The principal wants to use the
school song as the background music of the school’s homepage. The music teacher plays the school song
on a piano and records it in a digital format.
(a) Is it possible to record this piano version of the school song in MIDI format? Explain briefly. (1 mark)
(b) John decides to create a MIDI file of the piano version of the school song instead of an MP3 file
because of its smaller file size. Why will the MIDI file be smaller? (1 mark)
(c) The Principal wants to record the school choir singing the school song. John uses the WAV format to
record and then uses the MP3 format for the web site. Justify the use of these two file formats. (2
marks)

Solution
(a) No, it is not directly played by an electronic instrument. / Yes, the piano has a MIDI output. / Yes,
MIDI software is used to extract the background music. (1)
(b) It only includes an instruction set and notes to instruct a sound card to make different audio effects,
and no actual audio play is stored in the file. (storage structure of MIDI & MP3) (1)
(c) The file in WAV format contains more information and it facilitates better audio editing. (quality) (1)
The file in MP3 format is smaller and it facilitates the web surfing. (size) (1)

Performance
Poor. Most candidates did not familiar with MIDI file format.

Past Paper Question (DSE 2014 2C Q1e)

Mary wants to add an audio file to the web pages. Give a reason to support the use of MP3 format and
MIDI format respectively. (2 marks)

Solution
MP3: The sound is authentic. / It comprises human voice. (1)
MIDI: The file size is smaller. / Precise edit can be conducted easily. (1)

Information and Communication Technology – Revision Notes/Written by Patrick Chan

Elective Part C – Multimedia Production and Web Site Development Page 34
2.4.4 Video File Formats
Common Video Codecs
MPEG 1  Lossy compression standard
 Used for VCD, with standard encoding bit rate of 1.5 Mbps, a resolution of
352x288 pixels and a frame rate of 25 fps
 Used for MP3 Audio file format too
MPEG 2  Lossy compression standard
(Larger compression  Used for DVD, with peak encoding bit rate of 10 Mbps, a resolution of
ratio than MPEG 1) 720x576 pixels and a frame rate of 25 fps
 Used for DVB too, with standard encoding bit rate of 40 Mbps
MPEG 4 Part 10  Lossy compression standard
Advanced Video Coding  Format AAC and AVC are MPEG 4-based
(MPEG 4 Part 10 AVC) /  Used for HD DVD and BD, with HD resolution and 30 fps of frame rate
H.264  Used in HDTV too
(Larger compression  XAVC, which is the highest level technique of MPEG 4, supports up to 4K
ratio than MPEG 2) resolution and 60 fps of frame rate
High Efficiency Video  Lossy compression standard
Coding (HEVC) / H.265  Used for UHD BD, supports up to 8K resolution and 300 fps of frame rate
 High coding efficiency
RealVideo (RV),  All are lossy compression standards
Windows Media Video  Used for streaming on the Internet
(WMV), DivX
Uncompressed File Format
AVI (Audio Video  For video file that plays on Microsoft Windows System
Interleave)  Large File Size
 Contains sufficient information that facilitates editing of the video
 Commonly supported by media players
 Divides a file’s data into blocks or chunks
 Contains both audio and video data in an interleaved manner which allows
synchronous audio-with-video playback
 Supports streaming with limitation (better say it doesn’t support)
 Limitation
 No provision of standardized way to encode aspect ratio information,
which may result in the failure for the media player of selecting the
right aspect ratio automatically (has to be corrected by manual)
 Streaming: As the indexing block is stored at the end of file, media player
could not jump to any arbitrary (隨意) location before buffered. For
example, users cannot jump to any location after the fifth minutes of the
video when the streaming video is just buffered to the fifth minutes.

Information and Communication Technology – Revision Notes/Written by Patrick Chan

Elective Part C – Multimedia Production and Web Site Development Page 35
Compressed File Format (Lossy compression)
MPEG/MPG (Moving  There are several standards of MPEG (refer to the common video codecs list)
Picture Experts Group)  Develop standards for coded representation of moving pictures, audio and their
combination
 For format MP4, it includes video format of AVC (Advanced Video Coding)
and audio format of AAC (Advanced Audio Coding)
 Good for editing
 Supports streaming
RM (RealMedia) /  Including video format of RV (RealVideo) and audio format of RA (RealAudio)
RMVB (RealMedia  Use Real-time Streaming Protocol (RTSP)
Variable Bit-rate)  For dedicated use of RealPlayer
 Allows multiple streams to be synchronized simultaneously
 Streams can be in CBR or VBR
 Supports streaming
ASF (Advanced System  Includes video format of WMV (Windows Media Video) and audio format of
Format) WMA
 Highly compressed with small file size
 Of high quality
 Easy to publish on the Internet
 Supports streaming
FLV/F4V (Flash Video)  Used to deliver video on the Web using Adobe Flash Player
 Embedded with SWF files
 Cross-platform
 Supports streaming
MKV  Developed by Matroska
 Intended to serve as a universal format for storing common multimedia content
 Supports streaming
MOV/QT (QuickTime  Developed by Apple and used in Mac computer
Movie)  Other than video and audio, it can store multimedia elements such as text, still
images and animation
 Supports streaming
3GP (3GPP File Format)  Simplified Version of MP4 format, designed for mobile devices
 Supports streaming

Past Paper Question (DSE Practice Paper 2C Q1ai)

Peter decides to set up a video-sharing web site for members to upload, share and view videos. It is found
that the extensions of the files uploaded by the members include:
avi, doc, flv, mov, mp3, mpg, pdf, php, rm, wmv
Which of these are video file types? (2 marks)

Information and Communication Technology – Revision Notes/Written by Patrick Chan

Elective Part C – Multimedia Production and Web Site Development Page 36
Solution
avi, flv, mov, mpg, rm, wmv (2)
(1 mark only for 4 items)

Past Paper Question (DSE 2013 2C Q1b,1ei)

(a) Mr Au is advised to store the movies in AVI format on the server. Give one advantage and one
disadvantage of using AVI format. (2 marks)

Solution
Advantage: It is compatible with many common video players. / No extra Codec is needed. / It has a
better quality (least compression needed). (1)
(“No codec is needed” is unacceptable)

Disadvantage: The file size is large. / It does not support streaming. (1)

Performance
Excellent. Most candidates could clearly explain the advantage and disadvantage of the AVI file
format in accordance of its specification.

(b) Suggest two common file formats for High Definition (HD) video.

Solution
MP4, MKV, AVI (H264, AVCHD), WMV, FLV, MOV (1x2)
(“codec, FFmpeg, DivX, Xvid, x264, mpeg” are unacceptable)

Performance
Satisfactory.

Past Paper Question (DSE 2014 2C Q3biii)***

Mr Li wants to upload the animation to his web site. He decides to save the animation in MP4 instead of
FLV. Other than popularity, give two reasons to support his decision. (2 marks)

Solution
MP4 supports menus/subtitles/chaptering.
MP4 is fully compatible with H.264 (e.g. better compression). / smaller file size
MP4 can be directly embedded within the HTML5 Internet standard. (easier to be inserted in web pages)
(1x2)

Performance
Fair. Candidates seemed to be unfamiliar with the differences between the video file formats MP4 and
Information and Communication Technology – Revision Notes/Written by Patrick Chan
Elective Part C – Multimedia Production and Web Site Development Page 37
FLV. A high proportion of candidates wrongly answered that MP4 could support streaming while FLV
could not.

2.4.5 Animation File Formats

Formats GIF (Bitmap-based Animation) SWF (Vector-based Animation)
Mechanism  Using flip-book animation  Consists of keyframes, tween frames
mechanisms. Each new frame is a and tweening effects
new image that replaces the  Keyframe contains main vector
previous one objects. With the application of
 An illusion of motion is created tweening effects, tween frames are
when the sequence of images is generated between two keyframes,
displayed very quickly which makes the object appear to
move on their own while displaying
File Size  Larger  Smaller
 Depends on the number, resolution  Depends on the number and
and color depth of still images complexity of the vector objects
Rescaling  Quality will loss (zigzag appears)  No quality lost
Streaming  Not support  Support
Multimedia embedded  Not support  Support
Interactivity involved  Not support  Support
Browser Plug-in  Not required  Required
Editing software  Simple functionality  Versatile functionality
Application  Animated web site advertisement  Web animation
banners and buttons  Interactive games and quizzes
Remark  An understanding of the scripting
language (ActionScript) is required
Advantages  Directly supported by browsers  Small file size with short loading
 Transparency can be applied time
 Supports true color, streaming,
multimedia and interactivity
 No zigzag forms (quality lost)
when enlarging the file
Disadvantages  Large file size with long loading  Requires extra plug-in for
time browsers
 Colour is unnatural (8-bit colour  Not supported by mobile devices
depth)  Editing process may be more
 Quality will lose when enlarging complicated
file

Information and Communication Technology – Revision Notes/Written by Patrick Chan

Elective Part C – Multimedia Production and Web Site Development Page 38
Past Paper Question (DSE Sample Paper 2C Q3bii,3biii)
Animation software A can generate the interim scenes (tween frames) automatically in the demonstration
according to the tweening style selected. The product can also be exported as an animation GIF file.
(a) The number of interim scenes generated in the demonstration can be affected by many attributes. Give
two of them. (2 marks)
(b) Besides the number of scenes, give two attributes that affect the file size of the exported animated
GIF. (2 marks)

Solution
(a) Frame rate (1) and time for showing the demonstration (1)
(b) The number of pixels in each scene (1) and the color palette used (1)

2.4.6 Codecs List for reference

Lossless Compression  RLE (Run-length Encoding)
 LZW (Lempel-Ziv-Welch) Encoding
 Huffman Encoding
 Arithmetic Encoding
Lossy Compression  DCPM (Differential Pulse Code Modulation)
 FFT (Fast Fourier Transform)
 DCT (Discrete Cosine Transform)
Mixed Compression  JPEG
 MPEG
 H.261
Additional Information  It uses four coding modes
of JPEG Codec  Lossless Mode (Code 1)
 Lossy Sequential DCT-based Mode (Baseline Mode)
 Lossy Progressive DCT-based Mode (Code 3)
 Hierarchical Mode

Information and Communication Technology – Revision Notes/Written by Patrick Chan