Web technology continues to evolve in its quest to provide efficient ways to improve web pages’ load speed and user experience. One such ingenious method is the use of CSS Sprites. CSS Sprites amalgamate numerous images into one single image known as a sprite sheet. This guide aims to quantify using CSS sprites in SharePoint as a means to expedite page load speeds drastically and uplift the overall user experience.
Step 1: Creating a Sprite Image
Use any graphic software to create a sprite image. Each sprite within the image should be aligned correctly and have adequate space between them to prevent overlap. Note the coordinates of each sprite within the image, required to specify in the CSS later.
The sprite image should contain all icons used on your SharePoint site. Having all the icons in a single image reduces the number of HTTP requests and speeds up the page.
Step 2: Uploading the Sprite Image to SharePoint
Login to your SharePoint site. Under the ‘Site Assets’ library, upload your sprite image. After it’s uploaded, click on the image, and SharePoint will direct you to the image’s property page. Copy the URL – you’ll need this to link your CSS to the sprite image.
Step 3: Preparing the CSS
Prepare the CSS for each icon in the sprite image. Use the ‘background’ property to link to the sprite image and ‘background-position’ to specify the coordinates of each icon. Below is an example of a CSS for an icon housed within a sprite:
.icon-home {
background: url(/SiteAssets/sprite.png) no-repeat 0 0;
width: 32px;
height: 32px;
background-position: -10px -20px;
}“background:” calls the sprite sheet. “background-position:” positions the icon using the coordinates noted in Step 1. “Width” and “height” refer to the dimensions of the icon.
Step 4: Applying CSS Sprites in SharePoint
In SharePoint, open the page where you want to apply the icon. Go to the page settings and click on “Edit Page,” located in the upper-right corner. On the ribbon, you’ll find an “Insert” tab – click on it, then the “Embed Code” button.
Insert the HTML code below into the HTML Field:
<i class="icon-home"></i>Copy the CSS code you prepared earlier, insert it into an HTML editor such as NotePad++, and upload it as a CSS file to the SharePoint document library. Then, link the CSS file to your SharePoint Master Page or Page Layout.
Step 5: Verifying the Implementation
To finish, save your settings and refresh your page. Your CSS Sprite should now render on the SharePoint page. Ensure it’s correctly shown and adequately aligned.
Conclusion
The use of CSS sprites in SharePoint is a brilliant tool for improving website performance. They significantly reduce the load time by reducing the HTTP requests made by the browser. Though implementing CSS sprites in SharePoint might require time and effort, the noticeably enhanced website performance and user experience make it worthwhile.
Leave a Reply