1. 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.

2. 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

3. The Web site http://bpastudio.csudh.edu/fac/lpress/netapps/image/compressdemo/ItsAGirlThingMain.htm

5. Click on tutus

6. Site files – jpeg images and HTML pages

7. 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

8. Bad news The images were resized in the browser The images were uncompressed

9. 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.

11. Prefixes for large quantities PrefixExactClose enoughName Kilo1,0241,000Thousand Mega1,024^21,000,000Million Giga1,024^31,000,000,000Billion Tera1,024^41,000,000,000,000Trillion Peta1,024^51,000,000,000,000,000Quadrillion After these prefixes come exa, zetta and yotta. The pattern continues -- each is 1,024 times the previous one.

12. He resized the image in the browser Distorted the image Wasted bandwidth Don’t do it

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

14. 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

15. Further saving through compression 51 Kbytes17 Kbytes10 Kbytes

16. 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.

17. Are we beating this student up? No way – he experimented and played around with image processing and HTML.