← 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 to control how their work is used and copied. In the UK, copyright applies automatically when a work is created — no registration 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 is automatic. The moment a text, image, video, or audio is created, it is protected. The creator does not need to register it or put a © symbol on it.
  • Using someone else's work without permission is illegal. Copying an image from Google Images, downloading a song to use as background music, or embedding a YouTube video without permission can all break this law.
  • 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.

Free and legal sources of images include sites like Unsplash, Pixabay, and Pexels — these offer images under licences that allow free use. For audio, Free Music Archive and ccMixter provide Creative Commons tracks.

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. Photographs found on Google Images belong to their creators and are automatically protected by copyright. Using the photo without permission breaks the Copyright, Designs and Patents Act 1988.
2
The music: Almost certainly no. Popular music is owned by the artist, their record label, and other rights holders. Using it as background music on a website — even a non-commercial one — without a licence is copyright infringement.
3
What the pupil should do: For images, use a site like Unsplash or Pixabay that offers free-to-use photos under Creative Commons or similar licences. For music, look for tracks on the Free Music Archive or similar sites that are explicitly licensed for free use.
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. Copyright is automatic in the UK from the moment a work is created. There is no registration process and no need for a © symbol — the protection exists regardless.
✕
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. A justification must say which format AND give a reason linked to the scenario. One-word answers do not get full marks:

  • ❌ "JPEG" — no justification, 0 marks
  • ❌ "JPEG because it is good for photos" — vague, may get 1 mark
  • ✓ "JPEG because it uses lossy compression which reduces the file size of the photograph without a noticeable loss of quality, allowing the page to load quickly" — full marks

The copyright question usually asks you to explain why an action might be illegal. Name the Act (Copyright, Designs and Patents Act 1988), describe what it protects, and say what the developer should do instead.

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. The Copyright, Designs and Patents Act 1988 states that copyright protection begins: 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 cell, write the correct value. (6 marks) 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 protected by the Copyright, Designs and Patents Act 1988. Copyright belongs to the artist and/or their record label from the moment the song was created. Using the music on a website without obtaining a licence or permission from the copyright holder is illegal, even if the website is not commercial. The developer should use music with a Creative Commons licence or obtain explicit permission.

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 whether they think it should be illegal to use a song from Spotify on a personal website. This opens a productive discussion about why creators need protection and how Creative Commons solves the tension between sharing and protection.

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.