"Leading the way in SharePoint Solutions"

Jason Rivera

SharePoint 2010 and CSS Sprites 

Tags: Developer

SharePoint 2010 makes use of css sprites to display its images.  For those of you who don't know, css sprites are a collection of images in one "large" image.  The idea is to improve performance by avoiding to make many HTTP-requests to retrieve all of your images. 
 
The following is an example from a ribbon control that I worked on recently.  In the button control, you'll see that the image file is specified and so are the coordinates for the desired image.
 
Tip: Open the image in paint and put the cursor near the top left side of the desired image.  You'll see the coordinates in paint's status bar.  The coordinates that you use should be a multiple of 32 (unless the image is 16x16; then you'll want a multiple of 16).
 

<Button

Id="Ribbon.ContactsGroup.SiteRedirect"

Command="HelpTab.SiteRedirectCommand"

Sequence="18"

LabelText=""

Image32by32="/_layouts/1033/images/formatmap32x32.png"

Image32by32Top="-288"

Image32by32Left="-320"

TemplateAlias="SiteRedirectButton"/>

 
 
Here's an example of an image of images:
CSS Sprite
 
Posted by Jason Rivera on 18-Feb-11
7 Comments  |  Trackback Url  |  Link to this post | Bookmark this post with:        
 

Links to this post

Comments

Name:
URL:
Email:
Comments: