Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
(Music playing) Deke's Photoshop? Deke's Photoshop? Top 40! Feature #34 is Save for Web and Devices, and this is a terrific command if you're preparing JPGs or GIFs or PNG graphics for a website, then you definitely want to be familiar with this command. I use it incessantly these days for my site. And it's much preferable by the way to go into the File menu and choosing the Save As command. Now you can use Save As to save out JPG images and PNG and GIFs and all those guys, but if you do that, then you'll end up with extra image data.
So you'll end up with metadata inside your file. You'll end up saving thumbnails, all kinds of stuff that is not useful to an Internet Browser. So you are just increasing the size of the file for no reason whatsoever whereas when you choose Save for Web & Devices, you jettison that extra information. You get the smallest file size possible and you get some additional options. You have Preview options available to you. You can compare different file formats if you want. You can even scale the graphic. So here I am working inside that special Martini Hour artwork. You may recall it from feature #39 layer comps, and this is that helpful image that I created.
How I'm going to get special guest George Lucas on this show. One day going to happen. This image is very large, has a ton layers going on. If you look down here in the lower left corner of the window, I can see that the size of the image is 55.6 megabytes when you take into account all of the layers but even if I were to flatten the image which I would. If I go to JPG, GIF, PNG, none of those file format support layers. I would still get an image that was 5.4 megabytes. So it still takes several minutes to upload to a website. It's also humongous.
We're viewing the image at the 50% view size, so it's actually this big, I'll go ahead and zoom in to 100%. It's huge and there is no way it's going to fit inside of a Web Browser. So what do we do? Well, don't worry about it. Set up your artwork the way you want to set it up. Go ahead and save out your layered composition as a native PSD file and then when you are done, go up to the File menu and choose Save for Web & Devices. You can also press that keyboard shortcut, which is basically mash your fist on the keyboard and press the S key, or if you like Ctrl+Shift+Alt+S, Command+Shift+Option+S on the Mac, and that will bring up this window right here.
Now it's less of a dialog box and more of an independent program running inside of Photoshop. By default, you're going to see the 2-Up display. So you're going to see the original image at top and then you're going to see some compressed version of the graphic at bottom here. Now the first thing that we need to do is scale this graphic down to a reasonable size. It's four times larger than it should be. So I'm going to go ahead and reduce the Height of the graphic to 200 pixels, like so, and that is going to automatically take the Width of the graphic down to 590 pixels, and this is a pretty typical size for the graphics on my website.
It's a blog style site so we have a lot of wide graphics that aren't very tall, just like this. And already, just by virtue of the fact we did that, notice this. I'll go ahead and take that Height value back up to 800 for a moment so that we can see even if we compress this image as a GIF graphic it's still going to be 844K. That is a whoppingly huge graphic. You want graphics that are somewhere in 30 to 100K range. So as soon as I make this graphic smaller, I take it back down to 200 pixels. You'll see now it drops down to 80K. So we're starting and get there now.
Now I'm not sure that GIF is the best format for this graphic, but let's go ahead and zoom in by pressing Ctrl+Plus or Command+Plus on the Mac and I'll go ahead and scroll over just little bit, so that we can see some text and some stars and so on. Now when you use a GIF file format, you are reducing the number of colors in the graphic from a potential 16.8 million or even higher down to 256 Colors at most. And actually that's not having much of a destructive effect on this graphic because we're not taking advantage of the full range of colors. It's a fairly monochrome graphic to start with.
So I could take the number of Colors down in order to reduce the size of the graphics, so notice it's 84K. If I take the number of colors down to, let's try 4 Colors just for a moment, we end up getting this incredibly pixilated artwork. It almost looks like old McPaint art, which I actually think is really cool. But notice we've taken the file size down to 16.82K, so we've really reduced the file size at this point, and here are the four colors that we'll be using. I would say let's take this up to more like let's say 64 Colors and see what happens and this looks pretty darn good.
However, we are ending up with a 55K graphic. It's probably larger than what we need. Now I do want to mention this guy right here, Convert to sRGB. Definitely make sure that's turned on because you do want to convert the colors to sRGB just because that is the most representative color space for the widest range of monitors out there. If you want to get a sense of what the graphic is going to look like on a different platform. For example, you're working on a Macintosh but you know that 99% of people out there are looking at your website and it's more like 85% are working on a Windows machine, you can go ahead and choose Windows to get a sense of what that image will look like on a Windows machine.
I happened to be working on Windows so if I wanted to test things out on a Mac, I would choose a Macintosh Preview and you can see that went ahead and brightened up the graphic, and that's what's going to happen. The graphic is going to typically look brighter on the Mac than it is on a PC. Anyway, I'm just going to go ahead and Preview for now on my Monitor right here. You can also notice this. You can include Copyright and Contact Info in the metadata here inside Photoshop CS4. Now I would suggest at this point we experiment with a few other file formats. We now know that 64 Colors inside of a GIF file is going to get us a 55.63K graphic, fair enough, and that's an estimate by the way.
It may vary a little bit from that. Let's go ahead and switch over to PNG. Now I would recommend PNG over GIF any day of the week. These days, PNG is much more flexible file format than GIF is. It's a more modern file format so some very, very ancient browsers might have problems with it, but anything remotely modern is going to be fine. So if you're thinking of reducing the number of colors, go with PNG-8 over GIF is my recommendation. You can still stick with 64 Colors and all the other settings that we had set before, but notice now we get 50K graphic, and that is because PNG has better compression built into it.
It's lossless compression so you're not modifying the colors of the pixels except for the fact of course you are reducing the colors in the first place. If you don't want to reduce the number of colors at all, you still want to keep your 16.8 million Colors for whatever reason, try PNG-24. Now that is going to give you a bigger file. Notice I'm getting 178.1K file, but this is an uncompressed file, totally uncompressed. I could have Transparency associated with the file, so it's very, very flexible modern format. However, where this file is concerned we're going to get the best result out of good old JPEG.
Now JPG is lossy compression, meaning it rewrites the colors of the pixels. However, all of these guys with the exception of PNG-24 are somehow or other rewriting the colors of the pixels. So might as well try out JPG, see how it fairs, where you're going to see problems with JPG is notice our stars are starting to sort of dither apart right there. They are not as nice and crisp as they were before. Your text might also start breaking up or you're going to see these weird little patterns around the text but what I urge you do in that case is just zoom out.
Ctrl+Minus or Commnad+Minus on the Mac and take a look at it at the 100% view size and decide whether or not the amount of compression that you are applying is going to bug anyone. Now I do think we are applying too much compression. I've got this set to Medium right now or a Quality of 30 and that is pretty darn low. Bear in mind, the Quality goes as high as 100. So 30 is very low quality. We aren't getting a really super little graphic of 23K but I'm going to tell you work High or Very High for your web graphics, if you care about the Quality of the graphics.
I'm going to go ahead and choose High for mine and I will get better stars in the background. I'll also get a larger graphic but it's not too large. It's 39.35K, so we're coming under 40K. I think that's fantastic. Then the next thing you would do is click the Save button, save off your compressed image and then go ahead and upload it to your website. This is the power of feature #34 Save for Web and Devices 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.