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.
- How many bits would be needed to distinguish blood types?
- 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.
ex08-1.js, and add function that when the button is clicked, the message “Your blood-type is ～” shows up.
XHTML1234567891011121314<!DOCTYPE html><html><head><meta charset="utf-8"><title>Exercise 08-1</title><script src="ex08-1.js"></script></head><body><h1>Finding the blood-type</h1><p>Is the letter 'A' included in your blood-type? (yes/no) <input type="text" id="a"></p><p>Is the letter 'B' included in your blood-type? (yes/no) <input type="text" id="b"></p><p><input type="button" value="Guess!" onclick="bloodtype();"></p></body></html>
- 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.
- How many kilo-bytes is a black and white photo with the size of 640×480?
- 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.
This exercise is meaningful only if you use Japanese (or other non-English) text.
- Open a webpage with Firefox and change the text encoding from View→Character Encoding
introduction.htmlwith mi and try the following
- Change the character encoding to EUC-JP on the toolbar, save the file and view the file with Firefox.
charset="euc-jp",save the file and reload the page.
- Return the character code with mi to UTF-8, save the file and reload the page.
charset="utf-8",save the file and reload the browser.
harset,so the Exercise above will always show the proper content.
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.
- 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).
- 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.
Look at the Reference below and compress the following data with Huffman coding.
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.
- Open the preview of your photo from your self introduction page.
- Click File→Save as…
- Select the lowest quality for JPEG and write it out as a different file.
- Open the preview of both the high and low quality files. Can you see the difference?
- 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).
- Make a copy of your photo, and open the preview.
- Choose Tools→Adjust Size…
- Change the width and height, and confirm the file size.
- Edit the photo so the size is appropriate for a thumbnail.
- Edit Exercise 06-9 and display the thumbnail and original photo.
Specifying the size of the Image
img element, the size of the photo can be specified with the
- The unit is pixels.
- If only one of the
heightattributes is specified, the other will be adjusted to match the other.
setAttribute() can be used to change the size by scale.
- Select the attribute with
- The arguements are the attribute name and the value you want to change.
- Make a copy of your photo and name it
ex08-8.htmland fill in the following.
XHTML123456789101112<html><head><meta charset="utf-8"><title>Exercise 08-8</title></head><body><img src="picture.jpg" id="pic" alt="" width="600"></body></html>
width="400"and reload the browser.
ex08-8.jsand fill in the following.
- Make a button and call out
Make a textbox, and add a function which changes the width of the image to the number entered in the textbox.
- 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?