- Icons, backgrounds, logos.
- Manually creating a sprite image and CSS
- Automated sprite generation using Compass
- Optimizing sprites generated by Compass
- Further steps to reduce image requests
Icons, backgrounds, logos.
Your site most likely has at least a few helpful icons, fancy image backgrounds or partner logos. Chances are that even your site navigation and footer make use of these images.
Each image is requested on its own from the server, causing longer wait times then necessary.
So called “sprites” come to the rescue. A sprite combines several icons (say, icon1.png and icon2.png) into a single sprite.png file. Each icon can afterwards be addressed separately via CSS classes.
The advantage: One request for sprite.png instead of N requests for icon1.png, icon2.png … iconN.png.
In case this is new to you, I recommend you catch up on the basics in this enjoyable post over at CSS-Tricks.
One project of mine has grown over years and aggregated some images mentioned above. Let’s have a look at the requested images for a new visit of its home page:
33 image requests, mostly for small images. There are several groups here:
- Some icons (from silk icon set).
- Browser icons in 24x12 px
- Browser icons in 25x25 px.
- Background gradients repeated on x-axis.
- Partner logos with hover effect.
These images are organized in separate directories already, so the goal is to create one sprite for each directory above for easier maintenance. It would be possible to merge all images into a single sprite, but for a start, I’ll just stick to these five sprites.
Manually creating a sprite image and CSS
I dislike doing tasks by hand which a machine can do faster and more reliably for me. Sprite generation is one of these tasks. However, this project has neither an underlying framework nor other asset management tools to start from. An introduction of such tools is therefore a bit of an effort, so I want to make sure it’s worth it.
So we’ll test the benefit of using sprites instead of single images, taking one group of the above as the test case.
Let’s build a sprite out of it. To do so, open your favorite image editor, create a large enough image and paste in the icons in order:
The required CSS is easy to build as well:
In the page HTML source, the calls have to be changed as well, from
Alright, having these in place, let’s deploy and check what results we get!
The results are promising: Our users have to make 8 requests less, and we even save 3KB of data sent - which is a 30% improvement for those icons.
Great! Now that we have “proven” usefulness, let’s do it again for the other image groups.
But wait - the manual approach has some downsides.
- Maintenance. If a new icon shall be added to this set, it has to be added to both the sprite image and in CSS. While this can be done without much hassle, removing an icon is a real challenge, as all subsequent background positions change on cutting it out of the sprite image.
- Time-consumption for creation. In the icons directory there were not nine but 28 icons, used across the whole project. Copying them into the sprite file manually and creating their appropriate CSS classes would be no fun at all.
Let’s make sprites fun again. Compass in.
Automated sprite generation using Compass
Compass is an asset management tool, probably already known to you if you’ve built (or are building) a Rails app.
It can compile SASS and SCSS stylesheets and do some more magic, and, luckily can automatically generate a sprite image from a directory!
For starters, it will create the above icons sprite for us.
I created a new
assets directory to contain all files for Compass, i.e. the project directory structure related to Compass is as follows:
Directory names can be changed as desired, as they are configurable in Compass’ config file,
.scss files in
project/assets/sass/ are compiled to CSS when running
compass compile (or
compass watch to re-compile on file changes).
One piece missing for automated sprite generation:
screen.scss. Look out, there be dragons:
For the project above, I repeated this step for various sprite-able images. When deploying, these were my results:
Alright, a lot less requests (14 instead of 33), but increased download size (48.5KB instead of 38.6KB).
This is because the newly created sprites contain more images than were originally used on the page - i.e. the icons sprite now contains 21 icons. Users will benefit when visiting subsequent pages containing other icons, as the sprite is already being cached.
However, we can do something about the file size - by running image optimizers on the generated sprites.
If you wondered why I did not sprite some (gif) images - they will be handled in a different step, namely replacing gradient images with CSS3 gradients.
Optimizing sprites generated by Compass
Reducing file size is not directly built-in to Compass, but there are programmatic hooks available to influence sprite generation. In this particular scenario, we want to hook into the process after any sprite image has been generated and run PNG optimization tools on it.
For this step it is required to
- Get PNG optimization tools
- Build optimization tools into Compass compile pipeline
For this step I followed this gist, and therefore use OptiPNG, pngquant and PNGOUT in combination with PngOutBatch. So, to get started, I downloaded all executables (as I’m on Windows for this project, these were
pngout-batch.cmd) and placed them into a freshly created
bin/ directory at my project root:
To hook into sprite generation, the following code is added to the bottom of
config.rb, which is a modified version of the aforementioned gist:
To see the effects without changing any of the sprite images, compilation has to be forced:
The results are impressive! Compressing those sprite PNG images reduces the size of all image requests from 48.5KB to 28.1KB, so we’re back below the starting point (38.6KB).
Further steps to reduce image requests
In the above example, some images were left out from spriting. Those are mainly gradient background images, which will be replaced by CSS 3 gradients in an additional step.
Moreover, introducing a Compass-generated CSS file added a stylesheet request, so another step will be to merge the existing stylesheet into it.
I hope this post helps you with replacing single image requests by sprite images, and to get you started with spriting using Compass.
I’ll be glad to help with any questions!