Join Jan Kabili for an in-depth discussion in this video Optimizing photos as JPEGs, part of Photoshop CS5 for the Web.
JPEG is the best file format in which to optimize a photograph for the web. Your goal when optimizing a JPEG is to make it as small as possible, but still retain good photo quality. This photo has been saved as a .psd, or Photoshop document file, which is not a web-ready format. To convert a copy of it so that it will display on the web, and optimize that copy for fast display, I will open it in the Save for Web & Devices window. My Save for Web & Devices window happened open to its 4-Up view, but I could work in the 2-Up view, or in the Optimized view, alternatively.
I am going to go back to the 4-Up view. Here, the original PSD file is displayed in the top-left area, and the other three areas display previews of how the file will look with different combinations of optimization settings, and the optimization settings are over here on the right. The settings that I choose here on the right will affect only the selected preview. Right now, this top-right preview is selected, and I can see that because it has this blue border around it. The current format of each preview is displayed at the bottom left of each one, here and here and here.
And as you can see, these all happened to be set to GIF right now. Photographs usually don't look very good when they are optimized in the GIF format, as you can see. Look at the banding in the sky here and dithering in the sky in this version. The reason photographs don't look good as GIFs is that GIFs allow only a limited number of colors, up to a maximum of 256 colors, and photographs are made up of millions of colors. So when you are optimizing a photograph, it's almost always best to set its format to JPEG.
To do that, I will go up to the Format menu here, and change it from GIF to JPEG. As soon as I did that, the selected preview started looking a lot better, particularly as compared to the other GIF previews. But I am not only interested in the appearance of the photograph, also its file size. I see, under the selected preview, that the file size is larger than I would like it to be. It's currently over 64 kilobytes. So my job is going to be to try to get the file size down, while retaining acceptable image quality, and the main way to do that to a JPEG, in Photoshop, is to vary the good quality level.
The lower the quality, which you can see reported here, the more the amount of compression that will be applied to this JPEG. And the more the amount of compression, the smaller the file size will be. But if I go too far, reducing the quality by compressing the image more will also reduce the photo quality. The current quality setting of 60 is relatively high on a scale of 0 to 100, so I would like to compare how this image looks with a couple of other JPEGs with lower quality settings.
A quick way to set all of the previews to JPEG is to go up to the Optimize menu at the top-right of this window and choose Repopulate Views from there. Now the bottom right quadrant is set to 15 quality, which is a low quality. If you look closely at that, you can see that there are some marks around the high contrast edges. I will zoom in so you can see that better, by holding down the Command key on the Mac, the Ctrl key on a PC, and clicking and dragging out a marquee. So now you really can see those marks around the high contrast edges, and you also can see that there are blocks of color in the tree here.
Both of those are called artifacts, and I really think that those artifacts are too pronounced to accept the quality of 15. So I am going to take a look over here at this preview, which is set to a medium quality of 30. I still see some JPEG artifacts, but they're not as pronounced as in the low quality image. So what this comparison has done for me is tell me that I want my quality to be somewhat higher than 30, but I don't need it to be as high as 60, where the file size is too large for my taste.
I am going to zoom back to 100% for a more realistic view. A shortcut for doing that is to come to the toolbox and double-click the Zoom tool, and that zooms all of the previews back to 100%. I am going to click off the Zoom tool to another tool, so that when I click on the top-right quadrant to select that preview again, I don't end up zooming back in. To fine-tune the quality setting of this top-right preview, I am going to go over to the quality menu, and I can click there and just type a number, or I can click the double pointed arrow, which brings up this slider.
I will drag this slider to the left slightly, putting it somewhere between 30 and 60. I will try 50. At 50, the image still looks good, and I have reduced the file size a bit. I could play around with this slider some more, but I am going to leave it here for now. By the way, another way to set quality is to go to this Preset menu here and choose Low, Medium, High, etcetera. But if I want to fine-tune that number, I will use the Quality slider as I just did. So what else can I do to make the file size a little smaller? I can try adding a little bit of blur to this preview, because a blurry JPEG compresses better than a sharp one.
I will click the areas to the right of the Blur field, and I will drag slightly to the right. No I don't want to go too far, like this, because I end up with an overly blurry image. So I usually use a light hand with the Blur slider. I think in this case I am going to put it to .2, and then I will click to close the slider. The image is still looking good, and I've managed to reduce the file size another 2 kilobytes or so. Another thing that reduces file size is keeping the Optimized check box checked. So as I uncheck this, notice that the file size increases slightly, and if I keep it checked, the file size remains a bit lower.
I am going to leave the color management settings here at their defaults. To learn more about those, you can view the movie on color management in chapter one. You will notice that if I uncheck Embed Color Profile, the file size is reduced by about 3 kilobytes. I like to embed a color profile to make sure that the colors that I am seeing here in Photoshop are similar to those that my viewers will see out on the web. I am going to address this Metadata setting in a separate movie later in this chapter, and I don't have to worry about the Color Table, because there is no Color Table to deal with when I am optimizing as JPEG.
The Color Table only comes into play with GIFs and PNGs, as you will see in later movies in this chapter. There is only one more thing that I could in this window to reduce file size, and that would be to reduce the width and height of the image, but many times I can't do that because I need to optimize to particular dimensions to fit my web design. If I do need to get the file size down lower, I could cancel out of this dialog box and go back into Photoshop to reduce the contrast and/or the saturation of the original image, because images with low contrast and low saturation tend to compress to a lower file size as a JPEG.
So to do that, I am going to click the Done button, and here in Photoshop, I will add an adjustment layer to reduce contrast. I will go to the Brightness Contrast Adjustment, and I will drag the Contrast slider down. I will put this at about maybe -25. I think the image still looks good at that contrast level. Then I will click this green arrow, to go back to the adjustment icons, and I am going to select the Hue/Saturation icon. Here, in the Hue/Saturation controls, I will lower the saturation slightly, maybe to about -15.
I would like to look at the image like that, and notice in the Layers panel there are two new adjustment layers that are doing the job of reducing saturation and reducing contrast. I like to use adjustment layers to make adjustments like this, rather than direct adjustments, because adjustment layers remain editable, and they don't permanently change the pixels on the photograph on its layer. Now I am going to go back to the Save for Web & Devices window and see if that has saved me any file size, and it has.
Now my JPEG is down to just over 44 kilobytes. I am satisfied with that, but there may be a time when I need to bring my file size down lower, and I know exactly the number to which I need to bring it. So let's say I need this file to be, say, 36 kilobytes. In that case, I can go back to this Optimize menu, and from here choose Optimize to File Size, and in this dialog box, I can change the desired file size to the number that I need, say 36 kilobytes, and click OK.
And that brings my file size down where I need it. I think the image looks okay, not as good as it did a few minutes ago, but acceptable, and you can see that the quality setting has changed, as well. Now it's down to 40. Now that I am satisfied with my optimization settings, I will save the file by clicking the Save button, and in the Save Optimized As dialog box, I will choose the location to which I want to save, in this case to my Desktop. I will make sure that format is set to images only, and I will take a look at the name of the file, which comes from the original file, and on which there is now a JPEG extension, and then I will click Save.
Out on my desktop, I can see the copy of the file that I have created as a JPEG. I will open that in Photoshop by double-clicking it, and notice that the original PSD file is open, as well. To see both these files together, I will go up to the Arrange Documents menu, and I will click 2-Up tab. The original PSD photo is on the left, and the optimized JPEG is on the right. I think the quality of the JPEG is fine. It's not as perfect as the original, but I did realize a significant file saving by compressing the photo to a JPEG format with the settings that I chose.
One more thing that I would like to do here is to go back to the Photoshop copy of the file and save it with those two additional adjustment layers, so that it reflects the changes that I have made to the JPEG. Then in the future, if I ever need to make any additional changes to the image, I will come back to the PSD copy and make my changes there, and then reoptimize as a JPEG. So I will click on the tab of the Photoshop document, and I will choose File > Save. One last thing: You may be wondering why I didn't just save a copy of this photo as a JPEG from the File > Save, or the File > Save As command.
The reason is that those commands usually result in much larger files than I can out of the Save for Web & Devices window, and they don't offer the comparative views that I can see there. So whenever you are optimizing a photograph, or sometimes a graphic, that has glows or gradients or drop shadows, or other effects made up of continuous tones, try out the techniques that I have shown you here to get a JPEG that's relatively low in file size and still looks great.
- Customizing a web workspace
- Coloring web graphics
- Optimizing images as JPEG, GIF, or PNG files
- Creating background graphics for sites
- Working with transparency
- Building navigation bars, buttons, and rollover graphics
- Designing web page mock-ups
- Adding animation
- Automating web-related tasks in Photoshop
- Integrating with the rest of the Adobe Creative Suite