Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
If you want to put your photographs on a website, it's important that you save them in the correct format and make them as small as possible so that they're fast to download it at the viewer's end. Elements Editor provides a special interface where you can do just that. It's called the Save For Web workspace. I'm working with greendoor.jpg, from the 13_05_web subfolder in the chapter13 exercise files. When I'm ready to save this file, I'll go to the File menu at the top of the screen and I'll choose, not Save or Save As, but rather Save For Web. That's opens the Save For Web workspace. Here on the left I can see the original version of my image, and on the right I can see how the image will look with the compression settings on the right side of the screen applied to it. I can compare these two as I prepare the image for the web. To do that I'm going to move to the controls on the right side of the workspace and the first and most important one is right here.
I need to choose the format for this file, because it's a photograph, the best format is JPEG, which stands for Joint Photographic Experts Group. It's a special format for compressing photographs. When you're working with a JPEG, the most important setting is right here, the Quality setting. This setting governs how compressed the image will be and how good it will look. This setting controls how much compression will be applied to the photo. The more compression, the smaller the photo will be, the less compression the bigger it will be, but the better it will look.
I'm going to get the Zoom tool from the left side of the Save For Web workspace and I'm going to use that to zoom in to this green door as I change the Compression settings. So you'll see the results as I change the Quality settings here. First I'm going to try Low quality. That gives me a really small file size of only a little over 9 kilobytes. But if you look at the image, it has lots of artifacts in it that make it not look very good. So I'm going to go back to the controls and see how the image looks with a Medium quality setting. Some of those artifacts are gone. But I think I have to get rid of a few more. So I'll try a High setting. Now the image looks fine, but if you look at the file size it's gone up to 26 kilobytes.
If I want to try to get that down a little bit, I'll go to the Quality slider here, click and move the slider down just a bit to set the quality somewhere between medium and high. I'll try around 50, and that looks good to me and it has brought the file size down a bit to 23 kilobytes. Now there is no magic number about how big your files can be. That depends on how many photos you have on a page and what kind of Internet connection you expect your viewers will have and other factors. But I'm happy with this number for this particular file and so I'm going to click to close that slider.
I'm going to leave all the other settings at their defaults. I'll mention the ICC profile setting, which I usually leave unchecked. ICC profiles are part of a color management system that I described in another movie on color management. When I'm preparing files for the web, I usually don't include an ICC profile, because many web browsers can't read them anyway in which case they wouldn't have the intended effect of helping the colors in the file that my viewers see match the colors that I'm seeing here as I work in Elements.
Also, ICC profiles increase the file size a bit and as we just saw our goal when creating an image for the web is to keep it as small as possible. If I did need to make this file smaller, the only other control here is Image Size. If I change the dimensions of the file to make them physically smaller, then the file will also get smaller in file size. But I'm going to leave this as is for now and go up to the OK button at the top of the screen. I'll save the file to the desktop by clicking Save.
The next time that you're preparing your files for the web, don't just go to File > Save As and save another copy as a JPEG. Instead, use the Save For Web workspace to make your file look as good as it can, and be as small as it can be on your website.
Get unlimited access to all courses for just $25/month.Become a member
180 Video lessons · 75572 Viewers
64 Video lessons · 94349 Viewers
86 Video lessons · 61881 Viewers
103 Video lessons · 31153 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.