- [Instructor] Before we look at the technical aspects
of optimizing images for the web, let me show you something
I found very surprising when I first learned it.
The quality of the images you see in web applications
make a significant impact on performance.
And when I say quality here,
I'm not talking about the resolution fidelity of the image.
I'm talking about actual photographic quality.
You see, image performance is all about
how much data is contained within an image
and how easy it is to compress that data.
The more complex the image,
the larger the data set necessary to display it
and the more difficult it is to compress.
This idea requires a practical example.
So I took my camera and I went and took
a couple of pictures of some toys
that my kid was playing with.
So here is one picture.
This is taken with an aperture value of f/16.
So there's quite a lot of depth of field in the image.
And this is another image.
It's the exact same camera settings.
The only thing that's changed
is that I reduced the aperture.
So I brought the aperture down to 1.4.
The difference between these two images,
it's very obvious when you see them
side by side.
In one image there's a lot of depth of field,
so you can see a lot of the details clearly.
While on the other image, there's very little depth of field
or shallow depth of field.
And as a result, the characters in the front are in focus
but everything else is being blurred.
For performance, this difference is significant.
Let me show you what I mean.
These are the files you're looking at
in Photoshop right now.
So hard is the image that has a deep depth of field.
Soft is the one that has very little items in focus.
And right off my camera, you can already see
there's a size difference between these two files.
So the one with a lot of detail has 1100 kilobytes.
The one with the less detail has 900 kilobytes.
Then if we go into Photoshop and just say export as
and then go and mess around with the settings here,
we can grab the image, which in this case is nine megabytes.
And then change the quality of the image here
by like pulling it down to maybe 75%.
And as a result over here, you see the size
of the file is automatically reduced to 1.8 megabytes.
If you wonder if that reduces the quality of the image,
you can go and look at it.
So we'll zoom in to a hundred percent here
and then you can see them side by side.
This image over here, this one is 1.8 megabytes.
This one is nine megabytes.
Can you see the difference?
I can't see the difference.
There's almost no difference here,
but there is a compression difference.
So the size difference is significant.
Now I've already done this to show you what's happening.
So here, I think I've reduced the quality
to 85% for each of them.
And then we have the first hard image reduced
in quality by Photoshop.
By compressing it using Photoshop,
we got it down to 3.9 megabytes from 11 megabytes.
And with a soft image, we got it down from
9.9 megabytes to 2.5 megabytes.
So there's a huge data saving in just re-saving the file
in Photoshop with slightly lower quality.
Then I took one more step.
There's a service called Squoosh
that you can either use online
or you can download into your development app
and use in your build process that will try to
compress your image files as much as possible.
This is drag and drop.
So if I take this image here,
the soft Photoshop compressed version
which is at 2.5 megabytes, and just dump it into Squoosh,
then I can optimize it further.
And here again, you get a side-by-side
so you can see what the difference is.
And right now the quality is set to 75
and look at this performance saving here, 87%.
So from 2.5 megabytes, it now says my file will be
335 kilobytes, which is an enormous difference.
And with Squoosh, I can then play around with the settings.
I can bring the quality way, way down to see
what'll that look like.
I'm pretty sure it's going to look bad.
It is, this was too much, but you can play around with it
and say like 75 is fine.
Like 75 is so little difference
that it is negligible and no one will ever notice it.
Meaning instead of serving up 9.9 megabytes
or 2.5 megabytes, I'm serving up 328 kilobytes.
But what I want to draw our attention to is the difference
in the photos themselves.
The file with more detail will always be bigger.
So here we have 575 versus 328 for the exact same photo.
Again, the only difference here is the depth of field.
Shallow depth of field means better performance.
So the reason I said this has to do
with image quality is for many types of photography
including products, headshots, documentary, and others
a shallower depth of field is preferred.
And a well-trained photographer will know instinctively
to bring down that depth of field to improve the image.
This improvement then also has
a meaningful performance improvement.
So in all honesty you can actually argue
taking a photo class or hiring a professional photographer
should be part of your web performance strategy.