Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this movie, I'll show you how to use the Save for Web feature to create the perfect JPEG image. Notice that the top image is open, the one with the continuous tone photograph in the background. And any time you have photographs inside your Web images, you're going to want to save a JPEG file. So I'll go up to the File menu, and choose the Save for Web command. And I already have the two-up display selected, so I'm seeing the uncompressed image at top, and the compressed image down below. I'll make sure that my file format is set to JPEG, and then, just to give you a sense of what's going on.
I'm going to switch the Quality setting to low, which is going to to result in just about the lowest quality image possible. And now I'll zoom in on my images by pressing control-plus, or command-plus on a Mac. And notice when I drag inside the image, I pan both images at the same time. So you're always comparing apples to apples, inside this window. Now notice up above we have very crisp detail associated with this admittedly low resolution shot. You can also see how crisp and clear the text is.
Whereas down below in the compressed version of the image we have some very rough detail indeed. And we have all sorts of rough pixelation occurring around the text. And that's what's known as jpeg artifacts, by the way. The little weirdnesses that jpeg creates in the course of compressing the image. Now the good news is we're taking a 461 k file And we're compressing it down to sixteen K, but it's not really worth going that far. So you're better off going either with medium, if you can get away with it, which sometimes you can.
In the case of this image I wouldn't do it however, because I have text, or high, which is the default setting. In our case, it ends up doing a pretty darn good job. Now for special graphics, you may occasionally want to set the quality to very high. That's about the highest I ever go, when creating web graphics, however, because you want to make sure that they're easily downloadable, and that they don't keep people waiting. And at 79K this graphic isn't going to necessarily display instantaneously, especially on slower connections.
If you want to get a sense of just how long a consumer of your website is going to have to wait for the image to download then click on this little flyout menu icon and choose one of the download speeds. And you can safely bet that the slowest download speed is going to be around 256K. Probably much faster than that, but let's go ahead and check it out here. If somebody has a very slow connection indeed, why then the image is going to take 4 seconds to download. That's not necessarily good news, but that is a very slow connection.
More likelys are going to have 1 meg or better, in which case we can see that the image is going to take 2 seconds. Which in my opinion is still too long and that's why I'm going to set the quality back to high which gets us down to one second. Now the other options you don't have to worry about too much. Progressive leave that turned off, otherwise the image will appear in three passes. Rough at first, better and then better still, you don't need that these days and it tends to look amateurish. Optimize goes ahead and applies some Lassos compression to the file.
That makes things smaller so you do want it turned on. You don't necessarily need a color profile and if you turn Embed Color Profile off, you're going to shave this guy down by about a K, which does make for a more expedient file. The thing is that most browsers don't support color profiles and most people screens aren't calibrated so it's not really doing you any good. The quality number is linked to the quality setting over here on the left hand side, so they change together, but you can modify that value if you like. You can take it down as low as zero in order to create a very bad quality image as you're seeing here, and you can take it as high as 100, which gives you a lovely file.
But, again, a very large file as well, which is why I'm going to reset things to high, which results in a quality setting of 60. The blur value, if you blur your image, you'll make it smaller. Notice if I take the Blur value up to 2, let's say, then I end up taking that file size down to 19k, and that's because whatever the the quality setting, JPEG is capable of compressing blurry detail better than sharp detail. But you don't want your images looking like this under any circumstances, so leave that value alone.
And then Matte is going to fill in transparent portions of the image with the matte color. Again, not an issue where this file is concerned. As I was mentioning in the previous movie, you want to make sure that convert to srgb is turned on. And then, once you come up with a file that you like, that's a good size. Go ahead and click on the Save button. And notice that Photoshop goes ahead and automatically names your image. Based on the original file name. But it replaces the spaces with hyphens and it generally gets rid of any characters that might be illegal on other platforms.
Now, in our case we're saving the image only, there's no HTML to save or anything like that, so all you need to do is click the Save button in order to save your layer PSD file as a flat and efficient JPEG. And that's how you save an ideal, efficient JPEG image using the Save for Web command here inside Photoshop.
Get unlimited access to all courses for just $25/month.Become a member
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.