Introduction to Multimedia
Multimedia elements
Multimedia means combining more than one type of media to share information. Most of what we see on screens is built from four elements. Click one to start, or press → to go through the lesson in order.
Text
Text is the most basic multimedia element. It carries exact information that pictures and sound can't: names, instructions, numbers and labels.
- Headings grab attention and organise content.
- Body text explains details.
- Labels and captions tell us what a picture, button or chart means.
- How text looks (typeface, size, colour) changes how easy it is to read and how it feels.
Serif vs sans serif
A serif is the small stroke or "foot" at the end of a letter. Sans is French for "without", so sans serif fonts have no feet.
| Serif | Sans serif | |
|---|---|---|
| Looks | Traditional, formal, trustworthy | Modern, clean, simple |
| Best for | Printed books, newspapers, long reading | Screens, signs, headings, slides |
| Examples | Times New Roman, Georgia | Arial, Helvetica, Calibri |
Font size
Font size is measured in points (pt). 72 points = 1 inch on paper. On screens we often use pixels (px): 12 pt ≈ 16 px.
- Bigger sizes show importance: titles are larger than body text. This is called hierarchy.
- The right size depends on viewing distance: a book is close, a slide is far.
| Use | Typical size |
|---|---|
| Footnote / caption | 8–10 pt |
| Printed body text | 10–12 pt |
| Headings | 16–28 pt |
| Presentation slides | 24 pt or more |
| Posters | 72 pt or more |
Font and typeface
A typeface is the design of the letters, like Arial. A font is one version of it: Arial Bold 12 pt is a font. Today people use both words for the same thing.
- Serif: classic and formal.
- Sans serif: clean and modern.
- Script: looks like handwriting, elegant.
- Display / decorative: eye-catching, for big titles only.
- Monospace: every letter is the same width, used for code.
- Style: bold, italic, underline add emphasis.
Extra: making text easy to read
A great font can still be hard to read. Colour contrast, alignment, line spacing and line length matter just as much.
- Contrast: dark text on a light background (or the opposite). Low contrast is hard to read, especially on projectors.
- Alignment: left-aligned text is easiest to read. Use centred text only for short titles.
- Line spacing: a little space between lines helps the eye.
- ALL CAPITALS FEELS LIKE SHOUTING AND IS SLOWER TO READ.
Multimedia combines text, images, audio and video. When text is aligned well, the reader's eye can find the start of each new line quickly, which makes long paragraphs much easier to follow.
Text file formats: TXT, DOCX, PDF
The same content can be saved in different file formats. Each saved file is a separate file that keeps different information and suits a different job.
| .txt | .docx | ||
|---|---|---|---|
| Stores fonts, bold, colours | No | Yes | Yes |
| Pictures and tables | No | Yes | Yes |
| Easy to edit | Yes | Yes | Hard |
| Looks the same on every device | Plain only | Can shift | Yes |
| Typical size (1 page) | ~2 KB | ~15 KB+ | ~30 KB+ |
| Opens with | Any text editor (Notepad) | Word, Google Docs, LibreOffice | Any PDF reader or browser |
| Best for | Notes, code, settings | Documents you're still writing | Final copies to share or print |
My Holiday Trip We visited the beach on Saturday. The water was warm and the sand was soft. (A .txt file can only store characters, so the photo, colours and bold could not be saved in this file.)
My Holiday Trip
We visited the beach on Saturday. The water was warm and the sand was soft.
Click anywhere here and type: a .docx is made to be edited.
My Holiday Trip
We visited the beach on Saturday. The water was warm and the sand was soft.
Page 1 of 1 · Layout is locked: it looks the same on every phone, computer and printer.
MyHoliday.docx (secretly a ZIP folder) ├─ [Content_Types].xml ├─ word/document.xml ← the text + formatting ├─ word/styles.xml ← fonts and sizes └─ word/media/image1.jpg ← the photo Inside document.xml: <w:p> <w:r><w:t>We visited the </w:t></w:r> <w:r><w:rPr><w:b/></w:rPr><w:t>beach</w:t></w:r> </w:p>
%PDF-1.7 1 0 obj << /Type /Page /MediaBox [0 0 595 842] >> ← A4 page size 2 0 obj << /Type /Font /BaseFont /Montserrat >> ← font is embedded BT /F2 24 Tf ← font F2, size 24 72 760 Td ← exact position on the page (My Holiday Trip) Tj ← draw this text ET %%EOF Every letter has a fixed position, so the page never moves.
Quick quiz: Text
Image: made of pixels
A digital photo is a grid of tiny coloured squares called pixels (picture elements). Each pixel stores one colour as numbers: how much Red, Green and Blue light (RGB), from 0 to 255.
Extra: bitmap vs vector
There are two ways to store a picture. A bitmap (raster) stores every pixel. A vector stores shapes as maths: "a circle here, this big, this colour".
| Bitmap (raster) | Vector | |
|---|---|---|
| Made of | Pixels | Points, lines, curves |
| When enlarged | Gets blocky | Stays sharp |
| Best for | Photos | Logos, icons, fonts, diagrams |
| Formats | JPG, PNG, GIF, BMP, HEIC | SVG, AI, EPS (and PDF) |
Resolution
Resolution is how many pixels an image has, written as width × height. More pixels show more detail but make a bigger file.
1920 × 1080 = 2,073,600 ≈ 2.1 megapixels (MP)
- 1 megapixel = 1 million pixels. A 12 MP phone camera takes about 4000 × 3000 pixel photos.
- For printing we use PPI / DPI (pixels or dots per inch). 300 PPI looks sharp on paper; 72–150 PPI is fine on screens.
- Enlarging a small image cannot add detail. It just makes the pixels bigger (pixelation).
Colour depth
Colour depth (bit depth) is how many bits store the colour of each pixel. More bits mean more possible colours.
1-bit → 2 · 8-bit → 256 · 24-bit → 16,777,216
| Bits | Colours | Example |
|---|---|---|
| 1 | 2 | Black and white |
| 2 | 4 | Early handheld games |
| 4 | 16 | Old computers |
| 8 | 256 | GIF images |
| 16 | 65,536 | "High colour" |
| 24 | 16.7 million | "True colour": JPG, PNG |
Aspect ratio
Aspect ratio is the shape of an image: width : height. 1920 × 1080 and 1280 × 720 are different sizes but the same 16 : 9 shape.
| Ratio | Where you see it |
|---|---|
| 1 : 1 | Square social media posts, profile pictures |
| 4 : 3 | Old TVs, many tablets and phone photos |
| 3 : 2 | Camera photos, 6 × 4 inch prints |
| 16 : 9 | Widescreen TV, YouTube, slides |
| 9 : 16 | Phone stories, Reels, TikTok |
Compression: lossless vs lossy
Compression makes files smaller so they load and send faster. There are two kinds.
| Lossless | Lossy | |
|---|---|---|
| Idea | Write the same data in a shorter way | Throw away detail people hardly notice |
| Quality | Perfect copy | Some quality lost forever |
| File size | Smaller | Much smaller |
| Image formats | PNG, GIF | JPG, HEIC, WebP (lossy) |
| Like… | Packing a suitcase neatly | Leaving some clothes at home |
"5W" means "5 white pixels". Large areas of one colour compress well. Busy, noisy patterns don't, which is why photos need lossy compression.
Lossy in action: JPG quality
When you save a JPG you choose a quality. Lower quality throws away more detail and gives a smaller file. This demo really compresses the picture in your browser.
- Look for blocks and fuzzy edges (called artifacts) around the text and the balloon.
- Around quality 70–85, most people can't see the difference, but the file is far smaller.
Image file formats
Each format makes different trade-offs between quality, size and features.
| Format | Compression | Colours | Transparency | Animation | Best for |
|---|---|---|---|---|---|
| BMP | Uncompressed (huge files) | Up to 16.7 M | No | No | Old Windows programs; rarely used now |
| JPG / JPEG | Lossy | 16.7 M | No | No | Photos on websites, email, cameras |
| PNG | Lossless | 16.7 M | Yes (smooth) | No | Logos, screenshots, graphics with sharp edges |
| GIF | Lossless | Only 256 | Yes (on/off) | Yes | Simple animations, memes |
| HEIC | Lossy (newer, more efficient) | Billions (10-bit) | Yes | Yes | iPhone photos: about half the size of JPG |
BMP, PNG and JPG are measured live. GIF and HEIC are typical estimates because browsers can't save those formats.
A holiday photo to email to Grandma
JPG: small file, photos look great, opens everywhere.
The school logo on a see-through background
PNG: lossless, sharp edges, supports transparency. (Or SVG if it's a vector!)
A short funny animation for a chat
GIF: supports animation and works almost everywhere.
A screenshot of a spreadsheet for a report
PNG: text stays crisp. JPG would add blurry artifacts around letters.
Saving thousands of photos on an iPhone
HEIC: same quality as JPG at about half the size.
Quick quiz: Image
Audio: from sound wave to numbers
Sound is air vibrating. A microphone turns those vibrations into a wave. A computer measures the wave many times a second and saves each measurement as a number. This is digital audio.
- Frequency (Hz) = how fast the wave vibrates = pitch. Humans hear about 20 Hz to 20,000 Hz.
- Amplitude = how tall the wave is = loudness.
- Analogue → digital needs two choices: how often to measure (sampling rate) and how precisely (bit depth).
Sampling rate
Sampling rate is how many times per second the sound is measured. It is written in hertz (Hz) or kilohertz (kHz). Higher rate = more detail, bigger file.
| Rate | Used for |
|---|---|
| 8 kHz | Old telephone calls |
| 22.05 kHz | Low-quality web audio, radio |
| 44.1 kHz | Music CDs, Spotify |
| 48 kHz | Video and film sound |
| 96 kHz + | Professional studios |
Bit depth
Bit depth is how precisely each sample is measured. Each sample must snap to the nearest available level. More bits = more levels = cleaner sound.
8-bit → 256 levels · 16-bit → 65,536 · 24-bit → 16,777,216
- 16-bit is CD quality. 24-bit is used in recording studios.
- Too few bits adds a hissing noise and distortion.
- Each extra bit adds about 6 dB of dynamic range (the gap between the quietest and loudest sound).
Number of channels
A channel is one separate stream of sound sent to a speaker. More channels can make sound feel like it comes from different directions.
- Mono (1 channel): the same sound from every speaker. Phone calls, voice notes, podcasts.
- Stereo (2 channels): left and right are different. Music, games, most videos.
- Surround 5.1 (6 channels): front left, centre, front right, two rear speakers and a subwoofer (".1") for deep bass. Cinemas and home theatres.
- 2 channels = twice the data of mono.
The circles show how loud each channel is right now.
Duration and file size
Duration is how long the audio lasts. For uncompressed audio, every second adds the same amount of data, so we can calculate the file size exactly.
bytes = bits ÷ 8 · 1 KB = 1024 bytes · 1 MB = 1024 KB
Audio compression
Uncompressed audio is large. Lossless compression (FLAC, ALAC) shrinks it to about half with no change in sound. Lossy compression (MP3, AAC) removes sounds our ears are less likely to notice, often making files 5–10 times smaller.
Sizes for a 3-minute stereo song. Lossy quality is chosen as a bit rate in kbps: higher = better sound, bigger file.
This demo imitates how lossy files lose high frequencies at lower bit rates. Real MP3 encoders are smarter, so at 128 kbps and above most people hear no difference.
Audio file formats
The file format decides how the sound is stored and compressed, and which devices can play it.
| Format | Compression | Quality | Size (3 min song) | Typical use |
|---|---|---|---|---|
| WAV | None | Perfect | ~30 MB | Recording and editing (Windows) |
| AIFF | None | Perfect | ~30 MB | Recording and editing (Apple) |
| FLAC | Lossless | Perfect | ~15–20 MB | Music collectors, hi-fi streaming |
| MP3 | Lossy | Good | ~3–7 MB | Works on almost every device |
| AAC (.m4a) | Lossy | Better than MP3 at the same size | ~3–6 MB | Apple Music, YouTube, iPhone |
| OGG / Opus | Lossy (open, free) | Very good | ~2–5 MB | Spotify, games, voice chat (WhatsApp, Discord) |
| MIDI extra | Not audio! | Depends on the instrument sounds | ~10–50 KB | Stores notes ("play C, loud, 1 beat"), not recorded sound |
Recording a band in a studio, then editing it
WAV or AIFF: uncompressed, no quality lost while editing.
Putting 2,000 songs on an old MP3 player
MP3: small files that play everywhere.
Archiving your favourite albums in perfect quality but saving space
FLAC: lossless, about half the size of WAV.
Sending a voice message in a chat app
Opus / AAC: lossy, tiny files, clear speech. Usually mono!
Quick quiz: Audio
Video: a flipbook of images
A video is a series of still images called frames, shown quickly one after another, usually with sound. Our brain blends them into smooth motion.
- Video combines everything so far: it has image properties (resolution, aspect ratio, colour depth) and audio properties.
- It also has its own: frame rate and duration.
- Because it stores so many images, video files are the largest multimedia files, so compression is essential.
Video resolution
Like images, video resolution is width × height in pixels, but it is usually named by its height ("1080p") or a nickname ("4K").
Drawn to scale. The p in 1080p means progressive: every line of the picture is drawn in each frame.
Video aspect ratio
When a video's shape doesn't match the screen's shape, black bars appear. Bars at the top and bottom are a letterbox. Bars on the sides are a pillarbox.
| Ratio | Used for |
|---|---|
| 4 : 3 | Old TV shows (before ~2009) |
| 16 : 9 | HD TV, YouTube, most video |
| 9 : 16 | Vertical phone video: TikTok, Reels, Shorts |
| 2.39 : 1 | Cinema "widescreen" films |
Video colour depth
Video colour depth is usually given per colour channel. Normal video uses 8 bits each for red, green and blue (24 bits per pixel). HDR video uses 10 bits per channel.
8-bit: 256³ = 16.7 million
10-bit: 1024³ = 1.07 billion
- Too few bits causes banding: stripes in smooth areas like skies and shadows.
- HDR (High Dynamic Range) uses 10-bit colour for brighter highlights and smoother gradients. It needs an HDR screen.
Most projectors and laptop screens show 8 bits per channel, so 10-bit can't be shown here.
Frame rate
Frame rate is the number of frames shown per second, in fps. Higher frame rates look smoother but need more data.
| fps | Used for |
|---|---|
| 12 | Simple animation, GIFs |
| 24 | Cinema films (the "film look") |
| 25 / 30 | TV and online video |
| 60 | Sports, video games, smooth phone video |
| 120 – 240 | Slow-motion video |
Duration and file size
Duration is the running time of the video. Uncompressed video size grows with every frame, and the numbers get huge very quickly.
uncompressed size = frame size × frame rate × duration
- This is why video is almost always compressed with a codec (H.264, H.265, AV1).
- Codecs also save space between frames: if the background doesn't move, only the changes are stored.
- Streaming quality is measured in bit rate (Mbps): YouTube 1080p uses roughly 8 Mbps.
Compressed sizes use typical streaming bit rates plus 128 kbps AAC audio, so they are estimates.
Video file formats: containers and codecs
A video file is a container (the box, like .mp4) holding several tracks. Each track is compressed with a codec (the way it is squeezed, like H.264).
| Codec | Notes |
|---|---|
| H.264 (AVC) | Works everywhere; the most common codec |
| H.265 (HEVC) | Same quality at about half the size; used for 4K and iPhones |
| VP9 / AV1 | Free, open codecs used by YouTube and Netflix |
| ProRes | Very high quality, huge files, for professional editing |
The audio component of video
Most videos carry one or more audio tracks alongside the pictures. The sound must stay in sync with the frames, or speech won't match the lips.
- Sound in a video can include dialogue, narration, music and sound effects, usually mixed into one track.
- The audio has its own properties: sampling rate (usually 48 kHz), bit depth, channels (stereo or 5.1) and codec (AAC is common).
- One file can hold several audio tracks, for example different languages.
- Audio more than about 45 ms early or 125 ms late becomes noticeable to viewers.
Quick quiz: Video
Extra: beyond the four elements
Many textbooks list two more multimedia elements, and every creator needs to know about copyright.
Animation is movement created from drawings or computer graphics, not filmed with a camera. A computer can fill in the frames between two keyframes (called tweening).
Summary: what each element has
Many properties are shared. Video borrows almost everything from images and audio. Click a dot to jump back to that slide.