Preview
Video Player
00:00
00:00
Create a Sprite Map
13:04Loading in lots of images can generate many HTTP requests. This is particularly bad if we're using lots of small images, like icons, where the HTTP requests can collectively take more time than the file download itself. If we can combine these smaller assets together into one download, it will save some time.
[MUSIC]
0:00
Loading in lots of images can generate
many HTTP requests.
0:04
This is particularly bad if we're using
lots of small images like icons where
0:08
the HTTP requests can collectively take
more time than the file download itself.
0:13
If we can combine these smaller assets
together into one download,
0:19
it will save some time.
0:23
We're using five different SVGs, but
0:25
we can put them together in a single file
and then reference them in the HTML.
0:27
It's possible to do this with regular
raster images using a slightly different
0:32
technique, but small images like these
should almost always be SVGs.
0:36
Now, you might be wondering, why not do
this with all of our images,
0:41
including the gallery photos and the
profile photo?
0:45
Well, there are a few reasons, but here
are two important ones.
0:48
For the purposes of this example, imagine
we're running a much larger blog or
0:52
content driven site.
0:57
The first reason for not putting all our
images into a sprite map is that it would
0:58
very quickly become a massive file and it
would take a very long time to load.
1:03
Worse yet,
1:07
most site visitors will probably only look
at a small number of all the images.
1:08
But they're still downloading all of them.
1:13
Second, it would be very difficult for
other team members to use and
1:16
maintain the sprite map.
1:20
Every new image would need to be added.
1:22
Instead, it's much better to only use
sprites for
1:25
small user interface images that might be
common to more than one page.
1:28
We can do that by creating a single SVG
that contains all our shapes, and
1:33
then referencing them with the Use
element.
1:38
So, looking at our workspace here.
1:42
We can open up our Assets folder and
1:46
you'll see that there's this file called
svg-defs.svg.
1:48
And in this file, I've combined all of our
SVGs together.
1:53
But I wanna show you how to do that.
2:01
So let's actually just delete this file or
2:03
maybe [SOUND] remove everything in it and
we'll start from scratch.
2:06
So first, we need to wrap everything in an
SVG element.
2:11
So I'm gonna say svg
2:14
xmlns=http://www.w3.org/2000/svg.
2:19
Then style [NOISE] will be display none.
2:32
Cause we don't actually want to display in
this particular SPG when we
2:40
put it onto our page, we just want to
reference it's individual parts.
2:45
So then I'm going to use the symbol
element.
2:50
And inside of symbol, I'm going to give
each one of these an ID.
2:59
So, for this I'll say mail, because this
is going to be the mail icon.
3:05
And then we need to populate.
3:10
The view box attribute.
3:14
And we'll get that information in a
minute.
3:16
So lets open up mail.svg.
3:18
And here we have same kind of thing, we
have the svg element and
3:22
what we want is what's inside of the svg
element.
3:28
So let's copy that.
3:33
And we'll paste it there.
3:36
But we also need the viewbox.
3:37
So, from the mail.svg,
3:39
we have the svg element, then the viewbox
attribute, and we need what's there
3:44
to go into the attribute on the symbol
element.
3:50
So following the same pattern, we'll do
this for the phone icon,
3:55
so let's open up phone, and you'll notice
the view box is exactly the same.
4:02
So all we really need to do is grab what's
inside here.
4:08
And replace it.
4:13
And then same thing for a Twitter icon.
4:16
So we'll open up twitter.svg, we'll get
everything,
4:23
inside the svg element, and paste it
there, which should be a bit more.
4:29
It's a more complex icon.
4:33
And then, [NOISE] the next two icons are
what goes in the footer.
4:36
So let's copy and paste there,
4:44
we'll say Twitter wrap, and let's get this
one here.
4:48
So Twitter wrap.svg, we'll copy that.
4:55
And paste it in there.
4:59
And then the view box is different for
this one.
5:01
So we need to grab that and replace it.
5:04
[BLANK_AUDIO]
5:07
And let's just make some room to work
here.
5:11
We'll copy this Twitter wrap and paste it.
5:14
And then we'll replace it with the ID
Facebook wrap.
5:22
So let's grab that.
5:26
And I think the view box is the same.
5:29
Yep.
5:32
We just need to grab what's inside of the
SVG.
5:33
And we'll paste that there.
5:37
So now, we're ready to actually use these.
5:43
So let me close these other SVG's, cuz we
don't need them anymore.
5:46
And we're not actually going to reference
the SVG defs file,
5:52
we're just going to embed it directly into
our HTML so let's copy that, and
5:58
we're going to start out with the contact
page because that's using.
6:03
Most of these.
6:08
And then we'll move on to the about and
6:09
index page because we really only need a
footer icon for those.
6:11
So let's go to contact here.
6:16
And just after the body go ahead and piece
this in.
6:18
And let's just make sure that this is
properly indented.
6:23
I think that's good, yep.
6:26
And now,
6:31
down here at the bottom, we want to first
replace what's in the footer, here.
6:32
So we can do that pretty easily.
6:37
I'm just going to space these out a bit,
so we can see what's going on here.
6:40
And let's remove this image, but we'll
keep
6:46
the class social icon, and we're going to
replace it with the SVG elements.
6:52
SVG class social icon.
6:57
And workspaces will close that for us, and
then we can use the use element.
7:03
We'll say use and then the attribute x,
link, followed by a colon href.
7:10
Equals and then a pound sign inside there,
7:18
and we'll say facebook-wrap, because we're
selecting that ID.
7:23
And this is a self closing element, so we
just need to do that.
7:27
And actually this is for Twitter, so
7:33
we want to say Twitter here, and then
we'll just copy this.
7:36
And do the same thing down here, so we'll
replace this image.
7:42
[SOUND] And we'll say
7:45
facebook-wrap.
7:50
So now we need to replace these images,
but these are using background images.
7:54
And we embedded the SVG directly into the
page.
8:00
So we can't really use CSS to replace
these images anymore.
8:05
We're actually gonna have to place them
directly onto the page.
8:10
So let's start out with the markup that
we'll need, and
8:15
then we'll do the CSS after that.
8:19
So I'm going to remove this class here.
8:22
Because we're just gonna need to apply a
style to all of these now.
8:27
And we were only using that class for
selecting the proper background image.
8:31
So I'm gonna do the same thing, svg with
no class.
8:36
And then inside of it I'm going to use the
use element again with xlink=href.
8:41
And in this case I'm going to say #phone
because it is a phone icon.
8:49
Again, that's a self-closing tag.
8:58
And, let's just do the same thing for
these other two icons.
9:02
So, mail here, we don't need a class.
9:05
Twitter there, we don't need a class.
9:08
And then, let's just space these out
properly.
9:10
And then, I'll just go ahead and paste in
that SVG just above the anchor element.
9:15
And now we need to modify our CSS in order
to make this work.
9:22
So, let's jump over to main.css.
9:27
And we'll scroll down to the contact page,
there it is.
9:33
And now we need to rewrite some of what's
here.
9:39
So let's just delete all this stuff, and
9:43
we'll keep contact info and we'll start
from scratch here.
9:48
So contact-info on the list items.
9:50
We now want a margin of 10 pixels on the
bottom,
9:55
and 0 for everything else.
10:00
And that will just keep everything
separated properly.
10:04
Then for the anchor elements, we want to
keep that same padding that we had before.
10:07
Just so the icons are a little bit
separated from the links.
10:17
And then finally, [SOUND] on the SVGs we
want to size these properly.
10:21
So we'll say width: 14 pixels height: 14
pixels,
10:28
we'll save that out.And let's go to our
contact page and see how we did.
10:34
So, it looks like there's a phone icon for
all of these.
10:43
That's probably because I did not replace
the ID here.
10:45
So, let's do that.
10:51
Change it to mail and then twitter.
10:52
Let's go back and refresh and there we go.
10:57
Now, we have the proper icons.
11:00
Their SVGs, they're directly onto the
page, and
11:02
they're not background images anymore.
11:05
So let's do the same thing on about and
portfolio.
11:07
We just need to go back to our svg-defs.
11:12
We'll copy that.
11:14
Let's go to the about page and just inside
the body here.
11:16
We'll paste this.
11:21
Let's indent it properly.
11:23
But remember, we don't need these other
icons here.
11:24
Mail, phone and twitter.
11:27
We just need twitter-wrap and
facebook-wrap.
11:28
So, let's delete that.
11:31
And let's copy what we have there.
11:36
And we'll paste in on index, and then we
need to adjust the footer as well.
11:41
So let's scroll down to the footer in
contacts.html,
11:48
and let's copy this new SVG footer.
11:55
And, first of all, replace the footer in
about.
11:59
[BLANK_AUDIO]
12:02
Here we go.
12:05
And then I'll replace it in the index.
12:06
[BLANK_AUDIO]
12:10
So, there we go, now all of our SVGs are
combined into one file.
12:13
And go back to home here, open up the
Chrome Dev Tools and see how we did.
12:20
So I'll go to the Network tab and I'll
refresh the page.
12:26
And you can see that we've reduced the
number of HTTP requests.
12:30
So there's now 17 requests, we're
transferring 210 kilobytes.
12:34
And the page loads pretty quickly in about
250 milliseconds,
12:39
or a quarter of a second.
12:44
Let's just refresh that a few more times.
12:45
And we're pretty consistently at a much
lower number than we were before.
12:48
Now, that could be maybe some network
traffic got adjusted and
12:52
shifted around but it looks like fairly
consistently here.
12:56
We're doing better than we were before, so
that's good.
13:01