In this video, Mike shows you how to use the Save for Web dialog box in Photoshop. He shows you how to choose the best file format for an image and how to tweak the export settings to get the smallest file size possible while still retaining as much image quality as possible. File format choices like JPG and PNG, image size, and quality are demonstrated.
- [Narrator] In this movie, we'll look at some of the options for exporting images from Photoshop to the web. Specifically, we'll be using the controls in the Save for Web dialogue box, which gives you the most control for exporting web images. For the Photoshop ACA exam, you should also know how to use the Export As dialogue box which we looked at in an earlier movie. So here in our exercise file, we have this image of a rabbit in black pixels on a transparent background and there are some partially transparent pixels along the edges that smooth out the appearance of curves with anti-aliasing.
And we can see those if we zoom way in. I'll just press Command or Control plus a bunch of times, to zoom way in and see that anti-aliasing. Then I'll zoom back out with Command or Control zero. And this image is really large. If I look at the document dimensions, it's 2307 pixels by 3413 at 300 ppi. So this is a big image that we need to scale down. So our goals in exporting for the web, are to scale this way down to appropriate dimensions, making the file size the smallest possible while maintaining the best quality that we can.
And let's say in this case we don't really care about maintaining the transparency. So I'll choose File, Export, Save for Web (Legacy). And in the dialogue box, I'll choose Fit in View to see the whole rabbit, and I'll use a Two-Up View to see the original image side by side with a preview of the exported file. This way, as I choose settings, I can see their effect and compare it to the original. Now on the top right, is a preset menu with several options to choose from.
Or we can customize all the settings to our liking. There's also an option to optimize to a specific file size in the menu at the top right. I'll cancel out of there. And we'll start by choosing a file format. Right now it's GIF, but let's try a JPEG. Notice that the transparency goes away. This is because JPEG doesn't support it. And let's set the dimensions to something reasonable. Let's say we wanted a width of 500 pixels.
And we'll view it at 100 percent. Now, that's not a bad looking image right here. But the file size is still pretty high. It's over 100K. I could try lowering the JPEG quality to apply more compression and lower the file size so I can go from high to medium, say. Or, even low. And at low, I get a file size of 52K. But I'm starting to notice some JPEG compression artifacts in the white areas.
And if I zoom in again, by pressing Command or Control plus a few times, we can start to see these areas. So I'd rather not have those. So I'll try a different file format. First I'll zoom out again, by pressing Command or Control one to get to 100 percent and for file format, let's try PNG-24. We'll turn off the transparency, and that looks really good. But look at the file size. We're now at almost 268K. Which is way more than I want. So instead, I'll try PNG-8 and the file size is a lot better, now it's 102K but that's still high.
Now for this particular image, I think I can really reduce the number of colors, since I only care about black, white, and a few grays in between for the anti-aliasing. So I'll go down from 256 colors all the way down to 8. Now we're down to almost 48K, which is really good, and we have none of those JPEG compression artifacts. I can scroll around, see different parts of the image, and that looks really good to me.
Maybe we can take the colors down even further. Let's try four. And we might have taken it a little bit too far. If I zoom in a bit, it's starting to look a little crisp in there. So I'll zoom back out, and switch it back to eight colors. We can also experiment by changing the method here, from Perceptual, to Selected and it doesn't make much difference in this particular case. So I'll stick with Perceptual which gives me the smaller file size so then I'll click Save.
I'll just save it as rabbit.PNG . I'll save it on the desktop and there we are. So here we saw how to use the Save for Web dialogue box. We saw how to choose the best file format for an image, and how to tweak the settings to get the smallest file size possible while still retaining as much image quality as possible.
- Benefits of ACA certification
- Creating a study plan
- Planning a project
- Identifying design elements such as typography
- Using layers and masks
- Managing color
- Transforming images
- Drawing and painting
- Preparing images for print, web, and video
- Taking the test