Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So let's say I have finished my masterpiece, and now I'm ready to put it on the web for the world to see it. What I'm going to do is go to the File menu, and I want to Choose Save for Web. We can choose Save As, as Choose File Formats there, but we're not going to get the control and flexibility that we will get by choosing File > Save for Web. This opens up it's own little Window that gives us all kinds of power for saving for the web. First we have the original image, and actually I want to zoom out here so I'm going to use my keyboard shortcuts, Spacebar Ctrl Alt or Spacebar Cmd Option on the mac. Click out so I can see everything.
One of the problems I see is that my image size is pretty wide, 1458 pixels wide by 972. That's pretty colossal for an image on the web. So what I actually want to do is maybe to take this down to 50%. And that's a little bit more manageable for the web. And for quality here, I want to take this to Bicubic Sharper. So if you're going to use res something up, if you have to make something bigger by scaling it up which is typically not something you would do in this dialog box.
But if you had to, you want to use Bicubic Smoother, and if you're shrinking an image, you want to use Bicubic Sharper. If you forget and leave it on Bicubic, it it's not the end of the world, but Bicubic sharper will get you there, a little bit smoother. I could just hit Tab to, and actually make that happen. And I'm going to press a Spacebar + Cmd or Spacebar + CTRL, to zoom back in there so we can see our image. And if we click on orignial, this is the original image, if we click on optimized we can see the same image, but using the compression method specified over here on the right.
Also below the image we get all kinds of info about the image so if we look at our original for example, we can see it's 1.35 megabytes and this is the original. Click on optomize we can see that this is a gif and its 180k and it would take about 34 seconds on a 56k modem to download. And we could change that by clicking this little thing here. Its always a good idea if your going to put this on the web especially on like a professional website that your aware of your slowest customers but these days most people have much faster modem then a dial up 56k modem, so let's just say 512 for our purposes here. It only takes five seconds as a GIF.
There's also some more information here about the GIF. But GIFs are really good for areas of flat color. If we have a flat vector graphic that we're going to save, GIFs are good because then we get this color table here, we can choose how many colors we want in the image. And we can choose our file formats up here, so right now I'm using a GIF. There's 256 colors, but I could break this down to just, maybe 16 colors. And you can see how there's little what they call dithering. Basically it's using little dots to try to simulate other colors. And I could also, click one of these colors, and I don't need this red for example click it, to select it, put it all to the trash can to throw it away, in that particular tone gets thrown away.
But for most images with continuous tone, with smooth gradual changes in color, photos and the like, we don't want to use GIF, we want to use JPEG if we can help it. So, I'll change this to JPEG, and then we get a much better image quality here, and you'll notice it's only 49k, so it's less than a third of the size, and it looks much better. So again, if you're looking for flat art, GIF is better, typically. If you're looking for something like photo realism then you'll probably want a JPEG image.
And we could adjust the quality here, maybe to 100% and as we take this down lower, let's get somewhere around there, it'd be about 50%. We don't really see too much of a problem, until we zoom in. I could just click on the zoom tool here in the little mini toolbar and click here and we can actually start to see a little bit of the problems. But it sure would be nice if we could see the original and the optimized right next to each other, so we can see how much of this image is being degraded.
And we can, by clicking on the (LAUGH) (INAUDIBLE) panel here, we can see the original on the top, oops, I accidentally zoomed in too much. I'm going to hold the Alt or Option key, click that and zoom out a little bit go back to the Hand tool. And so we have the original at the top and then we see what the degraded compressed JPEG version will look like so that way you know what your getting into you know what the image compression is going to do to your image and see if you can tolorate it or not.
So this actually looks fairly decent. We're losing some details here and a few other places, but generally that looks pretty good. I'm think I'm just going to bump this up to about 65, just for good measure here. And we don't have the color table for GIF images because GIFs don't allow you to create a color table and then throw away colors selectively like JPEGS do. Another popular format now is what they call PNG, PNG. And this is popular on the iPhone for graphics, and on the web it's becoming more and more popular. Just a lot of power here there's two different type of PNG's. There's a PNG 8, which is basically the equivalent of a GIF as you can see, we have a little color table again.
And there's also PNG24, which is kind of like smooth color, like a JPEG. Now one of the big advantages of the PNG, actually the PNG24 specifically, over the JPEG, is that JPEGs can not have transparency. If you just had like a simple shape, on a transparent background in Photoshop, then if you saved it as a JPEG, it would force you to create a mat behind it, and that's what this mat color swatch is. And so if we want to save that transparency we'll need to use a GIF, or a PNG 8, which creates a hard edge of transparency, or we could choose PNG 24, which actually can create subtle, faded edges, so we have a gradual, going from opaque pixels to transparent pixels.
You can have a feathered edge, essentially, with a PNG 24 file. Now the magic here is that when you are done you can click Save at the bottom and once you save out this image you can go back to Photoshop and your original image is not compressed, your original image isn't even shrunk down at all. So this is basically just saving a copy for the web and not actually changing the size of your image. So if you're working on a, a super big proof and you wanted to send somebody samples of it, the save for web dialog box is the best way to not only shrink your image down to size for the web, but to see which file format works best and what the final size is going to be.
Get unlimited access to all courses for just $25/month.Become a member
117 Video lessons · 43158 Viewers
119 Video lessons · 54423 Viewers
65 Video lessons · 14635 Viewers
113 Video lessons · 82948 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.