Why should I use sprites on my mobile site?

Question

Why should I use sprites in building the CSS on my mobile site? And how do I implement them while in Tritium?

Answer 1

The Why

Put simply: to save on network requests. One request for a sprite at 10kB is much faster over a network than ten requests for ten 1kB images.

Additionally, that one compressed image sprite is going to yield huge savings over the network. For example, take 13 images, each around 4kB. That's 52kB over 13 network requests. With spriting, it can be brought down to 1 image at 12kB over 1 network request. Huge savings!

You don't have to make your own sprites - Moovweb can automatically generate them for you.

Implementation

Create a folder with the name sprites in the images directory - place all your images in here. (You can have multiple folders within the sprites folder.) Moovweb automatically generates the sprite and creates a stylesheet in the stylesheets/globals directory called _sprites.scss. Don't forget to import this stylesheet in main.scss.

For example, to create a sprite with all the kitten pictures from a site, place all the kitten images in a folder called sprites in the images folder. Moovweb creates a larger sprite image in the images folder. It also creates a stylesheet, _sprites.scss, in the stylesheets/globals folder.

In the stylesheet, Moovweb defines a set of classes, mixins and variables for each image. Their name format is sprites-filename. For example, in our sprite folder example above, the cat.png icon inside the sprites folder would have the class .sprites-cat.

You can use the image in one of three ways:

1. Use @extend or @include under another class/id in your stylesheet to apply the same styles from the image

2. Insert a new element using Tritium with the class of the image: insert("div", class:"sprites-filename")

3. Add a class onto an existing element with Tritium: add_class("sprites-filename")