Transcript Document
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-NoncommercialShare 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 Kilo Mega Giga Tera Peta Exact 1,024 1,024^2 1,024^3 1,024^4 1,024^5 Close enough 1,000 1,000,000 1,000,000,000 1,000,000,000,000 1,000,000,000,000,000 Name Thousand Million Billion Trillion 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 <img src="Jenna_tutuskirt_wand.jpg" width=200 height=300> • Distorted the image • Wasted bandwidth • Don’t do it Resizing before uploading reduced the file size from 696 to 51 Kbytes The original image (left) is distorted Aspect ratio 2200/1304 = 1.69 to 1 178 by 300 pixels Aspect ratio 300/200 = 1.5 to 1 200 by 300 pixels 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.