Other Cool

Use Spritesheets for faster page load times!

The page load time of a site is one of the things that distinguish a well ran professional website from amateur/failing site. It’s thus also a way for Developers to showcase their experience by creating a fast loading quality site.

One of the ways to instantly improve the site performance beside caching, proper compression of images, and using CDN (content delivery network), is to use reduce the number of http requests made. Even milliseconds matter and they add up, every individual request is a carries a lot of wasted overhead that is needed to establish a request. Among these can be dns lookup, protocols handshake, headers exchange and so on.

Screen Shot 2015-09-16 at 11.04.25 PM

What is a spritesheet?

The Spritesheet is the perfect way to reduce number of requests made for images. The Spritesheet is term borrowed from gaming industry. Where game developer would take all the game graphics into one big picture and then use it by copying and cropping to show only specific parts. Additionally, If timed properly spritesheets can be and are used for animation purposes.

Some Examples of Spritesheets

Early Games’ Examples

This would allow Game Developers not only reduce file size, io operations, but also animate more easily. For example take this image:

I have made jsfiddle that uses this image and iterate over them making it look like an animation.



Work Flow

First Create all assets as normally you would, then once you are done creating and compressing images you can replace all you image tags with divs and set their background image to div. Usually there are task runners that take care of this.

These task runners combine all images into one image file, generate relevant css classes. This process is similar to how javascript files may be merged and minified for production.

You can manually create do all of it, but I won’t advice it at all.

Disadvantages & Alternatives

You can’t use img tag, which could cause conflicts. Alternatively you could also use data uri for image instead of url.

Increased complexity of an app.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s