Follow-Ups to HTML


As we near the completion of our CIS89a course in HTML, this opens the door to exploring other aspects of web design. While web development has expanded to cover many different aspects, I will present 2 areas I feel are important to the budding webmaster.
First, is the subject of optimizing images for web use. The internet has become very visual, and effectively finding equilibrium between image size and image quality is of utmost importance.

The second area involves the deploying of Javascript in web pages.
In a nutshell, javascript is used for 3 principal things in a browser1:

  1. To create HTML document dynamically
    2.
  2. To change the contents of HTML documents dynamically
    3.
  3. To have a method to react to events that occur as the result of interactions with our HTML pages
    4.
       (1definition courtesy:
        http://www.cyberjag.com/ben/html/module13/module13.html)

This current page will examine image compression, and a linked page will look at sites that instuct in, or make interesting use of Javascript.




Compression Tables

When including graphics for the web, the trick is to find the balance between file size and acceptable quality.
If an image is too large the web site will load slowly and impatient guests may decide to abort their visit.
On the other hand, too high a compression will degrade the image quality too severely.
To illustrate, below are compression tables of the two most widely used imaging formats, GIFs & JPEGs

 

Part A: GIF Format
   

8-Bit

256 Colors

File Size: 24 KB

7-Bit

128 Colors

File Size: 23 KB

5-Bit

32 Colors

File Size: 16 KB

2-Bit

4 Colors

File Size: 6 KB

The image I recommend is the 5-bit, 32 color file.
The color saturation and vibrancy approximates
that of the original, while realizing a 67% reduction in size.

 

Part B: JPEG Format
   

Maximum Quality

Lowest Compression

File Size: 19 KB

High Quality

Moderate Compression

File Size: 18 KB

Medium Quality

High Compression

File Size: 17 KB

Low Quality

Highest Compression

File Size: 14 KB
The medium quality, high compression image
would prove the most suitable in this case.
Clarity and vibrancy are maintained while
experiencing a modest reduction in file size.
A big drop-off in quality occurs in the "Low Quality"
image, with pixelation and a smudgy appearance



Copyright ©  Rick Shrum for CIS 89a

My Assignments Page

Project-X-Productions ®