Skip to content

Can I make changes to my CSS classes to optimize RequestReduce spriting?

Jump to bottom
mwrock edited this page Jan 16, 2012 · 7 revisions

Absolutely. By making some simple changes to your css, you can significantly improve RequestReduce's ability to locate and sprite background images. Finding the background images is simple but RequestReduce will only sprite them if it is confident that doing so will not corrupt the rendering of the site.

##Ways to help RequestReduce create the most optimal sprite files

  • Most important: RequestReduce needs to know the horizontal size of the background viewport. To specify this, provide a width to the same class where your background image is declared. RequestReduce considers the sum of width, left padding and right padding to be the horizontal viewport dimension of the class.
  • The image must not be a repeating image, make sure it is marked no-repeat.
  • Create classes that contain only the image so that the width is the same width as the image. If the container of the sprite is wider than the image, RequestReduce will pad the image with transparent space. While this may not bloat the image file itself, it will bloat the memory footprint that the browser occupies on the user's computer.
  • Try to limit the background images in your css to just the images required for the page they are on.

##What images will RequestReduce NOT sprite RequestReduce finds a background images by looking for any selector containing a background property with an image, a background-image property or a background-position property. When it locates one of these selectors, it then scans the css for any class that could impact this class and also contains one of thes background properties. For example, consider this css:

.icons-games.barbie-princess {
    background-position: -120px 0px;
}

.icons-games {
    background-image: url('myimage.png');
    width: 20px;
    background-repeat: no-repeat;
}

RequestReduce identifies the .icons-games.barbie-princess selector and notes its position. It then finds the .icons-games selector and because it can be inherited from .icons-games.barbie-princess, RequestReduce will consider the background-image, repeat and width as applicable to the background-position of .icons-games.barbie-princess and uses all of these properties as it generates its sprites.

Currently, RequestReduce will not sprite:

  • Repeating images. Only images marked no-repeat will be sprited.
  • Images in a class with no specified width. RequestReduce creates horizontal sprites so it can do without height unless your image has already been sprited vertically (see below).
  • Background Y position less than 0 and no explicit Height defined. RequestReduce assumes this is a previously vertically sprited image and will use the height to "clip" the image from this sprite into its new sprite file.

##Why does RequestReduce need to know the horizontal view port size? To illustrate why RequestReduce needs this optimization, RequestReduce may find a class like this one:

.BrandLogo {
    background-image: url('logo.png');
    height: 34px;
    margin-top: 0px;
    margin-bottom: 0px;
    color: white;
}

Assume that the logo.pnd image is 80 pixels wide. RequestReduce can easily determine that. So one may think that it should be added to the sprite and then when RequestReduce finds the next image 'hairy_armpit.gif', it will place it beside the logo and give hairy_armpit.gif a horizontal position of -80px. But .BrandLogo is inside a parent div with a width of 340px. So when the sprite of logo.png is rendered, the user has the unfortunate experience of seeing the hairy_armpit.gif image right next toit because the "view port" is 340px wide. Because RequesReduce cannot be sure of the view port size of .BranLogo, it will not attempt to sprite it. This could be fixed by adding a width property with a value of 80x to .BrandLogo. That way RequestReduce would know that the view port is 80 pixels and could create the sprite in such a way to guarantee that the adjacent sprite will not bleed into the logo.

Clone this wiki locally