Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
If you're planning on putting a photograph on a website, a blog or elsewhere online, it's important that you save the photo in the correct format, usually, the JPEG format, and make it as small as possible but with the kind of photo quality that you wanted to have, so that it's fast to download at the viewers end but on the other hand, so that it still looks good. And those two qualities, small file size on the one hand, and acceptable photo quality on the other, are always a trade-off when you're preparing an image for the web. Elements' Full Edit workspace provides a special interface where you can prepare an image for the web.
It's called the Save for Web workspace. To access that workspace, I'm going to go up to the File menu, after I finished editing my photo and go down to Save for Web. And that opens the photo here in the Save for Web window. On the left is the original photo and on the right is a copy of the photo optimized for the web with whatever settings happen to be over here at the moment. I can use these two views to compare the optimized version with the original, to make sure I'm not degrading the photo quality too much as I try to get the file size down.
Over on the right, the first setting that I'll look at is the format. When I'm working with a photograph, I'll usually want to save it in the JPEG format, which stands for Joint Photographic Experts Group. The most important setting for optimizing in the JPEG format is the Quality setting and there are two ways to change the quality here. One is to come to the Quality slider and just drag it to increase the quality amount but usually, I'll use the Presets over here. If I choose the Low preset, that sets a quality of only 10.
If I choose a Medium preset, I get a quality of 30. High is a quality of 60 and so on. Now the higher I make the quality, the less compressed the image will be when I save it in the JPEG format. And the less compressed that the image is the larger its file size will be and the file size is reported down here at the bottom left of the optimized view of the image. So notice the file size now with the quality of High, if I reduce that quality to Medium, the file size goes down but the trade-off is that the photo quality also goes down.
So that you can see that, I'll put the quality down at Low and you can start to see that the image is breaking up a little in the green area here of the door. It's showing what are called JPEG artifacts, which basically look like square groups of pixels. Now when I'm judging for JPEG artifacts, I want to be at 100% view of the image so that I see it the same way my viewers will when they look at it on a website. And viewing this image at 100%, I can see those artifacts here and over here around the black number.
They are most often visible in areas of high-contrast like this. But just so that you can see them better, I'm going to get the Zoom tool from the abbreviated toolbox on the top- left of the Save for Web window and I'm going to zoom in, in the optimized image so that you can see those squares more clearly. That's what I'm trying to avoid. To go back to 100% view, I'm going to double-click the Zoom tool and to eliminate some of those JPEG artifacts, I am going to increase the photo quality to Medium. If I still see some artifacts as I do here, I might go to the Quality slider and drag it over just a bit, putting it somewhere between medium and high quality.
Now I find the appearance of the photo is acceptable to me and the file size is okay too. But there is no magic number for file size that I can recommend. That depends on a lot of factors, many of which you can't control, like the speed of the Internet on a given day, or the number of other graphics that might be in the pipeline and it also depends on how important photo quality is to you. But just remember that file size is always a trade-off with photo quality when you're compressing a photo as a JPEG for the web. There are just a couple of other settings to look at over here.
One is the ICC Profile setting. ICC profiles are part of a color management system that I explained in an earlier movie on color settings. If you're interested in that subject, you can go back and listen to that movie. But in a nutshell, if you think your viewers will be using a web browser like Apple's Safari, which can read ICC profiles, then I suggest that you check ICC Profile here and that will attach a little bit of textual information to your photograph that will describe to the web browser at your viewers end, how you intended the colors in the image to look.
So, there will be more consistency between the colors that your viewer sees and the colors that you saw while preparing the image for the web, here in Photoshop Elements. However, if you do add an ICC Profile, it will increase the file size. In this case, it increased the file size by about 3 kilobytes. Sometimes that's not worth it if you think your viewers will be using a web browser that can't read ICC profiles. However, I think that in the future, we're going to see more web browsers that can read these profiles. So in general, I recommend that you include an ICC profile with your images for the web.
One more thing to show you in the controls over here is in the Image Size field. Let's say that I decide that 18 kilobytes is just too big and I need to get this file size down lower but I'm not willing to compromise anymore in photo quality. Then what I can do is to reduce the actual dimensions of the file in pixels. So I could come over to the Height field here, select the current height in pixels and type a lower number, say, 250 pixels. Because Constrain Proportions is checked, the width will be reduced proportionately.
Then to apply that change, I am going to click the Apply button. As I do, keep your eye on the file size down here and you see it would be reduced significantly. But at the same time the dimensions of the image are smaller too. So that's all I would do to set up this image for JPEG compression. If I didn't like the result and I wanted to go back to ground zero, I could move my mouse over the Cancel button, holding down the Option key and that would reset all of the settings in this window. But I actually like this result so I am going to click OK and that opens the Save Optimized As dialog box, saving the optimized version of the file in the JPEG format.
At this point, I would navigate to a destination where I wanted to save this file and click Save. So the next time that you're preparing files for the web, don't just go up to the File menu and choose Save As and save another copy as a JPEG. Instead, use the special controls and the previews that you'll find here in the Save for Web window to prepare your images for display on the web.
Get unlimited access to all courses for just $25/month.Become a member
164 Video lessons · 45235 Viewers
64 Video lessons · 83059 Viewers
86 Video lessons · 53268 Viewers
148 Video lessons · 90255 Viewers