HighPerformanceWebSites

Info iconThis preview shows page 1. Sign up to view the full content.

View Full Document Right Arrow Icon
This is the end of the preview. Sign up to access the rest of the document.

Unformatted text preview: browsers download only two resources at a Ome from a given hostname, as suggested in the HTTP/1.1 specificaOon –  However, some browsers open more than two connecOons per hostname •  To reduce the number of HTTP requests –  Combine scripts –  Combine style sheets –  Combine images into an image map <img usemap=“map1” border=0 src=“/images/imagemap.gif”> <map name=“map1”> <area shape=“rect” coords=“0,0,31,31” href=“home.html” title=“Home”> ... </map> –  Combine images using “sprites” (see next slide) •  Drawbacks –  Images must be conOguous –  Defining area coordinates is error prone Copyright 2009 - 2013 Horowitz 12 CSS Sprites •  An image sprite is a collecOon of images put into a single image •  Using images sprites reduces the number of server requests and saves bandwidth •  Consider img_navsprites.gif which includes 3 separate images The code <!DOCTYPE html> <html><head><style> img.home { width:46px; height:44px; background:url(img_navsprites.gif) img.next { width:43px ; height:44px; background:url(img_navsprites.gif) </style></head> <body> <img class="home" src="img_trans.gif" width="1" <br><br> <img class="next" src="img_trans.gif" width="1" </body></html> •  •  0 0; } -91px 0; } height="1" /> height="1" /> width:46px;height:44px; - Defines the porOon of the image we want to use background:url(img_navsprites.gif) 0 0; - Defines the background image and its posiOon (leo 0px, top 0px) Copyright 2009 - 2013 Horowitz 13 Rule 2: Use a CDN...
View Full Document

This note was uploaded on 01/29/2014 for the course CSCI 571 taught by Professor Papa during the Spring '07 term at USC.

Ask a homework question - tutors are online