Combining Images into Sprites

Use the Sprite Generator on the Free Features tab to combine background images in a sprite. This helps to reduce http requests and speeds up the loading of your pages.

HTML images vs background images.  It's important to make the distinction between HTML images and background images because you can only create a sprite with background images. With HTML images, the image url or link is embedded in the HTML using the <img/> tag like this:

<img src="/image.jpg" alt="" />

However, background images are defined in CSS codes that are used to style HTML elements. For example, the following CSS code applies a background image to the span element.

 span.bgimage { 
	background-image: url(//st1-jchoptimize.netdna-ssl.com/image.jpg);
	background-posiition: 0 0;
	background-repeat: no-repeat;
}
					

<span class="bgimage"></span>

If you're using the Sprite Generator and still seeing this error on gtmetrix.com, check the HTML source to determine if the images that are triggering this error are HTML images. You may need to convert them to background images first to have the Sprite Generator combine them in a sprite.

Finally, for background elements to be included in the sprite they must have the following properties:

  • Have the background-repeat: no-repeat CSS property.

  • Have the background-position: left top CSS property or any other equivalent value, for e.g. background-position: 0 0

  • Are less then 50px X 50px in dimension.

When the Sprite Generator is enabled and the image is included in the sprite, the plugin changes the CSS so the sprite image is applied to the HTML element instead of the original individual image. So for example, the previous CSS would now look like:

span.bgimage {
	background-image: url(//st1-jchoptimize.netdna-ssl.com/csg-3ab876d90c00ebc8980f5738dde340f.png); background-position: 0 -80px;
	background-repeat: no-repeat;
}
				

Including and Excluding images in Sprite.  The plugin comes with options to include and exclude images in the generated sprite. However these must be used with caution, especially the option to include. The plugin will, by default, include all background images that satisfy the above criteria for being included in the sprite. However some images may not have the background-position or background-repeat declared but are positioned in their elements in such a way to appear as if these were set. In this case it might be possible to include them using the respective setting. Try including images one at a time, checking each time that they are displayed properly within the sprite.

If a particular image is not displayed properly after being included in the sprite, use the exclude option to exclude them.