Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Front End Web Optimization Workflow !
You have completed Front End Web Optimization Workflow !
Preview
Images are the number one perceived performance fail of any web app. A slowly loaded image can really impact your user's experience. Through optimization and responsive image loading techniques you can have a major impact on your app's performance.
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 were never part of
the original HTML spec.
0:00
And ever since their introduction,
images have yet
0:04
to be truly optimized for the web.
0:06
JPEG, the most commonly used image format,
0:09
has seen multiple iterations to increase
performance and optimize output.
0:11
Surprisingly, we have a plethora of
tools and techniques available for
0:17
image compression.
0:21
But it's still not hard to come
across poorly compressed images.
0:22
There are basically two types of images,
raster formats like JPEG and
0:26
PNG, and vector like SVG.
0:31
Now, when it comes down to file size,
0:34
SVG wins hands down due to the fact
that it's more math than pixels.
0:36
Image optimization with raster images,
on the other hand, is more complicated.
0:40
So, let's cover some basics for
raster image optimization.
0:47
>> For
most of you out there building websites,
0:51
your image format of choice
will either be JPEG or PNG.
0:54
And typically your image processing
tool be either Photoshop or Sketch.
0:58
So in this example we're
gonna use Photoshop.
1:02
So here we have a photo of Mount Rainier.
1:04
I need to resize this
down to 1440 wide and
1:07
then we're gonna make a cropping
of this image that's gonna be
1:12
1440 by 623 the size of the banner
that we want from the website.
1:16
And then we're going to export
this as a JPEG and a PNG file.
1:22
So let's do our first export as a JPEG.
1:26
And then we're going to use JPEG with
a quality of 80% at 20% compression.
1:32
Then we're gonna name this
first file 1440_PSD_export and
1:37
then once we get this done here, export.
1:43
And now we're gonna go back and
1:46
we're gonna export the same image as
a PNG using quick export PNG feature.
1:49
Again using the same name at
convention 1440_PSD_export, and
1:54
then it's just gonna have the PNG
suffix so we can tell the difference.
1:58
So using the default JPEG save as function
we get a file that is going to be 371k.
2:01
It's not horrible.
2:09
The same image saved as a PNG
comes in at 1.7 meg, that's huge.
2:11
From this simple example we see that JPEG
is clearly a winner but we can do better.
2:16
So a popular compression tool is
TinyPNG that also uses JPEG's.
2:21
This web based tool is
pretty simple to use.
2:26
You can quickly upload your JPEG's and
PNG's and see how much weight we can shed.
2:28
So right away we see that TinyPNG,
2:35
I did a little bit on the JPEG but
huge savings on the PNG.
2:38
So we download our assets, let's unpack
these things and then rename our files.
2:42
All right, so then get in here.
2:47
We'll replace PSD with tiny, so
2:50
that we remember where we
actually got these files from.
2:52
So, we save some bytes on the JPEG,
by TinyPNG's process for
2:56
compressing PNG's is impressive.
3:01
I mean, we went down to 478k.
3:05
I mean, that's huge.
3:08
So, let's put these with the others and
clean up our desktop here real quick.
3:11
So there's another format out there
that you may or may not have heard of.
3:16
It's called WebP.
3:19
Let's run these same images
through an online converter and
3:21
see if we can get these
even better compressed.
3:24
So introduced back in 2010,
WebP supports alpha transparency and
3:27
is super superior to
the regular PNG compression.
3:32
But it's only currently
supported by Chrome and Opera.
3:36
So let's get our first one in here and
we're gonna rename this downloaded file so
3:40
that we remember that it was a JPEG image,
because now it has a .webp suffix.
3:48
And getting info we see that we
lost 100k from the original JPEG,
3:53
that's pretty good.
3:58
So let's put that into our folder.
4:00
So going back to the converter, let's
upload the PNG that we got from Photoshop.
4:04
Convert that download.
4:11
Let's go get our file,
again we're going to rename this, so
4:15
do the PSD to PNG, so
remember that this came from the PNG file.
4:20
And getting info we see
here that our PNG to
4:24
WebP is now 190k, I mean, this is huge!
4:29
Looking at all these
files that we exported,
4:35
we can see the vast
differences in file sizes.
4:37
WebP is clearly the winner here, but
since not all browsers support WebP I
4:41
do have a link in the teachers notes
on how to support this using Modernizr.
4:46
Be sure to check that out.
4:50
There's another somewhat radical
approach to image compression
4:53
that plays well with high DPI images.
4:56
So let's go back to that Mount Rainier
image except this time using a 2880 wide
4:59
image, basically two times
the size that we want.
5:06
So let's get this 2880, okay.
5:11
Then we need to crop this
down to 2880 by 1246,
5:14
again, this is gonna be twice
the size that we want in our view.
5:22
Now you'll get this cropped, looking good.
5:29
So, when we export
the JPEG from Photoshop,
5:32
we're gonna set the image
compression value to zero.
5:35
So, it's basically a 100% compression.
5:39
So, yes when viewing this in full size
in a browser, it's gonna look grainy,
5:43
it's gonna look weird.
5:47
But when physically compressed
into a 1440 wide space,
5:49
it's going to look pretty good.
5:51
So we're gonna rename this file
5:54
to 2880_100pct.jpg,
5:58
export, there we go.
6:03
So this 2880 size image at 80%
compression will be too large,
6:06
when we export the same image at 100%
compression, it comes in at 87k.
6:11
That's even less ;less
than the WebP image.
6:17
If we were to run these same
images through TinyPNG,
6:20
there will little that it can
do to affect this file size.
6:22
So, to actually see the results, let's set
up some easy HTML to put our images into.
6:26
I have a project started over here.
6:33
So, opening this in a browser,
6:35
we're gonna see these images
stacked on top of each other.
6:38
I use this image because of the clouds.
6:43
As you add compression
to images like this,
6:45
there's usually some banning effects.
6:48
And the results are gonna vary.
6:50
Looking at all these images though,
it's difficult to tell the difference
6:52
between the large file sizes and
the massively compressed ones.
6:56
I'd argue that any of these compression
techniques will yield positive
7:00
image results and
your users are gonna see great images.
7:04
The name of the game here is to get these
images file size down as small as possible
7:08
to improve delivery performance, and
basically reduce any issues of latency.
7:14
Opening this view in the inspector, we
can see how fast these images downloaded.
7:20
And we have some pretty good results.
7:25
And as we see here, our 100% compressed
JPEG came back in at 7 milliseconds.
7:27
That's wicked fast.
7:35
>> As we see here, there are some
pretty basic things we can do to
7:38
optimize our image asset and
get pretty great results.
7:41
But if you are managing a site that has
hundreds of images and you get new ones
7:45
every day, these manual processes can
get pretty annoying after a while.
7:48
There has to be a better
way to automate this.
7:53
>> Let's say that the art department
just sent you these images to put into
7:56
the site, all cropped to size and
ready to go.
7:59
But looking at the total weight of
the images, we're at almost 9 meg,
8:02
that's unacceptable.
8:06
So let's run these through TinyPNG, and
see if we can reduce our file sizes.
8:08
Nice.
8:18
As we can see here,
we shed 7 meg off of our image sizes.
8:19
So let's download these assets,
unzip them, and then open them up so
8:23
we can view our results more closely.
8:28
Getting info on our folders,
8:31
we're gonna see that we went from
the original 8.7 meg to 1.9 meg.
8:33
That is a huge savings.
8:38
And going into the directory as we know,
the quality of the images are still great.
8:40
And we got great file compression and
great image quality.
8:44
TinyPNG is awesome, but
let's automate this.
8:48
So to automate image compression,
8:52
I looked at a few projects
that seemed pretty promising.
8:54
A word of warning, while these image
optimization methods work really well,
8:58
I suggest not making this part of
your default bill process or watcher.
9:03
These optimization processes
can take time, and
9:08
a few actually even may
end up costing you money.
9:11
So it's best to keep these
as individual tasks.
9:13
The first option is using
TinyPNG's open API.
9:18
To use their API we can use gulp-tinypng.
9:21
Which is basically an easy to
use wrapper for their API,
9:25
to use this though you do have to
register for an API key with their app.
9:29
I'm not exposing my API key here
of course and neither should you.
9:34
It's pretty straight forward.
9:38
Point to all of the images in the source
directory, run them through TinyPNG and
9:40
then move them to a new destination.
9:44
In the prompt, let's run the gulp
task that we just created,
9:47
it would be gulp-tinypng.
9:51
Run and then basically this is gonna run
9:53
through the exact same
process like it does online.
9:56
So now let's open the new directory images
that we processed and see the results.
10:00
So clicking on this and
10:05
getting info we see that we
are at 1.9 meg again as expected.
10:06
This is exactly as if that we ran
it through the web interface.
10:10
Next I looked at Gulp Image.
10:14
Gulp Image is pretty cool and
it's totally free and
10:16
requires no API call and
it has great results.
10:19
At the time of writing this though
there are some issues with some of
10:24
the compression format, so
the gulp file should look like this.
10:26
Basically we have to be specific as to
what compression formats we will use
10:30
as some will throw errors.
10:34
So let's run the gulp task and
see the results.
10:36
So going into the disk directory here,
getting into images and
10:39
doing a command info we see that
we are actually down to 1.3 meg.
10:43
This is extremely impressive, and
10:48
as we can see here our image
quality is none for the worse.
10:51
In all, these are great solutions for
10:55
running automation image compression
processing within your app.
10:58
And this is really gonna help
to keep your file sizes down,
11:04
your size performance fast, and
keep your latency at an absolute minimum.
11:08
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