Join Deke McClelland for an in-depth discussion in this video Downsampling for the web, part of Photoshop CC 2013 One-on-One: Intermediate.
- View Offline
In this movie, I'll show you the best way to down-sample an image for the Web. I'm working inside a file called Big Venice panorama, and it's a much larger version of that banner art. So, what I'd like to do is have that smaller file load by default, and then if somebody clicks on it. They'll see a larger version of this image, but not this large. If you click and hold down this doc item down here in the lower left corner of the window, you'll see the width of this image is 4802 pixels, which wouldn't even fit on the biggest retina display out there.
So there's no sense in providing this many pixels with my web art. Fortunately, you can down sample your image from the save for web dialogue box, unfortunately, it doesn't do a very good job. So, we'll start things off by going up to the File menu and choosing Save for web. This is a continuous tone image, so I don't want to work with the PNG eight format. I want JPEG instead. So I'll go ahead, and select JPEG like so, and next what I want to do is reduce the size of my image to 33%, and that's going to affect both the width and height values as well, and I'll go ahead, and scroll my artwork like so.
And zoom in a couple of clicks here by pressing Ctrl + Plus or Cmd + Plus on the Mac. Now notice this quality setting. We do have control over the interpolation theoretically anyway. And for example, nearest neighbor works just fine. If you select it you'll end up with these jagged transitions. As were seeing here, both in the optimized Jpeg view. And in the original view, which doesn't really make any sense, but that's the way it is. Whereas the other options all do the same thing. So notice if I switch to Bilinear, which provides the smoothest interpolation.
And then I'll go ahead and switch to Bicubic Sharper, which is the sharpest interpolation. Keep an eye on this boat on screen here. Notice when I chose by cubic sharper, nothing happens. And so, if you really do want control over the interpolation, you have to down sample the image using the Image Size command instead. Which is exactly what I'm going to do. So, I'll go ahead and click on the cancel button in order to cancel out of this dialog box. And then, I'll press shift tab in order to bring up my right side panels and notice I have a couple of adjustment layers at work.
Before you scale your image for the web. You're best off flattening it which means that you want to duplicate the image before you start by going up to the Image menu and choosing the Duplicate command. And I'll go ahead and accept this default name and turn on duplicate merge layers only, in order to create a flat version the file as we see here. And I'm going to create another copy, so that we can compare couple of different interpolation methods and see how things ought to work inside Safer Web, by choosing the Duplicate command once again.
And this time, I don't have to select this check box. In fact, it's dimmed because the image is already flat. And I'll go ahead and accept it as well. All right. Now, with the second copy open, I'll go up to the Image menu and choose the Image Size command. And I've got this thing set up so its taking up the entire screen. Notice that my width and height values is set to percent and so I'll just go ahead and take the width value down to 33% and I'll change resample so we can see the difference here, to bi linear. And you don't need to worry about the resolution value by the way. That has no effect on web graphics.
So just go ahead and click OK in order to down sample that image. And it's going to appear quite small by comparison to the way it did before. And I'm going to zoom in on that boat this little bit and I'll switch over to the first copy, go up to the image menu, choose image size again, dial in 33% for the with value and we want both the width and height values to be the linked together, by the way. And now I'll change resample to automatic which when downsampling the image, as were doing here, goes ahead and automatically assigns by keeping sharper.
And now I'll click okay. And I'll go ahead and zoom in on this graphic as well. Alright now let's take a look at these images. Actually I'm going to zoom in quite a bit on the bi-linear version. By pressing control plus or command plus. Let's say until we get to 400%. And then I'll go up to the window menu. Choose a range. And choose match all. So that we'll have alignment between our two images. So this is an example of bilinear interpolation, and this is an example of bicubic sharper, which is going to work better for our purposes.
So with this image selected. Go ahead and zoom out a little bit, so I can take it in the way it was meant to be viewed at 100%. And then, I'll go up to the file menu and choose Save for web. I need to once again switch from PNG eight to JPEG because I cancelled out of the dialogue box last time around. And, I'll go ahead and scroll over to the boat, I suppose. This time around, we do not need to modify the image size. It's already been modified so we'll leave that option alone. Now, by default, the quality setting is going to be set to high.
Which in my case, will generate a JPEG file that's 284 k. Which means that it's going to take four seconds to download at one megabit per second. But presumably people want to see a good version of this file. Because after all they clicked on the small thumbnail. So I'm going to take the quality up to very high. Which will generate a file that's almost 500 k. But again the people want it. So it seems like the right way to go. Now click the save button. And I'll go ahead and truncate the name here a little bit by getting rid of the word copy.
Other wise the settings are just fine as is. And then I'll click the Save button, in order to save off the optimized jpeg version of that graphic. And that's the best way to down sample a web graphic, using the Image Size command as opposed to Safer Web. Here inside photo shop.
- Performing automatic retouch, scaling, and more with the Content-Aware tools
- Editing the histogram
- Customizing a Levels adjustment
- Making channel-by-channel Levels adjustments
- Sharpening with the Smart Sharpen, Emboss, and High Pass filters
- Working with vector-based type
- Kerning and tracking characters
- Creating text on a path
- Drawing and customizing shapes
- Creating depth, contour, and texture with layer effects
- Liquifying an image
- Simulating an infrared photo
- Adjusting print position, size, and color
- Creating the perfect JPEG image
- Downsampling for the web