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
From the course: CSS to Sass: Converting an Existing Site
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.