No.8 Quantity of Information

The Quantity of Information

You may have used the phrase “the file size is too big”, or “the webpage is slow”, but information can be quantified precisely.

(PPT Download)

Exercise 08-1(☆☆☆)
  1. How many bits would be needed to distinguish blood types?
  2. How many trials would be needed to find out one’s blood type with yes/no questions?(for example:”Is the letter ‘A’ included in your blood-type? (yes/no)”-see the HTML below.  Draw an if statements diagram to answer this question.I would be more likely using the structure in the diagram for “Complex Comparisons” in the last chapter
  3. Create ex08-1.js, and write a function that shows a message “Your blood-type is ~” triggered by a click of the button.

  4. Add a function that check the input and then display an alert window “Enter yes or no”, when a word besides “yes” or “no” has been entered.

The Information Quantity in an Image

Information quantity in a bitmap image.. Revisit Exercise 04-0

  • A bitmap image consists of pixels.
  • A pixel in black-and-white photos,  as it is either black or white, holds one bit information (remember a bit can have a value of “1” or “0”). On the other hand, a pixel in colored photos requires the right amount of bits according to its color/information.
  • The information quantity of the entire image can be calculated by multiplying the number of bits in one pixel and the number of pixels.
Exercise 08-2(☆☆)
  1. How many kilo-bytes is a black-and-white photo with a resolution of 640×480?
  2. How many kilo-bytes is a 16-colored photo with a resolution of 640×480?

Text Encoding (Character code)

The process to convert readable letters into data, that can be processed by computers, is called text encoding.  <meta charset="utf-8"> ,that you have seen in the example HTML files throughout the exercises, specifies the text encoding for the HTML document. (FYI the opposite process is called “decoding”).

(PPT Download)

Exercise 08-3(☆)

Open a Japanese webpage (for example http://www.yahoo.co.jp/) with Chrome and change the text encoding from View→Encoding. Change to for example Arabic and observe the outcome. (the video below is for japanese version of Firefox, not Chrome, but it does demonstrate the outcome).Remember the charset="utf-8" that you always have in your html? Having this in your HMTL means you tell the browser/Chrome which encoding you want Chrome to use. Now when you use the text Editor (Atom), you can also specify (when editing the file) which encoding you wish to use (by default it would be utf-8). The exercise below will demonstrate that there are 2 separate things that happens:

  1. Encoding process when the text was created and saved by Atom
  2. Decoding process that is done by Chrome, which will follow the directive written in html (the charset above)
  1. Create encodingtest.html with “Atom”. It should display ありがとう using heading1 tag. For the keyboard to switch from alphabet to Japanese (Hiragana in this case) Hold the Command key while pressing the spacebar until “Hiragana is selected”. Don’t forget to include charset="utf-8" as usual. Save it under
    your public_html/exercise as usual. Access it using your Chrome. Do the following things

    1. Change charset="utf-8" to charset="euc-jp", save the file and reload the page.What do you see? Change it back to “utf-8” and reload the page.
    2. On Atom, change the character encoding to Arabic(ISO 8859-6) (Edit-Select Encoding), save the file and view the file with Chrome.What do you see?
    3. Change charset="iso-8859-6" to charset="utf-8", save the file and reload the browser.What do you see? does the broswer display the same arabic charcter as displayed in Atom now?

if you somehow use Emacs editor (not Atom), it chooses a character encoding automatically when specified in charset, so the Exercise above will always show the proper contents.

Compressing Data

Raw data may have statistical redundancy that can be reduced.  In such a case, data compression algorithm can be performed in order to save memory by shrinking the data size.

(PPT Download)

Exercise 08-4(☆☆)
  1. Decode the following bit stream that has been compressed using 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.

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

Photographs have different colors on every pixel and is difficult to compress it into a smaller size when using a lossless compression – which is the main reason of why JPEG is commonly used.  In contrast, lossless compression is used for illustrations and logos, as the same color is used for a certain area repetitively with a vivid outline.

Exercise 08-6(☆)
  1. Open your photo from your self introduction page using Preview.
  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, high and low, quality files. Can you see the difference?
  5. Compare the file size difference using 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 (save it as 08-7) so that it display the thumbnail image first but when the thumbnail image is clicked it will display the original photo.Tips: you can add an “onclick” event/attribute to an image tag so that the image become clickable. This onclick event would call a function that display the original image

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 image size

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

  • The unit is in pixel.
  • If only one of the width or height attributes is specified, the other will be adjusted automatically to keep the ratio.

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

  • Select the attribute with document.getElementById()
  • Add .setAttribute()
  • The arguments 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. Create 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. Create a button and call the function change() when the button is clicked.(Remember to add the script element to read the JavaScript file)
Exercise 08-9(☆☆☆☆)

Create a textbox, and add a function which changes the width of the image according 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
  • What is a bit?
  • How do we calculate the file size of a bitmap image.
  • What is a character encoding?
  • What is the difference between lossless and lossy compressions?
  • What kind of image is suitable for PNG and JPEG?