Why is the page so slow?
You open a shop page on your phone. You wait. And wait. The page is slow.
The reason is often one huge photo. It is 12 MB, and the screen shows it very small.
Developers choose pictures, sounds and videos with care. Today you learn how.
Key words
| Word | What it means | Example |
|---|---|---|
| Asset | A file your software uses, such as a picture, a sound, a video or a code library. | logo.png |
| File type | The format of a file. The ending of its name often shows it. | .jpg, .mp3 |
| File size | How much space a file takes. We count in KB and MB. | 4 MB |
| Compression | Making a file smaller. | |
| Lossy | Compression that removes some detail and you cannot get it back. The file is much smaller. | JPEG, MP3 |
| Lossless | Compression that keeps every detail. You can rebuild the original. | PNG, ZIP |
| Streaming | Playing a sound or video while it downloads, so you do not wait for all of it. | |
| Metadata | Facts about a file, such as who made it, when and what it shows. | date, author, size |
| Bandwidth | How much data a connection can carry each second. | 10 MB per second |
The cells students fill in are left blank in this preview.
Small and large: KB and MB
| Unit | About how big | Example |
|---|---|---|
| 1 KB (kilobyte) | A short text file | A page of plain text |
| 1 MB (megabyte) | 1,000 KB | One web photo, or a minute of music |
| 1 GB (gigabyte) | 1,000 MB | A film, or a game update |
The cells students fill in are left blank in this preview.
Quick check: compression
Have a go
Quick check: compression
3 questionsYour answers are marked here and are not kept. A college account keeps every student’s marks.
Common file types
| Asset | Type | Good for | Watch out |
|---|---|---|---|
| Graphic | JPEG (.jpg) | Photos. Small files, lossy | Blurry edges on text and logos |
| Graphic | PNG (.png) | Logos, icons, clear edges. Lossless | Large files for photos |
| Graphic | SVG (.svg) | Shapes and logos that scale to any size | Not for photos |
| Audio | MP3 (.mp3) | Music. Small, lossy | Some detail is lost |
| Audio | WAV (.wav) | Short sound effects, full quality | Very large files |
| Video | MP4 (.mp4) | Almost every device plays it | Needs careful encoding (see below) |
| Code | JavaScript library (.js) | Ready-made code that adds a feature | Every library adds KB and has rules for how you may use it |
The cells students fill in are left blank in this preview.
Audio and video: stream or not?
A long video is too big to download first. So we stream it. The player shows the start while the rest still arrives.
To encode means to change a recording into a file format and a size that suits the device. You encode a video once, then stream it.
You can also embed a video. This means you put a player on your page that plays a video stored somewhere else, such as YouTube.
Worked example: size and time
| Question | Step | Answer |
|---|---|---|
| 50 photos, 4 MB each. How much space? | 4 MB times 50 = 200 MB | 200 MB |
| A 100 MB file on a connection of 10 MB per second. How long? | 100 MB divided by 10 MB per second | 10 seconds |
| The same file on 5 MB per second? | 100 divided by 5 | 20 seconds |
| Two files, 3 MB and 7 MB. Total? | 3 + 7 | 10 MB |
The cells students fill in are left blank in this preview.
Ask six questions about every asset
data-callouts.important.label
What quality do users need? How much bandwidth do they have? How much storage is there? Which device will show it? Which file type does that device play? Is there metadata to keep, such as the author and who owns it?