Chapter 3 · Watch, then practise
Images and Graphics
Compare pixel-based images with geometric graphics, and calculate raw image storage. Use color channels and transparency to explain what each stored pixel describes.
3 questions · 3 with related videos. Matches are based on playlist titles; broader background matches are labeled.
What to study
- Raster and vector representations
- RGB storage
- Alpha transparency
Chapter playlists
Choose a playlist
Notes
Raster Bitmap vs Vector Graphics
Cary Hawkins · 7:39
Direct comparison of raster and vector graphics.
1. Choose a representation
Why might a line diagram use SVG while a photograph uses a raster image?
SVG can describe shapes, paths and text geometrically, so a line diagram can be scaled and edited by its objects. A photograph is naturally represented by sampled pixel values. SVG can also embed raster images; the formats are not mutually exclusive in a document.
Calculating File Size: Images
Eddie Woo · 7:06
Supplementary image-file-size lesson; the RGB dimensions here are worked in the answer.
2. Raw image calculation
How much storage does an uncompressed 800 × 600 RGB image need at 8 bits per channel, without padding or metadata?
There are 480,000 pixels and 3 bytes per pixel. Storage is 1,440,000 bytes, or 1.44 MB in decimal units. Adding an 8-bit alpha value per pixel raises this to 1,920,000 bytes. A compressed file may differ substantially.
Gimp Lesson 10 | Using Transparency and Alpha Channel
TJ FREE · 8:46
Supplementary demonstration of transparency and alpha channels in GIMP; the precise PNG byte values are explained in the answer.
3. Interpret alpha
In an 8-bit PNG alpha channel, what do values 0, 128 and 255 represent?
Zero is fully transparent and 255 is fully opaque. A value of 128 is approximately half opacity and is composited with the background. Alpha controls coverage or opacity; it is not another red, green or blue color component.