Benefit and Use of CSS Sprite Image

CSS Sprite images on the website are an organized group of small images.

A web page with small images creates multiple server requests that why it takes more time to load.

You might noticed, image login issue like this :

• On the first load

• On the second load

• On the third load

• On the fourth load – if you used the icon in button on hover, then it is a cheap level of coding 😀

The CSS Sprite image resolves such issues and makes the website faster and effective.

The CSS Sprite image is easy to create and export into JPEG, PNG, or SVG.

Every icon should place in a rectangular box with proper breathing space.

If all set, hide the box and export sprite in jpg, png, or SVG.

To add a new icon, don’t rearrange the icon. Create a new space for the new icon.

Use sprite image at the code end.

It works on CSS property named – “background-position” . Background Position has two values first value for X-axis and the second value for Y-axis.

background-position : 0px 0px;

It means the extreme left-top corner of the image.

Use logo in our website from this sprite, then we have to calculate the geometric position of the logo into the image as shown in fig. below

In above example, logo width is 90px and height is 48px, and its coordinate position is 0px on x-axis, and -72px on y-axis.

Please keep in mind, CSS Sprite works on negative cordinate.

In CSS, define the following code

.wd-logo {
    background-image: url(../assets/wd-sprite.svg);
    //set image url
    width: 90px;
    height: 48px;
    //width and height of logo
    background-position: 0 -72px;
    //position of logo on css sprite
    display: inline-block;
    //define the area to display
}

I hope this article will help a lot to boot up your website.

CSS Sprite images also are used for animation purposes. We will discuss this in some other article.

Thanks!