Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

018 Embedding images into CSS with URL data

From: View Source

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.

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.

Show transcript

This video is part of

Image for View Source
View Source

20 video lessons · 15828 viewers

Ray Villalobos
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
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.


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.

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

Your file was successfully uploaded.

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.