Web Design Wikiclass | Tutorial / Website Optimization

Overview: In this tutorial, you will do some exercises about CSS Sprite and web image optimization. You will also learn more about website optimization.

Activity One: CSS Sprite

Go to this site: http://www.websitetemplates.org/ to download the following website template

http://www.websitetemplates.org/free-templates/Facing/templateinfo.html

Study the following online CSS Sprite tools:
Use the CSS Sprite to combine some background images to a single image. You need to modify the CSS afterwards.

(Q1) How many HTTP requests you have saved after using CSS Sprite?

Activity Two: Image Optimization

Explore the Website of Hong Kong International School (URL: www.hkis.edu.hk). Examine how web images are used in the Website.

(Q2) Find one web page there that you think the images are properly formatted and optimized. Explain your reasons.

(Q3) Find one web page there that you can optimize the use of web images. Explain why the use of web image is not optimized and suggest how to optimize it. (Hints: note the file format of the images used in the Website.)

Use this image optimization tool: http://www.smushit.com/ysmush.it/ to further optimize some images used in the Website.

(Q4) How much you can save in your testing of image optimization?

Activity Three

Go to this website: http://www.labnol.org/
Explore the website to see how the images are hosted in the web server.

(Q5) Discuss any advantages of hosting images in a sub-domain.

Activity Four: Compress CSS

Use this tool: CSS Compressor to test compression of CSS.

(Q6) Use this site's CSS as an example, how much you can compress?

(Q7) Give three examples of how the CSS is compressed.

Activity Five

Use the Firefox Add-on Live HTTP headers to study the HTTP response headers when your browser retrieve the following component:

ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js?ver=2.9.2

(Q8) Based on your observation, discuss how the payload size is minimized in the communication between the web server and the browser.

Submission

Please submit your work to Steven by email: sochoy@ouhk.edu.hk.
Please use SXXXXXXX - WD Tutorial 17 Submission as the email subject.