From the course: CSS to Sass: Converting an Existing Site

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Configure eyeglass-spriting for image sprites

Configure eyeglass-spriting for image sprites

From the course: CSS to Sass: Converting an Existing Site

Start my 1-month free trial

Configure eyeglass-spriting for image sprites

- One popular web performance technique is to create image sprites. An image sprite is a collection of multiple images that are all part of one image file, and then those appear on a webpage by creating an element that uses the image sprite as the background image setting a width and height to the size of the individual image to crop the sprite and positioning the background image with CSS to only display the individual image. It has a noticeable speed improvement for http1.1 websites because it eliminates the need for an http request for each image, and instead replaces those multiple image requests with just one. In this lesson, we'll configure an eyeglass module appropriately named eyeglass-spriting to enable us to generate a single sprite image for these three individual social media icon images in the footer. And also generate the CSS for them. So the first thing we're going to need to do is install eyeglass-spriting. To do that, we'll go to our terminal and run npm install…

Contents