← Course home N5 Computing Science  ·  James Gillespie's
WDD  ·  Web Design & Development

File Formats, Compression and Copyright

Lesson 3 of 13 Approx 2 hrs

Learning intentions

  • Know the properties and use cases for the WAV and MP3 audio formats
  • Know the properties and use cases for the JPEG, GIF, and PNG image formats
  • Understand what compression is and the difference between lossy and lossless compression
  • Understand how resolution, colour depth, and sampling rate affect file size
  • Know the key provisions of the Copyright, Designs and Patents Act 1988 and how it applies to web content

Success criteria

  • I can compare WAV and MP3, referring to compression, quality, and file size
  • I can compare JPEG, GIF, and PNG, referring to compression type, animation support, transparency support, and colour depth
  • I can explain why web developers need to compress files before uploading them
  • I can describe how increasing resolution or colour depth increases file size
  • I can explain how copyright law applies to images, audio, and video found online
Warm up — what do you already know?

These check prior knowledge — it's fine if you're unsure.

1. A music file saved as a WAV has a much larger file size than the same song saved as an MP3. Which statement best explains why?

2. A web developer finds a perfect photograph on Google Images and wants to use it on their website. Which statement is correct?

3. A digital image is 100 × 100 pixels with 8-bit colour depth. A second image is 200 × 200 pixels with 8-bit colour depth. Compared to the first, the second image's file size is approximately:

Key vocabulary

WAV
Waveform Audio File format. Uncompressed audio — large file size, high quality. Used for master recordings and professional audio.
MP3
MPEG Audio Layer 3. Lossy compressed audio — much smaller file size than WAV, with some quality loss. Used for streaming and web audio.
JPEG
Joint Photographic Experts Group. A lossy compressed image format with millions of colours. Best for photographs. No transparency, no animation.
GIF
Graphics Interchange Format. A lossless compressed format limited to 256 colours. Supports simple animation and 1-bit transparency.
PNG
Portable Network Graphics. A lossless compressed format with full colour depth. Supports full alpha transparency. No animation.
lossy compression
Compression that permanently removes some data to reduce file size. The removed data cannot be recovered. Used by MP3 and JPEG.
lossless compression
Compression that reduces file size without losing any data — the original can be reconstructed exactly. Used by GIF and PNG.
sampling rate
How many times per second an audio signal is measured (sampled). Measured in Hz (e.g. 44,100 Hz = CD quality). Higher rate = better quality + larger file.
colour depth
The number of bits used to represent each pixel's colour. More bits = more possible colours = larger file. 8-bit = 256 colours; 24-bit = 16.7 million colours.
resolution
The number of pixels in an image, expressed as width × height (e.g. 1920 × 1080). More pixels = more detail = larger file size.
copyright
The legal right of a creator or other rightsholder to control copying and licensing of an eligible original work. In the UK, protection is automatic — no registration is needed.
Creative Commons
A set of licences that allow creators to give permission for others to use their work under specific conditions (e.g. "free to use with attribution").

File Formats, Compression and Copyright

Why file formats matter for web design

Every image, audio clip, and video on a website is stored as a file in a specific format. Choosing the wrong format can result in poor quality, unnecessarily large file sizes, or missing features (such as transparency or animation). Web designers must understand the properties of common file formats so they can make the right choice for each piece of media.

A key concern for web pages is loading speed. Large files take longer to download, especially on mobile connections. Compression reduces file sizes so pages load faster.

Audio formats: WAV and MP3

WAV (Waveform Audio File format) stores audio without any compression. Every detail of the sound wave is recorded, so WAV files are very high quality. The downside is file size — a 3-minute WAV file can easily be 30–50 MB. WAV is used in professional studios and recording workflows where quality is critical.

MP3 (MPEG Audio Layer 3) uses lossy compression — it removes audio data that most people cannot easily hear (e.g. very high or very low frequencies, or quiet sounds masked by louder ones). This reduces the file to a fraction of its original size — typically 3–5 MB for the same 3-minute track. The quality loss is usually undetectable in everyday listening.

For websites, MP3 is almost always the right choice: smaller files load faster and use less bandwidth. WAV is not typically used on web pages.

Image formats: JPEG, GIF, and PNG

