All language subtitles for 4. Image Optimization

Image optimization is a great first topic for our course, because it's really something that I think

most people don't think of at first, but it really plays an impact on the performance of your application.

So I'm going to walk you through some of the best practices that I've found for doing this.

Although all of the images in the Project Files folder that you downloaded are already optimized that

way, you don't have to go through and individually follow these steps for all the images that are in

there.

You can just use them as they come.

But I'm going to walk you through the workflow so that you'll understand how I got these images optimized

and how you'll then be able to do that in your own projects.

All right.

So one of the first rules of image optimization is always use as Viji.

Always use SPG when you can.

There's a number of reasons as to why this is so beneficial and why a number of large companies have

recently gone through the effort of switching all of their icons and all of the pictures that they can

into SPG format.

So the first reason for that is SPG is are naturally responsive.

I guess not naturally responsive, depending on how you code them.

Obviously they can have fixed sizes, but they do allow you to scale them as much as you need as big

or small without losing the quality.

Whereas if you tried to blow up a regular picture and make it really, really large, it's going to

start getting blurry very quickly.

And the same thing when you start zooming in and with S.B GS, you don't have to worry about that because

it just automatically re sizes.

That's what it is.

SPG stands for a scalable vector graphic, so scalable meaning can be any size.

So another reason to use SVO GS is it?

They are inherently very small.

So some of the icons that are used in this Web site are only a couple hundred bytes.

That's just bytes big.

So very, very tiny files, which obviously makes it a key Canada for what we want when we're trying

to think about optimizing our images.

And one of the coolest reasons to use SVO GS is that they are customizable.

So what I mean by that is that you can manipulate different properties of the SPG, such as its fill

color or its height and width by providing your own properties and in react especially.

This allows us to do interesting things where we can potentially change the values of those properties

in our S Fijis depending on the state of our UI.

This gives us a lot more control over the images as if they were actual icons and even enables us to

do cool things like use one image and then change which color we needed.

As for, say, a different colored arrow or other similar icons.

If you can't use SPG for whatever reason, then you should almost certainly be using a JPEG or a PMG,

because each of these also has little tricks that I'll show you that allow them to be optimized and

really adjust the standard image formats above any other extraneous options.

All right, so now that we know what file formats we need to be having our images in, I'm going to

show you a live demonstration on the difference between having good optimization for your images and

having bad optimization for your images.

Google page Speed Insight's is an application that lets you test the performance of your Web site.

They base this performance on a number of different factors, but they also provide you with suggestions

on how you can improve the score of your site.

And many people use it as a baseline to make sure that they are delivering the best product possible.

So I have went ahead and found a example of a Web site that doesn't exactly use the best of image optimization

practices.

So this is the Web site of a university in my state.

And you can see here they do have a ninety three for their desktop score, which is very good.

But there still are opportunities for improvement down here.

And I'll show you in a second how this ends up affecting the mobile site where it becomes a lot bigger

of a deal.

Here you can see the all three of these suggestions.

Here are all about images serving your images in next gen formats, efficiently encoding images and

properly sizing their images.

All of this adds together for what could be a war of savings in your loading times, but we're really

makes a difference.

Is your overall transfer size?

If you look down here, you can see that the total transfer size for their home page is 19000 kilobytes

or 19 megabytes, but 18000 kilobytes of that was just four images.

So you can see that if they had more optimized images, then they could reduce the overall size of their

Web site by a pretty significant margin.

You can really see when this becomes a problem, if you come over to any mobile site.

So here you can see a score of just 53, which is significantly lower than the Web site for a desktop.

And here you can see there the serving images in next gen formats, efficiently encoding images and

you're properly sizing of images now is costing you almost a minute of loading time, whereas before

you're only at about eight seconds.

So you can see that it might not seem like a big deal at first, but when you start getting into your

edge cases and your mobile optimization, it really becomes a big bottleneck.

So let's come over here and take a look at an example of a Web site that uses good image optimization

and surprise.

That is my Web site.

The one that we are going to be building throughout this course.

So this is actually the live production version that I have tested.

And you can see my ninety nine, which I am extremely proud of, and I'm able to achieve that.

Ninety nine, while still including tons of icons and custom designed images as well as animations on

the page.

And that is only due to proper image optimization.

If you look down here, you can see that the total transfer size for this entire page was only two thousand

