Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Images are almost always the biggest use of bandwidth. Most sites have HTML, CSS, and JavaScript, but images like photos or artwork are regularly 5 or 10 times the size. Making careful choices about the number of images you load, how they load, their compression, resolution, and their file format, can all make a big impact on your page load times.
Concepts
- Use SVGs First - SVGs are small in file size because they cover larger areas of the screen using just a few vector points, rather than thousands or millions of individual pixels like in a JPEG or a PNG.
- Resize and Compress Images - Delivering images that are appropriately compressed and sized to their container will reduce file sizes.
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Images are almost always the biggest use
of bandwidth.
0:00
Most sites use html, CSS, and JavaScript.
0:03
But images like photos or artwork are
regularly five or ten times the size.
0:06
Making careful choices about the number of
images you load.
0:11
How they load, their compression,
resolution, and
0:15
their file format can all make a big
impact on your page load times.
0:18
First, it's best to start designing a
website using SVGs wherever possible.
0:22
In other words, anything that isn't a
photograph or
0:27
some other type of information dense
artwork can be an SVG.
0:31
SVGs are small in file size because they
cover large areas of the screen using
0:34
just a few vector points,
0:39
rather than thousands or millions of
individual pixels like a JPG or PNG.
0:41
In the workspace for this course, I've
included a folder called Assets.
0:45
This folder contains some of pre-made
assets that I've created.
0:50
If you need to review how to create SVGs
like these.
0:54
Check the notes associated with this
video.
0:57
So, inside of this assets folder, you'll
see quite a few different files here,
1:01
but specifically we wanna focus on the
SVG's.
1:08
Now we have some images in our site here
that could easily be SVG's.
1:12
This Twitter and Facebook logo down at the
bottom here and
1:18
these images over on the contact page.
1:23
Now, the contact page is a little bit
different because we're utilizing
1:27
background images.
1:30
But that's okay we can go ahead and modify
our CSS to fix those.
1:31
So let's jump into our workspace and
actually use these.
1:36
So down at the bottom here, we have these
images that are directly in the HTML.
1:41
So let's just replace the path here.
1:49
So I'll say assets to access the assets
folder instead of the image folder.
1:52
You can move these to the image folder if
you'd like, but
1:58
I'm just going to change the path.
2:01
And then, I'm going to change the file
extension from PNG to SVG.
2:02
So same thing on the Facebook logo here,
SVG.
2:09
So we'll save that out, switch back to the
browser, and I did this on the index page.
2:15
So if we scroll down here and look at
these two icons here, and Refresh,
2:20
it should look almost exactly the same.
2:24
So let's just load up the Chrome def
tools,
2:27
just to make sure that we did indeed
replace these.
2:30
And it says yup it's an SVG now.
2:33
So now let's go ahead and replace those
images on our other pages.
2:37
So I'm just going to copy the entire
footer here and
2:44
then I'll open up the About page and
Contact page.
2:49
And then I'll just paste the entire footer
[SOUND] there.
2:54
And that did change the paths like we
want, and then I'll just paste
3:01
the entire footer here, on the About page,
and Save that out.
3:05
There we go, so that's replaced.
3:09
So now we need to go to the Contact page
and we have some images here but
3:11
they're background images, so they're not
actually in the HTML.
3:16
So let's go to our CSS.
3:21
And I believe it's in main.css, so let's
scroll down in that file.
3:24
And we've organized this by pages, so it's
pretty easy to find what we need here.
3:31
And here are those images.
3:36
So it's accessing the image folder, so
again we'll just change this
3:37
to assets [SOUND] and then we just need to
change the extension,
3:43
because these are using SVG instead of
PNG.
3:48
[SOUND] So lets just copy that extension
and paste, and paste.
3:52
And then we'll Save that out.
3:58
And if we switch back and go to the
Contact page and Refresh,
4:00
just to make sure we have the new assets.
4:04
It should look almost exactly the same.
4:06
We shouldn't notice, really, any
difference.
4:09
So, let me just right-click and hit
Inspect Element, to make sure that,
4:12
that is indeed using the background image
we want and yep, it's assets/phone.svg.
4:17
So that's good.
4:24
Next anything that can't be made into an
SVG, like photographs or
4:25
the artwork we have on the homepage,
should be resized and compressed properly.
4:29
If we deliver more pixels than are
actually used,
4:34
it's usually just wasted bandwidth.
4:37
The images are being resized to fit their
container, and
4:39
then when we click on them we see them at
full size.
4:43
However, rather than loading everything in
one big page load,
4:46
we should create separate images that are
appropriately resized.
4:50
This will make the page load faster.
4:55
And it will only load a full size image if
4:57
the user clicks on one of the smaller
images.
5:00
These smaller images are often called
Preview images or Thumbnail images.
5:03
So in our assets folder, I've resized all
of the images appropriately for us to use,
5:08
but let's walk through an example in
Photoshop using one of the original files.
5:14
If you have your own assets that you're
working with, you can follow along here.
5:20
So I'm going to switch over to Photoshop,
and
5:24
here I have one of the original files that
I use to create the images on the site.
5:28
So let's just go back to the site, real
quick, and take a look at those.
5:35
And, I'm going to Inspect this element,
here.
5:40
And it says its natural resolution is 1024
x 768, but
5:46
it's being resized to a container of 266 x
200.
5:51
So, we want actually twice that resolution
for
5:55
Retina screens, so we want 266 times 2.
5:59
So let's go back, here to Photoshop, and
6:03
I want to Save this image for the Web.
6:08
So we'll go to the File menu, and we'll go
to Save for
6:12
Web, and this will open up a dialog box.
6:17
We have quite a few options here.
6:21
So like I mentioned before, we want twice
that resolution.
6:23
So down here where it says Image Size, I'm
going to type 532.
6:28
And that might not hit it perfectly on the
height but that's okay, and
6:34
then I'm going to change the preset here.
6:39
Now, I'm gong to try JPEG Medium.
6:41
And, that's going to give me a few good
defaults here.
6:45
I'm going to actually check Progressive so
that the file downloads
6:51
in multiple passes instead of downloading
one line at a time.
6:57
And, this is a slightly different way of
loading the file,
7:01
but it will give the appearance of loading
faster.
7:05
It will get color to the page quicker, by
the time the user
7:08
can actually even focus their eyes on the
image, it will probably already be there.
7:12
The Quality adjustment is a place where
you can also make some savings.
7:16
I'm going to leave it at about 30% here.
7:21
That doesn't look too good actually, so
7:24
maybe I should bump it up a bit to maybe
50.
7:27
That's a little better and down here in
the bottom left,
7:30
I've got a preview of what that file size
might be.
7:34
So let's go ahead and with all these
settings, hit Save, and
7:38
you can save it to wherever you want and
then upload it to your workspace,
7:43
if you're working with your own assets.
7:48
I'm not actually going to save this
because in our
7:51
workspace I already have those files.
7:56
So let me close this out [SOUND].
7:59
And I will go back to my workspace here.
8:03
And here you can see I have those preview
images.
8:06
So let me go to index.html and we need to
be careful
8:09
about which image we're actually changing
here.
8:14
In the hyper link is the full size image,
so
8:19
that is where the browser will go when
somebody actually clicks.
8:23
However, there is an image inside of that
and the hyperlink is wrapping it,
8:28
and that's where we want our preview
image.
8:34
So it's on the actual image, not on the
hyperlink.
8:37
So, once again let's just change the path
here.
8:41
We'll change it to <mg
src="assests/number-01-preview.jpg"
8:44
alt="">.
8:50
So, I'm just going to copy that dash
preview all the way down and
8:51
then we'll copy the new folder.
8:57
[SOUND] all the way down [SOUND] and
9:01
again when you're doing this just be
9:04
careful not to change the wrong file
[SOUND].
9:08
So we'll save that out, and when we go
back here and Refresh,
9:13
we shouldn't notice anything all that
different,
9:17
and that's because we were loading in more
pixels than we actually needed.
9:21
So let's Inspect one of these elements and
9:25
here we can see it is 266 x 200.
9:30
But the natural size is 532 x 399, so
9:35
we actually are delivering those smaller
resized images.
9:39
So finally, let's look at the Network tab
and
9:45
see if we made any performance
improvements here.
9:48
So, we'll go to the Network tab, and
Refresh the page.
9:52
And you can see we're still at 19 requests
but we dramatically cut the file size.
9:56
We started at around 819 kilobytes,
10:03
I think and, now we're down to 212
kilobytes transferred.
10:06
And you'll notice that the transfer times
are also faster,
10:10
we've never seen anything under 300 here.
10:14
So, now it's at 237 milliseconds.
10:16
Let's just Refresh a couple more times.
10:19
Just to kinda get an idea of what the page
load times are like, and
10:21
pretty consistently it's generally at
about 300 or under.
10:26
So pretty good, looks like we made an
improvement here
10:31
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up