Choosing an image format involves trade-offs between file size, colour range, animation, and transparency.

FeatureJPEGGIFPNG
Compression typeLossyLosslessLossless
Maximum colours16.7 million (24-bit)256 (8-bit)16.7 million+ (24/32-bit)
Animation✕ No✓ Yes✕ No
Transparency✕ No✓ Yes (1-bit only)✓ Yes (full alpha)
Best used forPhotographsSimple animated logos, iconsImages needing transparency (logos, diagrams)

JPEG is best for photographs because it can represent millions of subtle colour variations. Its lossy compression works well on photographs (the quality loss is hard to see) but badly on sharp text or line drawings (blurring and artefacts appear around edges).

GIF is the only standard web format that supports animation. Its 256-colour limit makes it unsuitable for photographs, but it is ideal for simple animated icons, banners, and logos.

PNG offers the best of JPEG (full colour) and GIF (transparency) but without animation. It is the go-to format for logos, diagrams, screenshots, and any image that needs a transparent background. Its lossless compression means quality is never sacrificed.

Factors affecting file size

For both images and audio, three key factors control file size:

  • Resolution (images): the number of pixels = width × height. Doubling both dimensions quadruples the number of pixels. A 200 × 200 image has 4× the pixels of a 100 × 100 image.
  • Colour depth (images): each pixel uses a fixed number of bits to describe its colour. 8-bit = 256 colours (1 byte per pixel); 24-bit = ~16.7 million colours (3 bytes per pixel). Higher colour depth → larger file.
  • Sampling rate (audio): higher sampling rates capture more of the sound wave per second → better quality, but more data → larger file. CD quality is 44,100 samples per second; telephone quality is around 8,000.

File size (uncompressed image) = resolution × colour depth ÷ 8 (to convert bits to bytes). Compression reduces this but adds encoding overhead.

Why compress files for the web?

Web pages must load quickly. A page full of uncompressed 10MB images would take far too long to download, especially on a mobile device. Compression reduces file sizes significantly:

  • Lossy compression (MP3, JPEG) permanently removes data to achieve the greatest size reduction. The original cannot be recovered, but for everyday viewing and listening, the loss is acceptable.
  • Lossless compression (PNG, GIF) reduces file size through clever encoding (e.g. storing repeated patterns once). The original data can be reconstructed exactly — no quality is lost.
Lossless (PNG / GIF) compress then expand ✓ No quality loss Larger file Lossy (JPEG / MP3) compress data lost ✗ Some quality lost Smaller file

Lossless compression keeps every detail; lossy compression discards some data to reduce file size

Copyright, Designs and Patents Act 1988

The Copyright, Designs and Patents Act 1988 is the UK law that protects creators' work. Key provisions for web designers:

  • Copyright protection is automatic for eligible original works. Original text, images, music, video, software, and other qualifying works can be protected without registration or a © symbol.
  • Creators and other rightsholders control copying and licensing. They can decide whether others may copy a work, publish it online, or use it under agreed licence terms.
  • Copying without permission will usually infringe copyright unless a licence or legal exception applies. Finding an image, song, or video online does not by itself give permission to reuse it.
  • The law applies to all media: text, graphics, video, audio, and software.
  • Creative Commons licences allow creators to grant controlled permission. A CC licence might say "free to use with attribution" or "free for non-commercial use". Web designers should look for Creative Commons or royalty-free resources when sourcing media.

Implications for individuals and businesses. Before reusing content, both individuals and businesses should identify who owns it and check that the licence terms cover the planned use — for example, whether commercial use is allowed or attribution is required. Unauthorised use can lead to takedown demands, unexpected licensing costs, civil claims and legal costs, as well as reputational harm. Businesses may face particular disruption if material must be removed from a public website or campaign.

Lawful use is possible where the rightsholder has given permission, a suitable licence covers the intended use, copyright has expired, or a legal exception applies. Sites such as Unsplash, Pixabay, and Pexels offer images under stated licence terms; Free Music Archive and ccMixter provide licensed audio. Always read the specific terms rather than assuming that content labelled "free" can be used in any way.

Worked examples

Example 1 — Choosing between WAV and MP3

Scenario A: A web developer wants to add background music to a website. The audio file must load quickly for visitors.

