Saving images for the web

show more Saving images for the web provides you with in-depth training on Photography. Taught by Jan Kabili as part of the Photoshop Elements 9 Essential Training show less
please wait ...

Saving images for the web

When you are getting a photo ready to post online on a web site, a blog or photo sharing service, you want it to look its best but you also want it to be fast to download. You'll often have to resize the photo to fit it into a particular space or to meet the requirements of the site to which you are posting. The Save For Web window is a special workspace where you can get all that done in one place with the most control over the result. Here, in the editor I have an image open and I'd like to prepare it for the web. So I'll go up to the File menu and I'll choose Save For Web.

That opens the Save For Web dialog box. Let's take a quick tour of this interface. Over on the top left there's an abbreviated toolbox with a Hand tool and a Zoom tool and Eyedropper tool and a foreground color box. On the left, is a preview of the original image; the PSD that I opened and on the right of how the image will look optimized for the web with whatever setting I've chosen over here in the column on the right. You can use these two views to compare the appearance of the optimized image with the original.

Now, there's important information at the bottom left of the optimized version of the image. Here, you can see the file size of the optimized version with the settings that are chosen over on the right. As you choose settings on the right, you want to keep your eye on this number as well as on the appearance of the optimized version of the image. As the file size goes down here, the image quality will decrease too. So, it's always a compromise between file size and photo-quality. The real action in this window is over on the right in the optimize settings.

Let's walk through these settings for optimizing a photograph. First, I'm going to choose the format. The default format here GIF is not a good format for optimizing photographs because GIFs only have a limited number of colors. Photographs are continuous tone images with lots of colors in them. So, a photograph will look better and compress smaller in the JPEG format. So, I am going to set that field to JPEG and those changes out all the rest of the fields. The most important setting for optimizing a JPEG is the quality setting.

To change the quality setting, I can either click this slider and drag or I can come over to this menu and choose Low, Medium, or High and that will just set the Quality slider to a specific number. So, I'll start with Medium and that sets the Quality to 30. As I decrease the Quality, the file size is going to go down and you can see down here underneath the JPEG preview that it's gone down significantly already to 24.32 KB. But the danger is that the quality of the image will decrease too.

To check for the JPEG quality, I need to view it at 100%. So, I'll go over to the toolbar and I am going to double-click on the Zoom tool. When the preview is at 100%, I can be assured that the image looks to me like it will to those who are going to view it on the web. I'm going to reduce the JPEG quality and then I am going to zoom in even further. Now, I'm just doing this so that you can see on the video that there are now these squares of color around the high contrast edges. These are artifacts of compressing the file in the JPEG format and these are what I'm trying to avoid as I work on the quality.

So I am going to come over and increase the Quality back to Medium and that does reduce those JPEG artifacts. I'll go back to 100% percent view by double-clicking the Zoom tool. Now, there is no magic number that I can recommend for the file size of any one photograph for the web. That depends on lots of things like the number of images that you are going to be putting on the same web page and the speed of your particular viewer's web connection. But in general, if I'm looking for a number I'll say that I try to keep each image under 50 kB and that number has served me well.

There are more settings to take a look at over here on the right. Progressive, is no longer necessary, that was used back when Internet connections are really slow to allow the image to come in progressively. So, I am going to leave that unchecked. I am going to check ICC Profile. If you listened to the earlier movie on color management you know that ICC Profiles are an integral part of the color management system whose purpose is to achieve consistency in the colors, in the photo that you see here in Elements and the colors that your viewers see in the photo when it's done on the web.

As I explain in that movie, this is accomplished by attaching ICC profiles; little bits of information that describe the way that you attend tend0420 the colors in an image to look. Now, in the past most web browsers couldn't read ICC Profiles but as time goes on more and more browsers are being developed that can read these profiles. So, I usually do check ICC Profile here, and that will include a small bit of information in the optimized file. That will increase file size slightly and you can see down here that that has added about another 3 kB to this file.

But I think it's worth it in order to make the colors look good at least when the files are viewed through a color managed browser at the recipients end. There is one more area to take a look at here and that's the image size area. Sometimes, you have to size a photo to a particular size that's dictated by the rules of the online service or by the web developer or for some other reason. If you do know the width and height to which you need to size an image; you can type in here in the width and height fields. So, if I know that this image can't be any wider than 400 pixels, I'll type that in the Width field and the Height will change proportionately because I have constrain proportions checked which is the default.

Then I click Apply and notice that the file size has gone down quite a bit, over 10 kB. So reducing the Width and Height in pixels of an image will make its file size smaller without sacrificing photo-quality. When I am all done optimizing this file from it's original PSD format where it was 352 kB to it's JPEG format where it's only 16.73 kB and still looks I think pretty good. I'll go up here and click OK, that opens the Save Optimized As dialog box and here I can choose a place to save the file and I'll also go down to the Save As type or Format menu and make sure that that set to save images only.

I don't have to worry about saving over the original because this file is going to be a JPEG and the original in my case was a PSD file. So, I'll just click Save and now I have an optimize JPEG ready to post on the web or upload to Facebook or send by e-mail. Now, what if you're not optimizing a photo for the web but rather some flat art like a web button or a logo. In that case, you probably use a different format like GIF or PNG which offer different settings in the Save for Web dialog box than those I just showed you.

But when you do need to optimize a photograph for the web, JPEG is the way to go and Save for Web is the way to get there.

Saving images for the web
Video duration: 6m 48s 11h 20m Beginner


Saving images for the web provides you with in-depth training on Photography. Taught by Jan Kabili as part of the Photoshop Elements 9 Essential Training

Photoshop Elements
please wait ...