Preview
Video Player
00:00
00:00
Optimize Images
10:35Images 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.
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