Creating Assets II — Image Editing & Manipulation
beginner20 minLearning objectives
- Apply image-editing and image-manipulation techniques
- Optimise images for the web, balancing quality against file size
Learn
B2 — Editing and optimising images
Editing and manipulation
Tools like Adobe Express or Photopea/GIMP let you crop to the right dimensions, adjust brightness/contrast, and remove backgrounds — turning a raw source photo into something that actually fits your site's visual style from Lesson 10.
The quality vs. file-size trade-off
A larger, higher-quality image file takes longer to load — and a slow-loading site loses visitors before they see anything. Optimising means finding the point where file size drops significantly with no visible quality loss.
A worked comparison
| Version | File size | Visible difference |
|---|---|---|
| Original photo, straight from camera | 4.8 MB | — |
| Same photo, resized to actual display dimensions | 850 KB | None |
| Same photo, compressed further (e.g. via TinyJPG) | 310 KB | None |
| Same photo, compressed aggressively | 90 KB | Visible blur/artefacts |
The jump from 4.8 MB to 310 KB costs nothing visually — it's wasted load time being removed. Pushing further to 90 KB starts costing real, visible quality.
Task
Take one image you plan to use on your own site. Resize it to its actual display dimensions, then compress it, recording the file size at each stage like the table above. Stop compressing as soon as you can see quality loss — note the file size where that happens.