Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this movie, I'll introduce you to the Save for Web command, and I'll show you why it's ideally suited for saving images to the Web. Notice that I have opened two files from the 22 web folder. When you first opened them, very likely you'll get this error message telling you that some of the fonts are missing. That's just fine. That's not going to cause us any problems whatsoever because we're not going to be editing the text. Now, I made both of these files for my website, which is deke.com, to highlight my weekly video series called Deke's Techniques, which is produced by the people here at lynda.com.
And notice if you drop down to the Dock option here and click and hold on it, you'll see that these are very small images, both measuring 590 pixels wide, because that's as wide as a graphic can be on my site, and 200 pixels tall. So, they're dinky graphics, which is what you want for the web. But even when the file is flat, it adds up to 345.7K, then it gets to more than 600K with layers. But generally speaking, you don't want to post files that are bigger than 100K. Now, this is a continuous tone photograph, so the best file format is going to be JPEG, which applies lossy compression.
That is, it redraws the pixels inside the image in order to make the image as small as possible. One way to save a JPEG file is to go up to the File menu and choose the Save As command. And I could change the file as type to JPEG. And that's going to do a handful of things. It's going to throw away the layers, as you can see, so the Layers check box becomes dimmed, and As a Copy gets turned on. And what that means is that we're going to save a copy of the image, we're not going to save the original. The original file will still be a PSD document.
That's not where the problems come in. Where we run into problems is right here. Notice that the ICC Profile is set to Adobe RGB 1998. Adobe RGB is the best file format when working with RGB images inside Photoshop, and we'll be discussing that more in a future course. But it's not compatible with the Web because you're ultimately trying to save a screen image, and most screens out there are automatically calibrated to sRGB. Secondly, notice this thumbnail check box, I can't turn it off.
And even though you don't see it on the Mac, it is at work. You are saving a thumbnail along with the image, which makes the image file 20 to 30K larger for no reason, because the folks at your website are not going to see that thumbnail. So they're downloading information they don't need. I'll go ahead and click on the Save button in order to move ahead to the JPEG Options dialog box. And I'll change the quality just so we're comparing apples to apples here. I'll change the quality to High. And notice though, our file is going to be more than 86K. I just want you to remember that.
All right, I'm going to go ahead and cancel out because this is not the way we want to work. The way we want to work is to go up to the File menu and choose Save for Web. And that's going to bring up this big dialog box here, which allows us to dial in some settings and compare the two files. I'll go ahead and make the dialog box large enough to take up the entire screen like this. And you also want to switch from the Optimized tab to the 2-Up tab. So you can see the original at top here, weighing in at 461K, and you can see down here that the JPEG file is going to be 48K, not 86K like we're going to get from the Save As command, but 38K smaller, so that's a big savings.
Now, for you to see all this stuff, you'll need to make sure that this option up here is not set to GIF, but rather is set to JPEG. Notice the compression is High, just as it was inside the Save As dialog box. Also notice this check box right there, Convert to sRGB. You definitely want that turned on. Every time you save out a Web file, you want to make sure it gets converted to sRGB. That way, your colors will remain enforced because if you were to just post an Adobe RGB image on the web, then it would look drab and perhaps a little brighter as well.
Also notice this option, Metadata. It gets pared down to Copyright and Contact Info Only, but you can take it down to None if you like, so you can pare all the metadata out of the image. And also notice I can turn off the embedding of the color profile, we're really not going to need it. And that's going to take the file size down to below 48K, so I'm now at 47 and two-thirds. And that's how you use the Save for Web command which allows you to preview the compression. You can convert to sRGB, which is a universal color space for the web. It never embeds a thumbnail. And you can pare your metadata down to an absolute minimum in order to get the smallest file possible.
Get unlimited access to all courses for just $25/month.Become a member
120 Video lessons · 64728 Viewers
119 Video lessons · 71953 Viewers
125 Video lessons · 32567 Viewers
84 Video lessons · 19000 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.