CSS Image Sprites

• Feb 09, 2022
• 5 minutes to read

A CSS image sprite replaces a web control’s individual images with one composite image – a sprite image – which is a collection of multiple images. An image sprite improves application performance by reducing the number of HTTP requests required to obtain images, because a single request to the sprite image loads all images contained within it. HTML elements reference a sprite image with the ‘background-image‘ attribute. Use the ‘width‘, ‘height‘ and ‘background-position‘ attributes to specify the size and offset of an element’s sprite.

See the following article for details on CSS sprites: CSS Sprites: What They Are, Why They Are Cool and How To Use Them

Default Implementation of CSS Sprites in DevExpress Themes

All built-in DevExpress ASP.NET Themes utilize CSS image sprites. Each theme includes sprite.png file with composite images. Individual image settings are stored within sprite.css files.

The following table illustrates image settings for the Aqua Theme. It displays the file structure, the content of the ‘sprite.png’ file and the content of the sprite.css file (truncated for demonstration purposes).

File Structure

Note that not all images are combined in a sprite image. Animation (such as ‘Loading.gif’) and repeated background images are stored as standalone files.

File ‘sprite.png’

File ‘sprite.css’

CSS

/* truncated */
.dxGridView_gvDragAndDropArrowDown_Aqua,
.dxGridView_gvDragAndDropArrowUp_Aqua,
/* ... */
.dxGridView_gvHeaderFilter_Aqua,
/* ... */
{
    background-image: url('<%=WebResource("DevExpress.Web.ASPxThemes.App_Themes.Aqua.GridView.sprite.png")%');
    background-repeat: no-repeat;
    background-color: transparent;
}
/* ... */
.dxGridView_gvDragAndDropArrowDown_Aqua {
    background-position: 0px 0px;
    width: 11px;
    height: 9px;
}
.dxGridView_gvDragAndDropArrowUp_Aqua {
    background-position: 0px -17px;
    width: 11px;
    height: 9px;
}
/* ... */
.dxGridView_gvHeaderFilter_Aqua {
    background-position: 0px -36px;
    width: 19px;
    height: 19px;
}
/* truncated */

Default sprite images and sprite CSS files are stored as resources within the ASPxThemes Assembly. This implementation provides optimal application performance, because CSS image sprites reduce the number of requests for images, and resource file compression (such as scripts and CSS files) minimizes traffic.

Custom CSS Sprites

If you use custom images for DevExpress web component elements in your web application, you should manually combine these images into a sprite image to benefit from the CSS sprites technique. Based on the application’s logic, you can combine images into a single (application specific) sprite image or multiple (component specific or component group specific) sprite images.

Use one of the following approaches to set the required sprite image (and individual images contained within it) for a DevExpress MVC extension.

Use a Component’s Properties to Set a Sprite Image

Use the following properties to attach a sprite image to a component to display its images within component elements:

• SpriteImageUrl
  Specifies the path to a sprite image.
  Accessed in view code as: settings.Images.SpriteImageUrl

• Height
  Specifies an individual element’s image height.
  Accessed in view code as: settings.Images.[ImageType].Height

• Width
  Specifies an individual element’s image width.
  Accessed in view code as: settings.Images.[ImageType].Width

• Top
  Specifies the vertical offset within a sprite for an individual element’s image.
  Accessed in view code as: settings.Images.[ImageType].SpriteProperties.Top

• Left
  Specifies the horizontal offset within a sprite for an individual element’s image.
  Accessed in view code as: settings.Images.[ImageType].SpriteProperties.Left

The following image shows a custom sprite for the NavBar’s Collapse and Expand images:

Razor - C#

@Html.DevExpress().NavBar(settings => {
    settings.Name = "myNavBar";
    //...
    settings.Images.SpriteImageUrl = "Images/nb-custom-sprite.png";

    settings.Images.Expand.SpriteProperties.Left = 3;
    settings.Images.Expand.SpriteProperties.Top = 3;
    settings.Images.Expand.Height = 12;
    settings.Images.Expand.Width = 11;

    settings.Images.Collapse.SpriteProperties.Left = 18;
    settings.Images.Expand.SpriteProperties.Top = 3;
    settings.Images.Expand.Height = 12;
    settings.Images.Expand.Width = 11;
}).GetHtml()

When you use these properties to define a sprite and its associated images, an additional markup is added to the page. The code below illustrates HTML markup generated for a NavBar’s collapse image.

HTML

<img class="dxWeb_nbCollapse" 
     style="background: transparent url(Images/mySprite.png) no-repeat scroll -18px -3px; 
         border-width: 0px; height: 12px; width: 11px; -moz-background-clip: -moz-initial; 
         -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;" 
     alt="" src="/Projects/ImageSprites_Test1/DXR.axd?r=1_16"/>

Note

Note that individual image settings are rendered as inline CSS styles embedded in an image’s HTML tag. If too many images are defined in this manner, application performance may be affected due to an increase in page size.

Use Named CSS Classes to Set a Sprite Image

To define individual image settings, you can use the ImageSpriteProperties.CssClass property to specify a CSS class. A typical path to this property from the extension settings level:
Images.[ImageType].SpriteProperties.CssClass

Tip

See the descendants list in the ImagesBase class topic to know which web components can contain the Images property.

A CSS class can be declared within page markup or in a linked CSS file. For a linked CSS file, use the SpriteCssFilePath property to specify the file path:
Images.SpriteCssFilePath

A CSS class should contain attributes that specify the size (width and height, in pixels) and position (horizontal and vertical offsets represented by negative values) of each image within a sprite. This approach is recommended if you use CSS rules to reference a sprite image.

Razor - C#

@Html.DevExpress().NavBar(settings => {
    settings.Name = "myNavBar";
    //...
    //settings.Images.SpriteCssFilePath = "mySpriteCssFile.css";
    settings.Images.Collapse.SpriteProperties.CssClass = "imgCollapse";
    settings.Images.Expand.SpriteProperties.CssClass = "imgExpand";
}).GetHtml()

CSS

    <style type="text/css">
        .imgExpand,
        .imgCollapse {
            background-image: url('Images/nb-custom-sprite.png');
            background-repeat: no-repeat;
            background-color: transparent;
        }
        .imgExpand {
            background-position: -3px -3px;
            width: 11px;
            height: 12px;
        }
        .imgCollapse {
            background-position: -18px -3px;
            width: 11px;
            height: 12px;
        }
    </style>

Sample HTML markup for the NavBar’s collapse image (defined by a named CSS class) is as follows.

HTML

<img class="imgCollapse" style="border-width: 0px;" alt="" src="/Projects/ImageSprites_Test1/DXR.axd?r=1_16"/>

Run Demo: ASP.NET MVC Button - Features