Now moving to exporting for web or saving for web.
Now let's say we need to upload our design or use it online, maybe for web design or even to share
it with other clients.
So in that case, mainly we need to export a smaller file size so we can do that by going to file export,
then selecting export as and previously we had save for web option, which is now a legacy and you can
still use that one.
And Photoshop users who probably don't have creative cloud version can only use that option.
That's why you're going to be discussing that one as well.
But let's first start with export as.
We have our images dimensions and we have image size as well.
And right side we have file settings, including format.
We can export that one as PNG or Jpeg or GIF, which is mainly used for animated files or SVG files
which are vector files.
And the most common format used for images online is.
So we're going to stick with that one.
And also we have image quality.
We can be reducing that one to get a smaller file size.
But let's start first by reducing dimensions for our file as 2000 pixels will be too much if it's going
to be used in web design or even most online applications and also in web design, it depends on where
you're going to be using that image, whether it's going to be a white full screen banner or maybe a
small image widget within your web design.
But usually 2000 pixels are too much.
So let's get that one to maybe 800 pixels, or instead to maintain our proportions, we can use the
scale options.
So let me get that one back to 2000 pixels.
Come on a 2000 and I'm going to be scaling that one down.
Maybe first we can go to 50%.
And we have width and height changed and also image size reduced.
However, we can go even below that.
We can be sliding that one down maybe for 40% or 38, something like that.
Probably for a portrait image like this one, we can go for lower width as it's not going to be used
as a banner for our web design.
So let's get it all the way to 30%.
And now we have 440kB.
Now we can be also sacrificing quality for our image, reducing quality.
To get a lower file size.
We can go even more aggressive, reducing even more quality to 30% or so.
Now, as you can see, already got that image size all the way from 3.7MB to 70kB and it still looks
okay and nice.
And as you can see, we have to sacrifice quality sometimes to get a better performance for our web
design or even a slower file size that we can easily share via emails or upload to different websites
and also can be exporting more than a scale for our design or our image by clicking that plus in here.
So we have that one with full size, which is our new image size.
And also it can be generating half of that one or even maybe double of that size if you would like to
export more than a scale for the same image.
So maybe you can go for two X and also make sure while you're creating your design from scratch that
it has RGB color profile.
And if you didn't do that, don't worry guys, we have that one selected for us.
Convert to Srgb for color space if you're using Cmyk for instance.
And also if you would like to add copyrights to your image or contact info, you can be selecting that
one.
However, I'm not going to be doing that now and exporting all.
You can be creating a new folder.
Create.
Open.
Now.
Also, let's go quickly and discover save for web option going to file export, save for web.
We can be zooming out a bit and this is our optimized version.
We can be checking original image or to up to compare between both of them and we can see our original
image size was 15MB, maybe it was 15MB, not 3.7.
Why he said that, I don't know.
And after optimization, it's going to be 1.04MB or almost one megabyte.
And that's because we have a preset applied Jpeg high.
You can be selecting from any of these presets.
You can be selecting maybe Jpeg low if you want to go for an aggressive compression of your image or
medium for something in between and you have two presets for PNG files and we have also some presets
for Jeff.
If you want to use Jeff format, maybe for animation or vector files.
However, before we select another preset, we can be reducing file size as well or image size.
Here we have the dimensions for our image.
So we can get that 1 to 600 pixels and clicking in here Now we have a reduced image size.
However, we can go for Jpeg low for instance, to see how far we can get.
Now it's almost down from 15MB all the way to 42kB.
And even within your presets you can be controlling quality if you would like to reduce that one or
increase it, or if you would like to select from here instead of low, you have medium, high, very
high and maximum.
And also if you feel that you're getting some grains or noise within your image, you can be adding
some blur to your image to compensate for that or hide some of your grains and noise, maybe a bit of
it.
And always you can be zooming in back to check how it looks like and see the difference between your
original and optimized image.
And once you're done with that, you can be clicking save.
To save your image may be adding optimized.
Version and clicking save.
Here's one more trick for you guys.
If you would like to be exporting layers, you can easily do that.
But let's first go and open a PSD file, including some layers.
So go to file open recent.
I'm going to go with that one.
Mikey at We can be exporting only our guy in here.
So let's quickly select our guy.
That's the letter.
Here we have it.
We can be right clicking our layer and we have quick export as PNG file or you can be exporting as as
well.
Now we can be using that design element or that cool guy in here for a creative and interactive web
design.
So it can be reducing our file size by reducing image size.
And also it can be selecting smaller file, which will be reducing our image size from two megabytes
all the way to 511kB.
And also it can be reducing scale for our image as maybe that width will be too much for web design.
However, I'm going to be exporting that one as this clicking export all.
Save.
And that's basically, guys, how you can be optimizing your images and saving them for web.