No.8 Quantity of Information

The Quantity of Information

You may use the phrase “the file size is big”, or “the webpage is slow”, but the size of information can be measured in actual values.

(PPT Download)

Exercise 08-1(☆☆☆)
  1. How many bits would be needed to distinguish blood types?
  2. How many numbers of trials would be needed to find the blood type of a person with yes/no questions?  Draw a diagram of if statements and combine it so you can find out the blood type of a person.
  3. Make ex08-1.js, and add function that when the button is clicked, the message “Your blood-type is ~” shows up.
  4. Add a function that show the message “Enter yes or no”, when a word besides yes or no is entered.

The Information Quantity in an Image

Let’s think about the information quantity in a bitmap image.

  • A bitmap image is made up of pixels.
  • In a black and white photo, every pixel is either black or white, so you can say it has the information of one bit.  In a colored photo, the information for color is needed for each pixel.
  • The information quantity of the entire photo is the number of bits for each pixel multiplied by the number of pixels.
Exercise 08-2(☆☆)
  1. How many kilo-bytes is a black and white photo with the size of 640×480?
  2. How many kilo-bytes is a 16-colored photo with the size of 640×480?

Text Encoding (Character code)

Converting letters that humans can read to data that can be processed by computers is called text encoding.  The  <meta charset="utf-8"> part of HTML we have been working with is a command specifying the text encoding.

(PPT Download)

Exercise 08-3(☆)

This exercise is meaningful only if you use Japanese (or other non-English) text.

  1. Open a webpage with Firefox and change the text encoding from View→Character Encoding
  2. Edit introduction.html with mi and try the following
    1. Change the character encoding to EUC-JP on the toolbar, save the file and view the file with Firefox.
    2. Change charset="utf-8" to charset="euc-jp", save the file and reload the page.
    3. Return the character code with mi to UTF-8, save the file and reload the page.
    4. Return charset="euc-jp" to charset="utf-8", save the file and reload the browser.

Emacs chooses a character encoding automatically when specified in charset, so the Exercise above will always show the proper content.

Compressing Data

Raw data may have statistical redundancy that can be reduced.  In such a case, the data can be compressed by saving the data in a different shape, to save space.

(PPT Download)

Exercise 08-4(☆☆)
  1. Decode the following bit stream that has been compressed by Run-length encoding.
    • The length of each run (successive 0’s or 1’s) is 3 bits.
    • Start with the length of 0’s.
    • 000 represents that the same number is repeated many times.  For example, when 0 is repeated nine times, because 9 can’t be written with 3 bits, we must think of it as seven 0’s, zero 1’s, and two 0’s(111 000 010).
    111 000 110 001 111 000 001 001 101 111 100 011 101 001 011 001 011 001 101 001 001 001 111 001 111 000 010
  2. Make a grid of 9×9, fill in white for bits with 0 and black for bits with 1.  What shape came up?

In this exercise, the original data and compressed data are the same size.  Depending on the case, there may be times when the compressed data is larger than the original.

Exercise 08-5(☆☆☆☆☆)

Look at the Reference below and compress the following data with Huffman coding.

Tokyo Chiba Ibaraki Tokyo Kanagawa Gunma Tokyo Kanagawa Kanagawa Chiba Tokyo Chiba Saitama Tokyo Kanagawa Saitama Tokyo Tokyo Saitama Kanagawa Chiba Ibaraki Kanagawa Tokyo

Image Files

File Type

Image files have several formats that differ in number of colors, compression, etc.  The following formats are usually used on webpages.

Lossless compression. 8bit coloring(256colors).  Can be used for animation, by using multiple photos.
Lossless compression.  48bit coloring(281,474,976,710,656 colors)
Lossly compression.The compression rate can be changed.  24bit coloring(16,777,216colors).

Photographs have different colors for every pixel, and is difficult to compress it to a small size when using a lossless compression, so JPEG is usually used.  In contrast, lossless compression is used for images such as illustration and logos, because the same color is used for a certain area and the outline is clear.

Exercise 08-6(☆)
  1. Open the preview of your photo from your self introduction page.
  2. Click File→Save as…
  3. Select the lowest quality for JPEG and write it out as a different file.
  4. Open the preview of both the high and low quality files. Can you see the difference?
  5. Compare the difference of file size with Finder.

Size of Images

The size of an image sometimes means the file size, but usually the number of pixels. Actual size of the image (how many centimeters) cannot be determined because it depends on display devices.

As we learned above, the information quantity gets smaller as the number of pixels decrease.  If the compressed image file is still large, you can reduce the number of pixels (using coarse sampling) to get a smaller file.

When making a webpage with many image files, thumbnails are often used instead of original files, and the original is displayed when the thumbnail is clicked(to make the process faster).

Exercise 08-7(☆☆)
  1. Make a copy of your photo, and open the preview.
  2. Choose Tools→Adjust Size…
  3. Change the width and height, and confirm the file size.
  4. Edit the photo so the size is appropriate for a thumbnail.
  5. Edit Exercise 06-9 and display the thumbnail and original photo.

You can add a onclick attribute instead of the button to improve the design.(Although users may not notice there is a function…)

Specifying the size of the Image

In the img element, the size of the photo can be specified with the width and height attributes.

  • The unit is pixels.
  • If only one of the width or height attributes is specified, the other will be adjusted to match the other.

The setAttribute() can be used to change the size by scale.

  • Select the attribute withdocument.getElementById()
  • Add .setAttribute()
  • The arguements are the attribute name and the value you want to change.
Exercise 08-8(☆☆☆)
  1. Make a copy of your photo and name it picture.jpg.
  2. Make ex08-8.html and fill in the following.
  3. Change width="600" to width="400" and reload the browser.
  4. Make ex08-8.js and fill in the following.
  5. Make a button and call out change() when the button is clicked.(Remember to add the script element to read the JavaScript file)
Exercise 08-9(☆☆☆☆)

Make a textbox, and add a function which changes the width of the image to the number entered in the textbox.

The width and height attributes change the method of displaying a photo, but the original file size doesn’t change, so the time taken to display the webpage won’t change.

Points to Check
  • But is a bit?
  • How do we calculate the file size of a bitmap image.
  • What is character encoding?
  • What is the difference of lossless and lossly compressions?
  • What kind of image file is PNG and JPEG suited to compress?