Scenario B: A recording studio is archiving an original master recording of a band and needs to preserve every detail of the audio.

1
Scenario A → MP3. The site needs the file to load quickly, so small file size matters more than perfect audio quality. MP3's lossy compression reduces file size dramatically with little noticeable quality loss for web listeners.
2
Scenario B → WAV. The studio needs the highest possible quality, with no data removed. WAV is uncompressed, so every detail is preserved. File size is not a concern here because the file is stored locally, not downloaded by web visitors.
Example 2 — Choosing an image format

Given: A web designer is building a wildlife photography site. They need to add: (a) a high-quality photograph of a lion; (b) a simple animated logo with a white background that must appear transparent; (c) the site's own logo (a simple drawing) on a transparent background, not animated.

1
(a) Lion photograph → JPEG. JPEG supports millions of colours and is ideal for photographs with subtle gradations of light and colour. The lossy compression is acceptable for a photo.
2
(b) Animated logo with transparency → GIF. Only GIF supports animation among the three formats. GIF also supports transparency (though only 1-bit). The 256-colour limit is fine for a simple logo.
3
(c) Non-animated logo with transparency → PNG. PNG supports full alpha transparency and full colour, and is lossless. It is the best choice for a logo that needs to sit on different background colours without a visible white box around it.
Example 3 — Copyright in practice

Scenario: A pupil is building a website about their favourite sports team. They search Google Images and find a great photo. They also find a popular song they want to use as background music. Are they allowed to use these without asking?

1
The photograph: Most likely no. An eligible original photograph is automatically protected by copyright. Copying it from Google Images will usually infringe copyright unless the planned use is covered by permission, a licence, or a legal exception.
2
The music: Almost certainly no. Popular music is owned by the artist, record label, and/or other rightsholders. A streaming subscription does not normally license someone to copy a song onto a website; doing so will usually infringe copyright unless a suitable licence or exception applies.
3
What the pupil should do: Check who owns each work and read its licence terms. Use an image or track whose licence covers the intended website use, obtain permission from the rightsholder, or confirm that a legal exception applies.
Now you try

"Describe one difference between JPEG and PNG. In your answer, refer to compression type and transparency."

Compression type: JPEG uses lossy compression, meaning some image data is permanently removed to reduce file size. PNG uses lossless compression, so the full image data is retained and no quality is lost.

Transparency: JPEG does not support transparency — any transparent area appears as a solid white (or coloured) background. PNG supports full alpha transparency, meaning pixels can be partially or fully transparent, allowing the image to be placed over any background without a visible box.

Common mistakes
✕
Saying GIF supports "full" transparency. GIF transparency is 1-bit — each pixel is either fully transparent or fully opaque. It cannot do partial (alpha) transparency, which means edges can look jagged. PNG supports true alpha transparency with smooth edges.
✕
Saying PNG supports animation. PNG does not support animation. GIF is the format that supports animation. (There is a format called APNG — animated PNG — but it is not on the N5 spec and not required for the exam.)
✕
Thinking copyright only applies to paid work or registered material. In the UK, eligible original works receive copyright protection automatically. There is no registration process and no need for a © symbol, but the work must still qualify for copyright protection.
✕
Confusing sampling rate with bit depth. Sampling rate is how many times per second the audio is measured (affects quality and file size). Bit depth (bits per sample) is how precisely each measurement is recorded. Both affect file size, but they are different things.
Exam tip

The SQA frequently asks you to justify a choice of file format. Naming the format may earn an identification mark where one is separately allocated, but cannot also earn the justification mark — use the stated mark allocation.

  • Identification: "JPEG" may earn the format mark where the allocation includes one.
  • Justification: "JPEG uses lossy compression to reduce the photograph's file size without a noticeable loss of quality, helping the page load quickly" earns the separate justification mark.

A copyright question may ask you to explain why an action might infringe copyright. Name the Act (Copyright, Designs and Patents Act 1988), explain that the work is protected, and state that copying will usually infringe unless permission, a suitable licence, or a legal exception applies.

Task Set

Questions 1–5 are auto-checked. Questions 6–10 are self-marked — write your answer, then reveal the model answer to check your work.

