Sprite Sheets

Even assuming a constant bandwidth speed, total image size isn't the only factor that determines how fast a website loads its images. It turns out that for each image that the page needs to load, it makes a request to the web server, so loading ten 42KB images individually will be slower than loading the same ten images put together into one larger, ~420KB image. Here's where sprite sheets come into play: by combining several images snugly into one image file and then cutting/masking the compound image into the original small images on the client side, we manage to make less requests to the server, obtaining a lower server load and allowing for faster download speeds.

Popcorn Spritesheet

I made this sprite sheet today for a project I'm working on (hint: it involves a physics engine).

1 thought on “Sprite Sheets

  1. Pingback: Project: EcuaCines | Joaquín Ruales

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.