CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image.
This technique can be very effective for improving site performance, particularly in situations where many small images, such as menu icons, are used. The Yahoo! home page, for example, employs the technique for exactly this.
Example in steps
Create a one image with all necessary images included. in this example i am using Adobe Photoshop tool for creating image. It is better to use image type as .PNG
Get measurement in each and every small images. In Adobe Photoshop there is a tool called ruler tool . You want the following measurements
width of small images
height of small images
X and Y coordination of small images
in this example i want to get the measurements of text “Ranga”
it was ,
width : 77px height : 45 px
X : 1px Y : 6px ( rounded measurements)
now i am going to use the small image “Ranga” in many places in a web page using CSS and HTML .
Working as a lead consultant(software) at well reputed IT company in Sri Lanka, I have been involved in UID, UXD, graphic design, website design & development, eCommerce and WordPress for over 10 years. I'm proficient with React JS, Angular, Node JS, Java Script, HTML5, CSS3, Responsive Web Design, Adobe CC and PHP. I also specialize in all forms of digital marketing including SEO, AdSense, Affiliate marketing and blogging.