Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this exercise, I want to introduce you to the basic three file formats for Web images. Then I want to give you a sense for why we do things the way we do here inside Photoshop. I've saved my changes as Desaturated shadows.psd found inside the 12_for_Web folder. Let's say you figured this image. It was right ready to go. You just want to go ahead and export it for the Web. Why then you could go to the File menu and choose the Save As command or press Ctrl+Shift+S, Command+Shift+S on the Mac. And it does offer access to all the file formats you need, and they are these, starting with CompuServe GIF.
By the way, some folks call it GIF with a hard G, which is perfectly fine. But the folks who originally created the format called it GIF like the peanut butter, even though they decide to spell it with a G for Graphic Interchange Format. GIF is okey-dokey for low color graphics. It offers at most 256 colors and that's it. So these days, it best accommodates high contrast art. Better for a continuous tone photograph like what we have here is the JPEG File Format, which is universally compatible, support 16.8 million colors.
Even though it does go ahead and introduce lossy compression, meaning it has to rewrite the pixels. That can end up being just great for the Web. Notice if I choose a JPEG format, Photoshop is going to automatically turn on As a Copy. We've seen that before and turn off layers, but we were still going to have our layers in this original file here. So there is going to be no link between the images that we're working on and this JPEG image on disk, just so as you know. Anyway, the other file format available to us is PNG, and PNG does a better job than GIF of compressing low color, high contrast graphics.
You can also use it to say, full 8-bit per channel images if you want to. That is 16.8 million colors with lossless compression. That's great, if you have a really pristine images, but your file sizes were going to be higher. Again, PNG just like GIF and JPEG is going to throw away the layers, and Save a Copy. But the problem with working inside this dialog box, I'll go ahead and switch back to JPEG, is for one thing you go ahead and save a Thumbnail and a bunch of other junk, that's of used to Photoshop, but it's of no use to your Web browser.
It's going to increase the file size without doing a person who visit your Web site any good. So that's one big bad thing right there. The other is if you have followed my instructions in the introduction to this series, then you and I are both working inside the Adobe RGB (1998) space, which is great. That's a good idea. That's great in general. However, most folks are working in something that more closely resembles sRGB. If you include a Profile along with your image, it'll get read by about maybe 25% of the browsers out there.
So most browsers won't look at that Profile, and will display the image incorrectly. That's just not a good idea. Even if you know that everybody that's you're servicing out there, has the most recent browsers installed on their systems, I still wouldn't go this route, because you're adding a little bit more data for the Profile. It's better to export the image as an sRGB image in the first place, so convert it as you save it and include no Profile at all. So we want to go to a different dialog box. I'm gong to cancel out of here.
I'm going to go up to the File menu, and I'm going to choose this command which is made for this purpose. It's called Save for Web & Devices. I'm just going to call it Save for Web, because A, that's what it used to be called and B, I'm not going to be discussing any of the Devices. That's how you output images to cellphones and other gadgets. It has a keyboard shortcut of mash your fist S. So Ctrl+Shift+Alt+S on the PC or Command+Shift+Option+S on the Mac, and it brings up this big glorious dialog box right here. I'll go ahead and scoot this image over so that we can see one of the details we've been looking at.
Notice that we have the option of Converting to sRGB on the fly, which is a great thing. So you don't need to work in the sRGB space. You can work in Adobe RGB, which is better suited to your image editing needs and then Convert to sRGB on the fly. Notice that Embed Color Profile is turned off by default, which is good. You go ahead and jettison that thumbnail, and you can boil your Metadata down to the absolute minimum. Then finally, you can go ahead and change the Image Size as long as you're here. You can downsample the image. So I could enter 590 pixels wide for this image, and then it will drop to 260 pixels tall.
I was telling you in the previous exercise, my graphic was actually 280 pixels tall, because it had a bar of text at the bottom. So anyway, I just want you to know what that discrepancy was about. But the problem with downsampling inside of this dialog box, and I'll go ahead and press the Tab key in order to make it happen. First, you get this kind of weird little line over here on the lower left side. That won't actually be part of the final image, but it's a little distressing to see it in the preview. Then finally, even though you have control over your interpolation, it doesn't work.
So Bicubic looks like this, and then Bicubic Smoother, which should be noticeably smoother onscreen, looks identical. Then Bicubic Sharper, which should be noticeably sharper onscreen and especially compared to Bicubic Smoother, looks identical. They all look the same. So something is broken there. I'll show you how different it is than working with the Image Size command. You just have better control. If you go ahead and downsample your graphic to the right size, before you visit this dialog box. So that's what I'm going to be advising, but this is the command you want, Save for Web & Devices.
Notice that it does give you access to GIF, JPEG and two varieties of PNG, as well as this gadget format right there. You don't need to worry about it. All right, so Save for Web coming up, but first, I'm going to show you how to best downsample your images using the Image Size command in the next exercise.
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.