Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
If you want to display your photographs on the Web, you need to convert them into a format that a Web browser can read and display. You'll usually want to make them much smaller than if you were preparing them for print. To convert images for use on the Web, you'll go to the File menu and you go down to Save for Web & Devices. That opens this separate interface , the Save for Web & Devices window. When the window first opens, you see an Optimized preview of your photo here. That means a preview of the photo as it will appear with the settings over here on the right-hand side.
If you prefer, you can look at the photo in 2-Up view, which shows you your original PSD file, which is a non-web format, as compared to the one that you're going to be optimizing for the Web. You can even view your images in 4-Up tabs and then click in any one and drag and then you could setup each one of these frames with different settings and compare their appearance against their size. In each frame you see the size over here in the bottom left corner. For this lesson I'm going to go back to the Optimized view, just because it lets us see the image better.
I'm going to go over to the controls and I'll make here the major change that I would make whenever I'm optimizing a photo for the Web. And that is to make sure that this format field is set to JPEG, rather than GIF or PNG. GIF or PNG are used for optimizing graphics; JPEG for photographs. The main option that affects how small a JPEG will be. And how good it looks is this control right here, which is the Quality control. In this menu there are some quality presets. I'd start with Low just to see what it does to the image.
And notice over here this is a Quality of 10. The image looks really bad. These blurry squares here are called JPEG artifacts. To avoid those I'm going to change the quality preset to Medium. And I think that looks a lot better. I've now put the Quality up to 30. Now notice that the file size is now 17.23 kilobytes. If I go to the preset menu again and try High, the size of the file goes way up, and more than doubles, up to 38 kilobytes.
So I want the image to look a little better that it looks at Medium, but certainly not bring it all the way to High, because the file gets too big. So I'll go back to Medium and I might just increase the Quality a bit. I'll try 40. I think that looks okay. The file size is now respectable 20 kilobytes. And there is no magic number for the file size of a particular photo. That just depends on how many photos you have on the page and the speed of the Web connection that your viewer is likely to have. Some of these other settings can be useful, but they don't make much of a difference for most photos.
So I'm just going to leave them at their defaults. In Photoshop CS4, the default behavior is to convert an image for the Web to sRGB in order to control the appearance of the colors as they'll look on most people's monitors. Another new thing in Photoshop CS4 is this Metadata menu. From here I can decide to add no metadata, in other words no file information, or just information about copyright, copyright and contact info, or more information to this file. Copyright and Contact Info is the default.
I'm going to limit this to copyright information and that's the information that in Photoshop proper I added in the File > File Info dialog box. I like to keep the amount of metadata to a minimum in the files I'm preparing for the Web, because every little bit can make the file bigger. When I'm satisfied with both the appearance of the image and its file size I can click Done to close the original PSD file, while making these settings sticky for the file, or I'll click Save. That opens the Save Optimized As dialog box.
As you can see here it's going to save a copy of the image in the JPEG format. I'll save that at on my Desktop. I'm going to save it with Images Only, rather than with HTML as well. And I'll just click Save. This is the original PSD file. I no longer need to keep this one open so I can close it. And I don't need to save it and if I go out to my desktop, pool1.jpg is the optimized photo that I just created for the Web.
When you're preparing your own photos for the Web, do use the Save for Web & Devices window to make your photos as small as they possibly can be while retaining the appearance that you want them to have.
Get unlimited access to all courses for just $25/month.Become a member
180 Video lessons · 77017 Viewers
64 Video lessons · 94848 Viewers
86 Video lessons · 62232 Viewers
103 Video lessons · 31671 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.