You just spent a good amount of time finessing your most recent image to a state of graphics bliss, and now it’s time to save that file in one or more versions for web use (email, Facebook, web sites, and so forth). What’s the best way to do this in Photoshop? Like almost everything else, there are many ways in Photoshop to get the job done, but some ways have certain advantages. Today, we’re going to explore the Save For Web dialog, and see the optimization and preview goodness that it has to offer.
Let’s say we have a multi-layered document in Photoshop, and we want to fire off a JPG by email. One way to create the JPG format (while we still have the image open in Photoshop) is to simply use File > Save As… and choose the JPG format:
As soon as you change the Format to JPG, you get the yellow exclamation icons, and part of the dialog is greyed out. When you save as JPG, you make some sacrifices (loss of layers, RGB only, and so forth) and Photoshop helps prevent you from shooting you in the foot by forcing you to “save as a copy.” This means that after saving, your original layered PSD is still intact. That’s good, right?
So, we continue past this point by clicking save, and we encounter the JPEG Options dialog box. This box is a little misleading: you have Image Options with three things that can be changed (Quality number, Low/Medium/High/Maximum dropdown, and the “small file / large file” slider):
The trouble is, all three of these controls do the same thing, and that is that they compromise the quality of your image to make it smaller. Change one, the others change along with it. Now, compromise is the name of the game – that’s the tradeoff we make when we create a smaller image. But, how much control do we really have here? Once we click OK, the file is saved and we’re done. That’s it!
But, notice the fine print! Down in the corner, we have a hint showing us what could be a better way to do things:
That’s right, more previewing options are available in Save For Web. Truth be told, ANY previewing options would be more than we get here. Let’s forego the Save As… route, and try Save For Web instead (Ctrl-Alt-Shift-S / Cmd-Opt-Shift-S):
Now, that’s my kind of dialog box! And not scary at all! Let’s see how it works. We’ll start in the upper right corner, where we choose the file format and quality options (much the same as what we saw above, but with additional controls and formats available.We can choose not only JPG, but GIF, PNG and WBMP formats within this dialog box. Each has different options, but we are going to focus just on JPG for this exercise.
For now, we’ll leave the quality at 100, but we’ll come back to this again. Moving down the right side, we have two very important options:
Here, we have the ability to convert to sRGB on the fly, which is nearly always what you’ll want to do when you create a JPG file for the web. Leave this box checked, and stay out of trouble!
At the bottom of this section, we have one of the best features in this entire dialog: the Image Size control, or Image Resize, if you will. Want to create a 1200 pixel wide image? Just enter 1200 in the “W” box, and your preview is updated instantly. This is a BIG advantage over Save As. You can resize, save, and your original image hasn’t changed at all.
Now, it’s time to look at the upper left of the dialog. Here we have a preview pane, complete with Zoom and Pan, and a few other tools we won’t get into here.
Note that, by default, you are viewing the “Optimized” version of the file, which means the one that has the reduced size and compromised quality. Here you can really evaluate what it means to your image when you change the size from “Maximum” to “Low,”, and you can use the Zoom and Pan tools to check right down to the pixel level:
And, notice that section at the bottom: You can see exactly what size your file will be when it is saved. This can really help you to evaluate what the results will be prior to making a commit to the “Save” button.
But wait, there’s more! Notice the top of the preview pane? You can choose between showing the original (un-optimized) image, the optimized image using the current settings, or a “2-up” view showing both together for a side by side (or over & under) analysis:
In this example, we’re comparing a JPG with quality 10 against the original. But, notice that there is even a “4-up” option at the top of the pane? You can compare multiple formats and quality settings in the 4-up view, and evaluate which one best meets your needs:
Once you have the four images up and showing the various quality settings, you can go back and tweak the settings. Here is the same configuration with the image size reduced down to 1200 x 800, and you can really notice the variation in quality at this lower resolution:
Once you’ve set things up, previewed the results, and made your adjustments, you can go ahead and save, knowing in advance what the results will be. Any time you shrink a file, you compromise quality, but the advantage of using Save For Web is the ability to make your judgments on the fly, based on live previews. It sure beats a slider with no preview!
- A Simple Magazine Cover Mock Up in Photoshop
- Multiple Layer Styles in Photoshop
- Updates to Adobe Stock
- Did You Forget About Photoshop Express
- How to Create 3D Lego Inspired Bricks in Photoshop and Adobe Project Felix
- 3D Text with Photoshop and Project Felix
- Scatter 3D Text By Letter in Photoshop
- The Beginners’s Guide to the Pen Tool in Photoshop
- Create 3D Glass Text in Photoshop
- Creating a 3D Ground Plane to Match an Image in Photoshop