Images are almost always the biggest use of bandwidth.

Most sites use html, CSS, and JavaScript.

But images like photos or artwork are regularly five or ten 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.

First, it's best to start designing a website using SVGs wherever possible.

In other words, anything that isn't a photograph or

some other type of information dense artwork can be an SVG.

SVGs are small in file size because they cover large areas of the screen using

just a few vector points,

rather than thousands or millions of individual pixels like a JPG or PNG.

In the workspace for this course, I've included a folder called Assets.

This folder contains some of pre-made assets that I've created.

If you need to review how to create SVGs like these.

Check the notes associated with this video.

So, inside of this assets folder, you'll see quite a few different files here,

but specifically we wanna focus on the SVG's.

Now we have some images in our site here that could easily be SVG's.

This Twitter and Facebook logo down at the bottom here and

these images over on the contact page.

Now, the contact page is a little bit different because we're utilizing

background images.

But that's okay we can go ahead and modify our CSS to fix those.

So let's jump into our workspace and actually use these.

So down at the bottom here, we have these images that are directly in the HTML.

So let's just replace the path here.

So I'll say assets to access the assets folder instead of the image folder.

You can move these to the image folder if you'd like, but

I'm just going to change the path.

And then, I'm going to change the file extension from PNG to SVG.

So same thing on the Facebook logo here, SVG.

So we'll save that out, switch back to the browser, and I did this on the index page.

So if we scroll down here and look at these two icons here, and Refresh,

it should look almost exactly the same.

So let's just load up the Chrome def tools,

just to make sure that we did indeed replace these.

And it says yup it's an SVG now.

So now let's go ahead and replace those images on our other pages.

So I'm just going to copy the entire footer here and

then I'll open up the About page and Contact page.

And then I'll just paste the entire footer [SOUND] there.

And that did change the paths like we want, and then I'll just paste

the entire footer here, on the About page, and Save that out.

There we go, so that's replaced.

So now we need to go to the Contact page and we have some images here but

they're background images, so they're not actually in the HTML.

So let's go to our CSS.

And I believe it's in main.css, so let's scroll down in that file.

And we've organized this by pages, so it's pretty easy to find what we need here.

And here are those images.

So it's accessing the image folder, so again we'll just change this

to assets [SOUND] and then we just need to change the extension,

because these are using SVG instead of PNG.

[SOUND] So lets just copy that extension and paste, and paste.

And then we'll Save that out.

And if we switch back and go to the Contact page and Refresh,

just to make sure we have the new assets.

It should look almost exactly the same.

We shouldn't notice, really, any difference.

So, let me just right-click and hit Inspect Element, to make sure that,

that is indeed using the background image we want and yep, it's assets/phone.svg.

So that's good.

Next anything that can't be made into an SVG, like photographs or

the artwork we have on the homepage, should be resized and compressed properly.

If we deliver more pixels than are actually used,

it's usually just wasted bandwidth.

The images are being resized to fit their container, and

then when we click on them we see them at full size.

However, rather than loading everything in one big page load,

we should create separate images that are appropriately resized.

This will make the page load faster.

And it will only load a full size image if

the user clicks on one of the smaller images.

These smaller images are often called Preview images or Thumbnail images.

So in our assets folder, I've resized all of the images appropriately for us to use,

but let's walk through an example in Photoshop using one of the original files.

If you have your own assets that you're working with, you can follow along here.

So I'm going to switch over to Photoshop, and

here I have one of the original files that I use to create the images on the site.

So let's just go back to the site, real quick, and take a look at those.

And, I'm going to Inspect this element, here.

And it says its natural resolution is 1024 x 768, but

it's being resized to a container of 266 x 200.

So, we want actually twice that resolution for

Retina screens, so we want 266 times 2.

So let's go back, here to Photoshop, and

I want to Save this image for the Web.

So we'll go to the File menu, and we'll go to Save for

Web, and this will open up a dialog box.

We have quite a few options here.

So like I mentioned before, we want twice that resolution.

So down here where it says Image Size, I'm going to type 532.

And that might not hit it perfectly on the height but that's okay, and

then I'm going to change the preset here.

Now, I'm gong to try JPEG Medium.

And, that's going to give me a few good defaults here.

I'm going to actually check Progressive so that the file downloads

in multiple passes instead of downloading one line at a time.

And, this is a slightly different way of loading the file,

but it will give the appearance of loading faster.

It will get color to the page quicker, by the time the user

can actually even focus their eyes on the image, it will probably already be there.

The Quality adjustment is a place where you can also make some savings.

I'm going to leave it at about 30% here.

That doesn't look too good actually, so

maybe I should bump it up a bit to maybe 50.

That's a little better and down here in the bottom left,

I've got a preview of what that file size might be.

So let's go ahead and with all these settings, hit Save, and

you can save it to wherever you want and then upload it to your workspace,

if you're working with your own assets.

I'm not actually going to save this because in our

workspace I already have those files.

So let me close this out [SOUND].

And I will go back to my workspace here.

And here you can see I have those preview images.

So let me go to index.html and we need to be careful

about which image we're actually changing here.

In the hyper link is the full size image, so

that is where the browser will go when somebody actually clicks.

However, there is an image inside of that and the hyperlink is wrapping it,

and that's where we want our preview image.

So it's on the actual image, not on the hyperlink.

So, once again let's just change the path here.

We'll change it to

alt="">.

So, I'm just going to copy that dash preview all the way down and

then we'll copy the new folder.

[SOUND] all the way down [SOUND] and

again when you're doing this just be

careful not to change the wrong file [SOUND].

So we'll save that out, and when we go back here and Refresh,

we shouldn't notice anything all that different,

and that's because we were loading in more pixels than we actually needed.

So let's Inspect one of these elements and

here we can see it is 266 x 200.

But the natural size is 532 x 399, so

we actually are delivering those smaller resized images.

So finally, let's look at the Network tab and

see if we made any performance improvements here.

So, we'll go to the Network tab, and Refresh the page.

And you can see we're still at 19 requests but we dramatically cut the file size.

We started at around 819 kilobytes,

I think and, now we're down to 212 kilobytes transferred.

And you'll notice that the transfer times are also faster,

we've never seen anything under 300 here.

So, now it's at 237 milliseconds.

Let's just Refresh a couple more times.

Just to kinda get an idea of what the page load times are like, and

pretty consistently it's generally at about 300 or under.

So pretty good, looks like we made an improvement here