kilobytes.

If you come back over here and look at the bad example that I was showing you and you look at their

images, just this one image is three times the size of the entire total Web site or first page that

this load's.

So there is an extremely significant difference.

And you can really tell now just how important this is to be aware of.

So now let's talk about some actual techniques for how do we go about making sure images are optimized

and then we do reduces file sizes so that you guys can get your ninety nines as well.

So the first site that I'll show you is Tiny Jay dot com.

And this is a really easy site that actually works with Jay, Pegg's and Porgy's, and all you have

to do is drop the file here.

So it's a really well-known site.

You can see all of these companies here, they use it.

And I would highly encourage you running through running your images through this Web site before you

use them in a development project.

You can see with the file that I tried out here, it was able to reduce the size from two point nine

megabytes to just six hundred and eighty seven kilobits, which is in 76 percent reduction.

So that really is significant, especially when you apply that to a large number of images.

So that really is all you need to do for J.

Pegg's and Penn GS.

Although towards the end of the course, I'm actually going to show you another way that you can implement

image optimization with next J.S..

Once we go about implementing that.

But for now, I'll continue by showing you how to optimize as Fijis.

So for SVOD, there is this Web site called You can look up s the g o m g.

And it should be the first link.

And if you want, there's that for your URL.

And what you can do is essentially the same thing of dropping in or opening up your SVO GS.

And it produces an optimized version.

So let me go to the high fidelity design file that you have, and I'm just going to grab this icon right

here and go to the top.

Go to file and I'm going to export selected.

And I'm going to make sure that that's an SPG.

And I'm going to just export this to my desktop, calling it icon.

And export.

And I'm going to come back over here to SPG o m g and open this up to my desktop, select the icon.

And here it loads up.

A preview of it.

So this is a preview of the optimized version so that you can make sure that it looks the same and it

still retains the qualities and properties that you are expecting.

But if you look down here, you can tell.

The here is the original size, which, like I said, is extremely small for SPG is only four hundred

and eighteen bytes, but it was still able to crunch some numbers and reduce that down to just three

hundred and forty six bytes.

Now here the percentage is different.

It tells you what percent the new file size is of the old file size.

So this three hundred forty six bytes still retains 82 percent of the original file size, which is

approximately an 18 percent reduction.

So not as significant is the last file that I had tested out.

But this one is already pretty small to begin with.

So, again, this is all you really have to do for your S.V., geez, if you just make sure that you

drop them in through here and have optimized every single one, then you will have reduced the file

sizes by a significant margin and we'll be ready to start developing a fast performing application.

I will still show you a couple tricks, though.

And so if you have Photoshop, you can actually come up to the export under file and go to export as

an in this dialogue.

If you select J.

Peg to export, you can actually control the quality right here as well.

So you can see at 100 percent.

This is going to end up being one point two megabytes.

But if you drop that down to, say, 10 percent.

Then you're only 317 kilobytes.

So, again, a significant reduction.

With this approach, though, you are going to need to go in and make sure that the exported file still

retains the same quality as the previous one, and then it doesn't have any distortion or too much blurriness

that would make it unusable.

So I have actually went through and exported this image using this way in Photoshop as well as the online

optimizer.

And I just wanted to show you guys how those compared.

So that was the.

Tiny jay pad that I used to sew in the background.

Pair right here.

And you can see.

That the original was two point nine megabytes.

And this one.

From the tiny jpeg is only six hundred and eighty eight kilobytes, and the final one optimized through

Photoshop is just three hundred and twenty five kilobytes.

So that is half the size of that one.

And way smaller, almost 10 times smaller than this original one.

So if I go through and open all of these up.

Let me see if you can even tell the difference between them.

So there is the original.

There is from tiny jpeg.

And this is from Photoshop.

So you can see those are all pretty darn similar.

I would say, and for a lot of images I would saying that that similarity in quality is probably going

to be acceptable.

So depending on which images you have and what your setup requires, you'll may have to play with those

settings and see which one gives you the best file size for the best quality.

But that really was about all the tips and tricks.

There are two image optimization is pretty straightforward.

You just need to make sure you're running your images through these optimizers.

And in the correct formats and the balancing which approach works best for the quality that you're looking

for.

And that will really make a difference when you're working later to speed up your site and give you

the peace of mind knowing that your images aren't going to be a problem.