1. Which image format supports animation? TYPE 1

2. A web developer wants to use a logo image on a page with a coloured background. The logo has a transparent background. Which format is the best choice if no animation is needed? TYPE 1

3. Under UK copyright law, when does an eligible original work receive copyright protection? TYPE 1

4. Which statement correctly describes the difference between lossy and lossless compression? TYPE 1

5. A digital image is 400 × 300 pixels with a 24-bit colour depth. The colour depth is changed to 8-bit. What effect does this have on file size? TYPE 1

6. Complete the table comparing the three image formats. For each of the 12 cells, write the correct value. (12 marks — 1 per cell) TYPE 2

JPEG | Lossy | No | No | Photographs
GIF | Lossless | Yes | Yes (1-bit only) | Simple animated logos, icons with few colours
PNG | Lossless | No | Yes (full alpha) | Logos, diagrams, images needing transparent backgrounds

7. Explain why web developers need to compress images before uploading them to a website. (2 marks) TYPE 2

Web pages must load quickly — especially on mobile devices with slower connections. Uncompressed images can be very large (several megabytes each), causing pages to load slowly and frustrating users. Compressing images reduces file sizes significantly, so pages load faster without a noticeable reduction in visual quality.

8. A web developer downloads a popular song from a streaming service and uses it as background music on their website. Explain why this is likely to break the law. Name the relevant law in your answer. (2 marks) TYPE 2

The song is likely to be an eligible original work protected by the Copyright, Designs and Patents Act 1988, with rights held by the artist, record label, and/or other rightsholders. A streaming subscription does not normally provide a licence to copy the song onto a website. That use will usually infringe copyright unless permission, a suitable licence, or a legal exception applies. The developer should obtain permission or use music whose licence covers the intended website use.

9. Describe how the sampling rate of an audio file affects both its quality and its file size. (2 marks) TYPE 2

The sampling rate is how many times per second the audio signal is measured. A higher sampling rate means more measurements per second, which captures the audio more accurately and produces better quality sound. However, more samples per second also means more data is stored, so the file size increases. A lower sampling rate produces smaller files but with lower audio quality.

10. A web developer is building a site for a wildlife photographer. Suggest the most appropriate image format for each of the following. Justify each answer. (4 marks) TYPE 2

(a) A detailed photograph of a golden eagle in flight.
(b) A simple animated logo of a running fox, with a transparent background.

(a) JPEG (1 mark) — because the photograph contains millions of colours and subtle gradations of light and shadow. JPEG's lossy compression works well on photographs, reducing file size without a noticeable loss of quality, making the page load faster. (1 mark for justification)

(b) GIF (1 mark) — because GIF is the only standard format that supports both animation and transparency, making it suitable for a simple animated logo that must appear without a background. The 256-colour limit is acceptable for a simple graphic that does not need photographic colour range. (1 mark for justification)
Teacher notes — Shift+T to hide

Suggested timing: 2 hours. Warm up 5 min; vocabulary 10 min; notes + table walkthrough 25 min; worked examples 15 min; now you try 5 min; task set 55 min; review 5 min.

Key teaching point for the format table: Pupils consistently mix up which formats support animation vs transparency. A mnemonic that helps: "GIF Animates, PNG is Perfect transparency, JPEG is Just photos." Write it on the board and have pupils copy it into their notes before doing the table in Q6.

Warm-up Q3 is mathematically demanding: Explain the resolution calculation explicitly — 100×100 = 10,000; 200×200 = 40,000; ratio = 4. Use a visual: draw a 2×2 grid and show how doubling each side multiplies area by 4. This is a common 2-mark SQA question.

Copyright discussion point: Ask pupils why a streaming subscription does not normally give permission to copy a song onto a personal website. This opens a productive discussion about creators' rights, licences, and the limited legal exceptions that may apply.

SQA command words covered: "describe the difference" (Q9, needs contrast not just facts), "explain why" (Q7, Q8 — must say WHY not just WHAT), "suggest and justify" (Q10 — must name format AND give contextual reason).

Extension: Ask pupils to find three royalty-free images from Unsplash or Pixabay on a topic of their choice. For each image, identify: the format it downloads in; whether it would need to be converted for the web; and what licence it is under.