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 open 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 doc option here and click and hold on i 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, and 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 > Save As. And I can 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 checkbox 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. 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 checkbox.
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 that 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 > 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 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 were 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 checkbox right there, confer to sRGB. You definitely want that turned on. Every time you save out of web file, you want to make sure it gets converted to sRGB.
That way your colors will remain in force 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 then 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. I'm 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 the universal color space for the web. It never embeds a thumbnail. And you compare 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
117 Video lessons · 42824 Viewers
119 Video lessons · 54181 Viewers
65 Video lessons · 14439 Viewers
113 Video lessons · 82865 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.
Your file was successfully uploaded.