The poster that went blurry
Maya makes a poster for a made-up school film club. The photo looks fine on her phone. She prints it on A3 paper and it is blurry, with square blocks.
Then she puts the club logo on the poster and stretches it. It stays sharp. Why does one picture break and the other does not? The answer is how each one is stored.
By the end of this lesson
Note
I can choose a suitable type of picture and file for a job and explain my choice.
Key words
| Word | What it means |
|---|---|
| Pixel | one tiny coloured square in a picture |
| Raster image | a picture made of a grid of pixels |
| Vector image | a picture made of shapes described by numbers |
| Resolution | how many pixels fit in a space |
| Compression | making a file smaller |
| Lossy | compression that throws some detail away for good |
| Lossless | compression that keeps every detail |
The cells students fill in are left blank in this preview.
Starter: what you already know
Have a go
Starter: what you already know
4 questionsYour answers are marked here and are not kept. A college account keeps every student’s marks.
Raster pictures use pixels, vector pictures use shapes
A raster image (also called a bitmap) is a grid of pixels, each one a small square of colour. A photo is raster. Make it bigger and the squares show, so it looks blurry.
A vector image stores shapes, such as a circle and a line, as numbers. The computer draws them again at any size, so they stay sharp. Logos and icons are often vector. A vector image is not good for a photo.
Try it: a vector badge at any size
<h2>Film club badge</h2>
<label for="size">Size of the badge</label>
<input id="size" type="range" min="40" max="300" value="80">
<br>
<svg id="badge" width="80" height="80" viewBox="0 0 100 100" role="img" aria-label="A round blue badge with a yellow star">
<circle cx="50" cy="50" r="46" fill="#1b4f8a"></circle>
<polygon points="50,18 60,42 86,42 65,57 73,82 50,67 27,82 35,57 14,42 40,42" fill="#ffd23f"></polygon>
</svg>
<p>Drag the slider. The edges stay sharp.</p>
<!-- Change the fill colours, then press Run. -->
Check
Have a go
Check
3 questionsYour answers are marked here and are not kept. A college account keeps every student’s marks.