A student’s first Web site – good news and bad news

Skills: resize and compress images

IT concepts: pixel, image processing operation, compression

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 License.

A student’s first Web site – good news and bad news in context

• Internet concepts– Applications– Technology– Implications for

• Individuals• Organizations• Society

• Internet skills– Application development (Web)– Content creation

• Text• Image (compression and resizing)• Audio• Video

The Web site

http://bpastudio.csudh.edu/fac/lpress/netapps/image/compressdemo/ItsAGirlThingMain.htm

Click on tutus

Site files – jpeg images and HTML pages

Good news

• The Web site uses everything we have used so far– Uses many of the tags we have learned– Combines images and text– Has links to images and pages in the same

directory

Bad news

• The images were resized in the browser

• The images were uncompressed

The image is 696 k bytes and scaled to 200 by 300 pixels

The other images – on the home page and sub pages – have the same problems as this one. We will use it as an example.

Prefixes for large quantities

Prefix Exact Close enough Name

Kilo 1,024 1,000 Thousand

Mega 1,024^2 1,000,000 Million

Giga 1,024^3 1,000,000,000 Billion

Tera 1,024^4 1,000,000,000,000 Trillion

Peta 1,024^5 1,000,000,000,000,000 Quadrillion

After these prefixes come exa, zetta and yotta. The pattern continues -- each is 1,024 times the previous one.

He resized the image in the browser

• Distorted the image• Wasted bandwidth• Don’t do it

<img src="Jenna_tutuskirt_wand.jpg" width=200 height=300>

Resizing before uploading reduced the file size from 696 to 51 Kbytes

The original image (left) is distorted

200 by 300 pixels178 by 300 pixels

Aspect ratio 2200/1304 = 1.69 to 1

Aspect ratio 300/200 = 1.5 to 1

Further saving through compression

51 Kbytes 17 Kbytes 10 Kbytes

Image processing tips

• Do not use the height and width attributes of the img tag to resize images – resize using your image processing program.

• Work with the high resolution image until it is ready to upload, then compress it.

• This goes for any data type – capture a lot of information and compress after processing. Compression is the last step.

Are we beating this student up?

No way – he experimented and played around with image processing and HTML.