From the course: View Source

Unlock this course with a free trial

Join today to access over 22,400 courses taught by industry experts.

018 Embedding images into CSS with URL data

018 Embedding images into CSS with URL data

From the course: View Source

018 Embedding images into CSS with URL data

Hey there! This is Ray Villalobos and welcome to View Source! In this episode I want to show you how to add images directly into your CSS files as data. If you want to know why that's important, then it's time to View Source. If you have a large web site, most of the communication between the server and the users are calls to images. Every time you request even the smallest image, you're creating an extra connection that has to be processed by your server. You can reduce the amount and frequency of those requests by embedding your images into your CSS documents. A good example will be for small icons. If you use the icon many times on a busy web site, it can add thousands of calls as many users navigate through the site. When you combine this technique with CSS Sprites, which creates one image that gets loaded on many times but shows different parts of the image for different elements, then the time savings can be substantial. So let's take a look at how we can do that. I have a…

Contents