New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

View Source
Illustration by

018 Embedding images into CSS with URL data


From:

View Source

with Ray Villalobos

Video: 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.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
View Source
2h 10m Intermediate Jan 20, 2012 Updated May 25, 2012

Viewers: in countries Watching now:

The View Source weekly series offers 10-minute projects on intermediate and advanced web design topics, covering technologies such as HTML, PHP, jQuery, and CSS, as well as content management solutions like WordPress and integration with Twitter, YouTube, and more. Each movie in the course is self-contained and shows how to accomplish an interesting effect and/or technique. Example projects include creating datepickers and custom photo galleries, and mapping and geotagging with Google Maps.

Topics include:
  • Creating a custom URL in WordPress
  • Adding breadcrumb links to sites
  • Creating a toggle button with jQuery
  • Adding Twitter feeds to a site
  • Adding PayPal buttons to pages
  • Uploading photos to your web site
  • Embedding videos for different browsers and devices
  • Parsing and placing a YouTube video feed
Subjects:
Web Web Design Projects
Software:
WordPress
Author:
Ray Villalobos

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 simple HTML document here that just has a list with a couple of sub-lists. First thing I need to do is I need to create some styles to make this look a little better.

So I am going to go into codesnippets and grab a little bit of style sheet code, so I am going to click right there and paste that in there, and what that's doing is creating the list, getting rid of the item numbers that an ordered list would normally add, plus adding this background URL of arrows.png. That file is right here and is a sprite. So you could see there are two different versions of this image and they're both in the same file. What we could do is, show the normal version of this image by default and then switch to the arrow down version whenever we process one of the clicks on these elements.

So let's go back to our style sheet and take a look at some of the other stuff that we've got here. We've also created a style called showme, for after we click on one of these elements, so that it can show the sub-lists. Finally, we have hidden all the secondary lists by setting the second ordered list elements to have no backgrounds and no display elements. To display a background of none so that when I expand these items all these sub items won't have arrows also, and I've also set the display to none, so that they currently are not showing.

Now we need to add a little bit of JavaScript to make this actually work in the way that we need it to work. So I am going to back into codesnippets, and of course I need to load my jQuery library. I am going to use Google's CDN right here and have an optional piece of code that will load a local version while I am offline. So I am going to copy that, go back into my index file, and before the end body tag, I'll paste it right there, and this adds the JavaScript library to our file, it's not going to really do anything, we're going to go back into codesnippets and grab the program that actually makes the lists expand.

So I am going to grab this version of the script, it just says whenever the DOM is finished loading, if you click on one of these list items I am going to take one of those list items and make them display. So I am going to copy that, bring it into my index.html and right underneath my call to jQuery, I am going to paste that in here. And now, if I click on one of these items, it shows the secondary list. So the arrow graphic after we click on one of the main lists is supposed to be moving to its second position which shows the down arrow, but right now because we expanded the list, it's still showing the first position.

So we need to add a bit of JavaScript to actually set the class of the item that we clicked to the showme class, which will show the triangle in the correct position. We've already styled it; all we need to do is add the jQuery. So I am going to go back into codesnippets and grab a slightly different version of this file, looks like this, and here we add a class of showme to the element that we clicked on. Go back into the index, then I'm going to replace this code right here. Now when we click on one of these elements, it's going to switch the list item to the showme class, which has the lists being read and it moves the graphic for the triangle up showing the second version of it on these elements.

So that's generally how sprites work. They just shift the graphic to another position, saving you a little bit of time because the graphic is loading only one time. We can save a little bit more time by just embedding the graphic into the CSS file. That way instead of loading one CSS file and one graphic, it's only going to load the CSS file and the image will already be embedded into it. So what we need to do is take that graphic and convert it into a URL data format that is just a string that we can paste into our CSS and have it read all the data for the image from the same file.

So to do that you can go to this web site and click on this Browse link to load up your image. Find the image that you want to convert, and hit Choose button here. Then click on Convert Image. It will take you to a secondary page in which you can see different versions of this image that you can load up on your web site. So as you can see you can load it up as just a regular image, using an image tag, or you can load it up as a background image, or you can get the raw data right here. So I've already done that and placed it into my CSS, so I am going to switch back over here, grab the next version from codesnippets of the list item.

I am going to copy this, go back into mystyle.css and change this version of the list item, paste it with the new data. One of the things you have to watch out when you paste the code and it looks like it happened here when I was doing this, is that the code that you get from this web site doesn't have the no- repeat option on the background image. The code here for the background image has the background-repeat as a separate element. Since we are using that on a regular document, we need to make sure that we delete this extra semicolon here that this data comes with, and now our arrows will not repeat.

This file now is no longer using the image from our project files; it's using the image from this data in this background. And although that looks like it's a really long bunch of data, because these things get cached by your browser, this will make your site run a little faster. I wouldn't recommend this for any humongous photos, but definitely if you're using a lot of small interface elements, combine them all into one image, use CSS sprites and then embed it into your CSS, and you should see a dramatic boost in performance.

So see you next time and remember that if you are looking for ways to speed up your life, don't forget to View Source.

There are currently no FAQs about View Source.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed View Source.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.