YEAR 11 DIGITAL TECHNOLOGY
  • Computer Literacy
    • Basics
    • File Types
    • Compression
  • Animation
    • Adobe Illustrator >
      • Intro to Illustrator
      • Review of Illustrator Techniques
      • Illustrator - The Third
      • Advanced Illustrator
    • Adobe After Effects >
      • Basic Animation
      • Export to Youtube
      • Rigging
      • Animation Project
    • Project Documentation >
      • Purpose, Potential Users, Requirement and Specifications
      • Testing and Refinement
    • AS92005 - Develop a Digital technologies outcome
  • HTML/CSS Basics
    • HTML
    • CSS
    • Classes
  • Programming
    • Learn Basics - Variables and Prompts
    • If Statements
    • For Loops & Basic Arrays
    • While Loops & Functions
    • Robustness
    • Debugging
    • Skills Test
    • Testing and Documentation
    • Programming Assessment
  • HCI
    • AS92006 - HCI Exam
    • Introduction-Describe-Identify
    • Neilson's Heuristics
    • mātāpono Māori
    • Explaining Principles
    • Compare/Improvements
    • Practice Practice Practice
  • Data
    • Learn Excel
    • Learn Excel (Part Deux)
    • Practice Assessment
    • Practice Assessment 2 - police
    • Assessment
  • Freyberg Digital

Compression Coding

When you go to save an image file you will often get a list of options like this:
Picture
The Question remains: Which type should I choose and why?
Activity Think Pair Share.

​What are the different picture file types that you are aware of?

Are you aware of what any of them do?
Picture

Pixels to Bits

We are going to take a look at the first type which is the bitmap.

Here is a picture of Palmerston North
Picture
This is zoomed in on the church
Picture
This is the same picture zoomed in.
Picture
Zoomed in further
Picture
What we notice is that the picture is made up of pixels
Picture
Pixels are small squares of colour.
Picture
We can use the eye dropper tool to select that colour
Picture
We can see that the colour is made up of Red 217, Green 144, Blue 112
Picture
Using www.rapidtables.com/convert/number/decimal-to-binary.html we can see that the Red 217 = ​11011001 in binary

Each Binary value is made up of 1's and 0's

Task: Complete your own picture to bitmap journey on your one note.

Quik Mafs -- Bitmap why does this matter?

Bitmap files (.bmp) are image files

​For each pixel they store the red, green and blue values in binary

Each 1 and 0 is a bit
8 of them is a byte

Task: Think pair share, use your calculators and computers answer the question:

How many bytes/bits are used to store a single pixel? 
Hint RGB


If you had a file that was 1920x1080 resolution, how many bytes would it have to store?

How big would the file be?
Picture

Further Quik Mafs - Storage and Speed

When I was at University, I was pretty flash and I purchased a 128MB USB Drive...

​How many of those images could I store on that USB stick?

My dial up internet speed was 56 Kbit/s 

How long would it take to download an image?

Fibre is now 900Mbit/s

​How long would it take to download the image now?



What are the two reasons we would want smaller image files?
Picture
Math Terms to help
​A Kilobyte (KB) is 1000 bytes
A Megabyte (MB) is 1000 Kilobytes
A Gigabyte (GB) is 1000 Megabytes

Kbits per second is bits not bytes.
56 kbits/s is roughly 7 Kilobytes per second (divide number by 8)
so 900 Mbit/s is roughly



Image Compression

We have two types of image compression that is used to make pictures smaller:
A.) Lossless
​B.) Lossy

Task: Read in quiet the difference between the two.
​Lossless Compression
Consider this logo:
Picture
Do we need to store every single red pixel? Is there a better way to do it?

Run Length Encoding
Run length encoding is used to save on redundant data(data we don't need to store). Instead of storing each red pixel we will store a whole row of red pixels.

This is really good for graphics where we don't have a lot of colours variation

It is terrible for photographs where there are a lot of different colours.

Task: Play with the run length encoder.
1.) Create a picture that would save on data using RLE
2.) Create a picture that would increase the amount of data using RLE


/www.csfieldguide.org.nz/en/interactives/run-length-encoding/

Give that

Lossy Compression

Lossy compression uses some advanced algorithms in order to remove quality of the image. On a webpage such as this you won't notice the difference between the 3 images below.

But open the image in a separate tab and you will.

Task: open the image and zoom in, note the differences.

As we can't notice the difference in quality from a distance we can lose quality in order to make the images smaller.

Take a look at this activity:
https://www.csfieldguide.org.nz/en/interactives/compression-comparer/
Picture
Picture

Which one to use for what?

Final Task: Complete the table for what file type you would use for each situation.
Picture

Powered by Create your own unique website with customizable templates.
  • Computer Literacy
    • Basics
    • File Types
    • Compression
  • Animation
    • Adobe Illustrator >
      • Intro to Illustrator
      • Review of Illustrator Techniques
      • Illustrator - The Third
      • Advanced Illustrator
    • Adobe After Effects >
      • Basic Animation
      • Export to Youtube
      • Rigging
      • Animation Project
    • Project Documentation >
      • Purpose, Potential Users, Requirement and Specifications
      • Testing and Refinement
    • AS92005 - Develop a Digital technologies outcome
  • HTML/CSS Basics
    • HTML
    • CSS
    • Classes
  • Programming
    • Learn Basics - Variables and Prompts
    • If Statements
    • For Loops & Basic Arrays
    • While Loops & Functions
    • Robustness
    • Debugging
    • Skills Test
    • Testing and Documentation
    • Programming Assessment
  • HCI
    • AS92006 - HCI Exam
    • Introduction-Describe-Identify
    • Neilson's Heuristics
    • mātāpono Māori
    • Explaining Principles
    • Compare/Improvements
    • Practice Practice Practice
  • Data
    • Learn Excel
    • Learn Excel (Part Deux)
    • Practice Assessment
    • Practice Assessment 2 - police
    • Assessment
  • Freyberg Digital