Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Development Tools Introduction to Front End Performance Optimization Optimize Assets HTTP Requests

rajbee
rajbee
6,657 Points
Posted by rajbee
rajbee
6,657 Points

optimizing image loading with sprites

Why is the http request-response time of one big sprite not equal to the sum of that of each of its constituent images ? I.E, why is it better to use a sprite instead of individual images ?

1 Answer

Luke Pettway
Luke Pettway
16,593 Points

It isn't so much the image size that makes sprites better but rather the number of requests. Each time a browser has to download a file, it has to open a new connection, and browsers only have a limited number of parallel requests they can make total. This means that important files might need to wait until images have finished downloading.

So by cutting down the number of requests you have, you get performance gain by decreasing the amount of files you have to download.

Also as a side note, each time the browser makes a request it actually has to go through multiple steps just to grab the file, so even though it should know the file exists in site.com/images it still has to go through each step to finalize the request and ultimately get the file.