Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
When you're editing a file in Elements Editor, in any of the workspaces, I think it's a good idea to save your master edited file in the PSD, or Photoshop document format, and you can see that PSD extension on this file, which has a couple of layers in it. But if I want to put this photo on the Web, I'm going to have to convert a copy of it to the JPEG format, because you can't put PSD files on the Web, and if I want to send this file by e-mail it's also a good idea to convert it to JPEG, which will give me, in most cases, a smaller file than the PSD.
Now, if I do want to create a JPEG copy of this file, I can do that by going to the File menu, and choosing Save, or Save As to open the Save As dialog box, and choosing JPEG as the format. But there's a better way to create a JPEG, and that is to use the Save for Web command, which often will get you a file that's smaller in file size, and will give you more control over the appearance of the JPEG copy that you're making. So I am going to Cancel out of the Save As dialog box, and instead, I will go to the File menu, and I'll choose Save for Web here in Elements Editor.
That opens the big Save for Web window, which is separate from the Editor, as you can see if I take its title bar, and move it around. Over on the left side of the Save for Web window, there is an abbreviated toolbar, with a Zoom tool that you can use to zoom in on an image, or if I hold the Alt key -- that's the Option key on a Mac -- and click with the Zoom tool, I'll zoom out. There is also a hand tool that I can use to move a large image around in this window, and there's an Eyedropper tool which I usually don't use with JPEGs. Over on the left, you can see a preview of my original PSD image.
That's there for comparison purposes. Over on the right, you can see a preview of a copy of this image, as it will appear with whatever optimization settings are chosen in the column on the right. These are just the default settings. We are going to change these in a moment. Before we do that, I want you to take a look at what's underneath the optimized preview. Here you can see the optimization settings that are affecting this preview, including the important file format setting, and under that, you can see an estimate of the file size of this image. That's an important parameter, because as you optimize an image here in Save for Web, what you're trying to do is get the file size down as small as you can, so that it's small to put on a Web site, or to send by e-mail, but to keep the appearance of the image to the level that you want it.
Beneath that is an estimate of how long it might take to upload this file to a Web site. You can really ignore this, because it's just a very rough estimate. Notice that the preview on the right has a bounding box around it, and that means that this preview will be affected by whatever settings I choose over here in the column on the right. I am going to start with this field: the Format field. Let's say that I'm preparing this image to upload to a Web site. In that case, it should be in the JPEG format, because that's one of the formats that a Web browser can recognize, and of these choices, it's usually the very best format for a photo, because JPEG does a good job of compressing the continuous tones in a photo.
So I will choose JPEG here. Keep your eye on the file size under the photo as I do this. You can see that it immediately was cut almost in half, down to 69.82 kilobytes. So that's a good start. Now I want to try to reduce that file size even further, without negatively impacting the appearance of the file. The best way to bring the file size of a JPEG down is to reduce its quality. I can either use the Quality presets over here on the left, or the Quality slider on the right. Now, keep your eye on this image as I change the compression quality to Low.
If you look closely, you can see some blocky areas here, and some discoloration up here. So I think the quality of this image just isn't up to par, at least for the way that I'd like it to look. But notice that the file size has been reduced substantially. Instead of Low, let me see what a quality of High will do with this image. Now the image looks a lot better, but the file size is a lot higher. So, I want to go somewhere in between. I will change the quality preset to Medium, and with Medium, I'm still not satisfied with the appearance, although I do like the file size. So what I am going to do now is come over to the Quality field, and I'm going to click and drag on the Quality slider bit by bit until I reach a compromise that I can live with, in terms of quality, and file size.
Now, I can't tell you what file size is acceptable. That depends on your ultimate goal for this file. There are a couple of other settings here that I can use to try to get the file size down. If I add a little bit of blur to the image, that will often reduce the file size. And it did in this case, but I want to make sure that the image isn't too blurry for my taste. So I'm actually going to back off on blur a bit, and go with that. I hardly ever check Progressive.
This would allow the file to come in progressively bit by bit into a viewer's Web browser, but I think most viewers have fast enough Internet connections that that's not necessary in this day and age. I usually do leave Optimized checked. As the tooltip says, checking Optimized will create smaller files, and I've never seen a situation where those files weren't compatible, so I'll leave that checked. Now, it's up to you whether you want to check Embed Color Profile. Notice that if I uncheck Embed Color Profile, the file size will get slightly smaller down here, but if I do check in Embed Color Profile, the file size goes up a bit.
If I'm preparing a JPEG to put on the Web, checking Embed Color Profile may not buy me anything in many situations, because many Web browsers still aren't color managed. But if I've gone through all of the color management steps that I laid out for you earlier in this course, and I think that my viewers might view this file in a color managed Web browser, then I will keep Embed Color Profile checked, especially where it only adds a few kilobytes to the file size, as it does here. Next I will come down to the size area. Reducing the actual dimensions of this file will have a big impact on the total file size of the file.
So, I will reduce the size to adjust the size that I need for my purposes. If I know that I'm putting this on a Web site where it needs to take up just, say, 250 pixels in width, then I will come to the Width field, and I'll type 250. The Height field automatically changes, because the width and height are linked here by default. Alternatively, I could just type a percentage by which to reduce the width and height of the file. So if I click here, right away the image looks smaller, and if I type a lower number here, and then press Enter or Return, that changes the size again.
So what I am doing is creating a copy of this file in the JPEG format, and that copy will have a width and height of 225 pixels each. There is one more option that I have here. If I want, I can preview how this file will look to my viewers in a Web browser. I can come down to the preview area, and if you see an icon for a Web browser here, you can just click Preview. Otherwise, click this arrow, and then click Edit List, which opens this browser window, and then you can click Find All to add to this list any browsers that you have on your computer system.
All of my browsers are already here, so I am just going to cancel out of here. Then I'll come to this menu, and I'll choose which browser I want to preview the image in. I'll go with my default Firefox browser, and I'll click Preview. That launches my browser, and shows me the file, with the optimization settings that I have chosen. Now, I think there still are some JPEG artifacts here, so I may go back and tweak those in Save for Web in just a moment. Notice that there is also some code, and some information here about the settings that I have chosen in Save for Web. You can ignore the code.
That's just the code that's being used to display this image here in my local Web browser. I am going to close my Web browser, and back in Save for Web, I might increase the Quality a bit to try to remove some of those JPEG artifacts. When I am all done here in the Save for Web window, if I click done, that will close the Save for Web window. It won't create a JPEG for me, but it will save these settings with my original file, so that the next time I open that file here, I'll have all these settings ready to go.
If I click Save, that will save a copy of my PSD file in the JPEG format. I will go ahead and click Save. That opens the Save Optimized As window, and here I will choose the destination for my JPEG. I am going to go to my Desktop. I will make a new folder there; I will call this folder optimized, I'll double-click the optimized folder, and I'll click Save. Now let's go out to the Desktop to see that saved JPEG copy of my original PSD file.
Here in my optimized folder, you can see my JPEG, and if I change this to show details, you can see that it is indeed a JPEG file. Now, keep in mind that when you optimize this JPEG, you end up with a flattened file; one that has no layers in it. But that's okay, because I still have my original PSD file with all its layers. So if I need to make another copy for a different purpose, I'll go back to that PSD file. But now I have a JPEG image that is as small as possible, and that retains an appearance that I am happy with.
Get unlimited access to all courses for just $25/month.Become a member
180 Video lessons · 65824 Viewers
64 Video lessons · 90225 Viewers
86 Video lessons · 58914 Viewers
148 Video lessons · 96514 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.