Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
If you're planning to put a photograph on a website, a blog or elsewhere online, it's important that you save it in the correct format and make it as small as possible so that it's fast to download at the viewers end. Elements' Editor provides a special interface where you can do just that. It's the Save for Web workspace. So say that I have edited this file and I'm ready to save it so that I can put it on the web. I'll go up to the File menu and instead of choosing Save or Save As, I'll choose Save for Web.
That opens the Save for Web workspace. Here on the left side of this workspace, I can see the original photo and over on the right, I can see how the photo will look with the compression settings way over here in the right-hand column. As I vary those compression settings, the preview here on the right will change, and down at the bottom left of the preview is a report of the file size, which will also change as I change the Compression Settings. There is also an estimate of how long the file would take to download at a particular size but I'd suggest do not pay attention to those numbers because they depend on so many factors that you just can't control about what's going on, on the Internet on a particular day and what kind of web browser your viewers are using, so that's really not an accurate report.
The first thing I'll do in the Save for Web workspace is go to the Format field right here and click the arrow and choose the Format in which I want to save this file. Because this is a photograph, the best choice is JPEG, which stands for Joint Photographic Experts Group. JPEG is a format that's made especially for compressing photographs. When I'm working with JPEG format, the most important setting is the Quality setting, which I can control from this slider or from the Presets here in this menu.
I am going to start with the Presets. I'll see how the image looks with a low quality setting by choosing Low from this menu. A low quality setting means that there is lots of compression. The more I compress the photo, the smaller the file size will be but the photo probably won't look its best. The less I compress the photo, the bigger the file size will be but the better the photo will look. I am going to zoom in a little so you can get a better view of the photo quality, by selecting the Zoom tool from the left side of the Save for Web window, and then clicking inside of the Optimize Preview on the right.
Now you can see that there are some artifacts here, which are consequence of compressing in the JPEG format. In order to try to reduce those artifacts, I'll go back to the Quality Preset menu and I'll choose Medium. I think the file may be acceptable looking here. Notice that down in the file size area I'm told that I have a 13.35K file and before I accept these settings, I'm going to just see how the file looks and what the size is with a High preset. Now the image looks good but the file size is really increased to 26.09K.
If I want to get the file size down and still have the image look good, I'll go to the Quality menu and click the arrow there and then I'm going to drag the slider slightly to the left. Maybe I'll put it at about 50, which is in between the medium and high quality presets, and then I'll click in a blank area here to close that slider. Now it managed to reduce the file size to 19.47K and I think that the image looks good even zoomed in like this. I'll zoom back out by holding the Alt key on my keyboard and clicking a couple of times, until the image is back to 100% as reported right down here in the zoom field.
I'm happy with the appearance and with the file size. So I'll stick with that quality decision. I'm going to leave all the other settings at their defaults but I do want to mention this one, ICC Profile. ICC Profiles are part of Elements Color Management System. I've touched on Color Management in earlier movies. This is just another piece of managing color in your files. If you think that your viewers will be using a web browser like Safari, for example, that can read an ICC Profile, then you might want to check this box, but notice that when I check this box, the file size does go up.
It was around 19 kilobytes and now it's over 22 kilobytes. So if you think your viewers are likely to be using a color managed web browser and you can accommodate the increased file size, then you may want to leave this ICC Profile box checked, and more and more web browsers are able to read color profiles as time goes on. So I'm going to leave that box checked for now, and there is one more area here that I want to bring to your attention and that is the Image Size area here. If you really need to get your file size down, the only other way to do it here in the Save for Web window is to reduce the physical dimensions of the file.
So let's say that I came to the Width field and typed in 300 pixels instead of 306, which is just a slight change in file size and by the way, the Height changes proportionally because Constrain Proportions is checked, and then I click the Apply button. I have reduced the file size slightly, along with the physical dimensions of the file. There is a Preview area down here which I can use to preview the file in whatever web browser is on my computer but I'm just going to go ahead and save it with these settings for now by clicking OK.
In a Save Optimized As dialog box, I'll choose a location. I'll just leave it at the default. I'll make sure the file has the name that I wanted to have and then I'll make sure that Save as type is set to Images Only and I'll click Save. That takes me back to the Editor, where I have my original photo. Since I haven't made any additional changes to the original, I can just close that by clicking the X and I don't want to save that, but if I had made more changes to the original, I would be sure to save it with those changes at that point.
So the next time that you are preparing a photograph for the web, don't just go to File > Save As and save it as a JPEG from there. Instead I suggest you use the Save for Web workspace to make your photo look as good as it can be and be as small as it can be for online viewing.
Get unlimited access to all courses for just $25/month.Become a member
180 Video lessons · 69829 Viewers
64 Video lessons · 91850 Viewers
86 Video lessons · 60146 Viewers
103 Video lessons · 28813 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.