What is a sprite? How is it applied using CSS? What is the benefit?

Experience Level: Mid-level
Tags: CSS

Answer

​CSS spirite is a preformance optimization technique that combines multiple images into a single image called a spirite sheet or title set. Spirites reduce network congestion by reducing the number of downloads needed to render a web page.

CSS spirite sheet work: marge several images into a single spirit sheet, placing them in the grid-like pattern. When particular image is required, the CSS refefences the spirit sheet, offsets it by the index of the desired spirite, then defines the size of the sirite in pixels.

Related CSS job interview questions