Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this exercise, we're going to begin the process of saving this photograph as a Web-ready JPEG image. The name of the photo is 1770x780 photo. tif found inside the 12_for_Web folder. I'm going to the File menu and choose Save for Web & Devices or press Ctrl+Shift+Alt+S, Command+ Shift+Option+S on the Mac. That brings up the big, old Save for Web dialog box, which is scalable, incidentally. You can drag an edge to make it even bigger, if you want to. We're not going to do anything with the Image Size options, because we already have our image scaled the way we want it.
Now, I want you to notice for a moment that we have these tabs up here in the upper-left corner of the dialog box, starting with Original going to Optimized, 2-Up and 4-Up. Right now, Optimized is selected as, by default, meaning that you are actually seeing the results of whatever compression settings you are applying. We'll come back to those in a moment, but that means this is a preview of what your graphic is going to look like on the Web. Now, if you want to see what it looked like before, you could click on Original. That's going to appear to sap color out of the image. If you actually compare it to your original in the background, they don't look the same at all.
The original in the background looks much better than the Original here inside Save for Web & Devices. You may wonder why in the world is that. That's because you're converting the image to sRGB. So if you had not performed the conversion, which is what it's showing you right here, and you just set an Adobe RGB image out there, then it would not get that extra boost of saturation that it gets inside of Photoshop, because you're working in that wonderful warm environment. Instead, it would look all drab and dreary in a standard Web browser. That's why it's very important that you have Convert to sRGB turned on.
That is why your optimized graphic is going to look better because those colors get boosted during the conversion to sRGB, so that they'll survive output on the Internet. Now, Convert to RGB does not in any way, shape, or form, insure consistent color from one monitor to another. There's no way to do that. This is as close as you're going to come, but that's still pretty distant. You can expect things to look different on different screens. That's just life in the Wild West world of the Web. Okay, so what I'd like you to do is switch to 4-Up, so that we can see the original version of the image as well as three different optimized versions.
I'm going to scroll over to a location that's going to give us a sense of how these different file formats perform. I'll go ahead and zoom, and all you have to do is press-and-hold the Ctrl key, or the Command key on the Mac to get access to the Zoom tool. All right! So, as I said, this is the original, notice that we have no options for the original image. We have to click on one of the optimized versions in order to gain access to options. I'm going to leave this guy set to JPEG, because that's what we're going to want for a continuous tone image like this here. But I just want you to see why GIF is not the file format for us.
I'm going to switch from JPEG to GIF. You'll see that we have a bunch of dithering. I'll go ahead and zoom in. That little dot pattern, which is known as a Diffusion Dither, is designed to stimulate more colors than you're actually using. This is your Color Table. So, in other words, these are all the colors that exist inside of this image. That's it. You are limited to 256. Fortunately, Photoshop is doing a good job of automatically figuring out what those colors should be. You can reduce the number of colors if you want to.
I could send it down to 128 to make that Dither even more pronounced, if I so desired, and to drop the file size as well. But notice that the JPEG image, at a High Quality setting, and we'll come back to that in a moment, is delivering a predicted file size of 489K, whereas GIF, with only 128 colors is delivering a file size of 903K, so almost a megabyte, so much bigger. I need to have to take those colors down to say 24 and turn down the Dither, because Dither actually adds to file size.
So you could crank this Dither down to 20%. Notice we're getting some pretty harsh color transitions now. We're still at 628K. So, we're still larger than the JPEG image. Now, switch over to the final optimized image by clicking on it. Let's go ahead and switch this one to PNG-24. PNG-24 is a file format that applies lossless compression only. So it's ostensibly the best thing going. PNG-24 delivers 16.8 million colors, the 24 means 24-bit, by the way, so 8 bits of data per channel, that's where the 16.8 million colors come from.
It applies just lossless compression. So it's the best file format going for retaining high-quality images, but it also generates large image files. Notice this one would be 2.7 megabites, much larger than 489K. So for our purposes, and I would say 99% of the time that you're outputting photographic images, your best bet is going to be JPEG. I'll show you how to apply the most desirable JPEG settings in the next exercise.
Get unlimited access to all courses for just $25/month.Become a member
120 Video lessons · 58278 Viewers
119 Video lessons · 67563 Viewers
84 Video lessons · 16853 Viewers
125 Video lessons · 29749 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.