Resizing for the web and email

show more Resizing for the web and email provides you with in-depth training on Photography. Taught by Chris Orwig as part of the Photoshop CS5 for Photographers show less
please wait ...

Resizing for the web and email

To learn how to properly resize, process, sharpen and finally export our images, so that we can send them via e-mail or post them on a blog or portfolio Web site, is of course paramount. What we are going to do here is simply take a look at the first step of the process, in regards to how we can resize our images. In this particular case, I have a photograph of my wife Kelly and my daughter Annika, and let's say that what I want to do is I actually want to send this to someone, post it on a blog and also include this in my portfolio; therefore, I need to resize this in a way that it will fit in these different contexts.

So let's go ahead and navigate to our Image pulldown menu, and then let's select Image Size to open up the Image Size dialog. Now in this Image Size dialog, we need to get familiar with a couple of things here. One, is how this dialog actually works? For starters, up top we are dealing with actual pixels. In this case, this image is 1500 pixels wide a thousand pixels tall. Now a lot of us will think, okay, well, that's not very big. That would be fine to e-mail. Well, it's actually not, and here is why.

Let's click Cancel for a moment, and then let double-click the Zoom tool to take this image to 100%. Well, now that this image is at 100%, i.e. the way it will be viewed either in a browser or in an e-mail program or online somewhere, we can see that the user is going to have to pan around to see it. We are just sending way too much information. We do not want to have an image that big. So what we need to do, again, is resize this image. Well, this time let's re- open the Image Size dialog. But let's do it with a shortcut. The shortcut is Command+Option+I if you're no a Mac. It's Ctrl+Alt+I if you are on a PC. All right.

Well, how then do we resize this image? Well, as I mentioned before, we have pixels up top. The next group here, you can see it's inside of this gray box. This has to do with printing. So for us on the Web, this is irrelevant. Now a lot of times you will hear people say, on the Web you have to have your images at 72 dpi, or 72 pixels per inch. Well, that's actually not correct, because on a monitor you cannot have that resolution. On monitors the resolution is fixed.

There's no way around it. In printing though, you can print it at 300, or 240, or 72, or whatever you want. So in printing you can change resolution. So for the Web, really, all we are concerned with are these numbers up here. All right. Well, how about down below? We have Scale Styles, Constrain Proportions and Resampling. So for these three options here, we are going to leave these on at all times. The one thing that we need to make sure though that we have selected is Bicubic Sharper, which is best for reduction, because in our case we need to make this image smaller.

So go ahead and leave that on. All right. Well, what then about the Pixel Dimensions do we need to keep in mind? Well, if you need really rough numbers, you can think about having your images approximately 700 pixels wide or 700 pixels tall. Typically, with that type of a dimension, that image will be an appropriate size for a blog, or for a portfolio Web site, or for sending via e-mail. Now this may vary a little bit. You can make it a little smaller, or you can make it a little bit bigger, but again, it's just a really midrange number, so let's choose that here.

We are going to choose 700 pixels wide. We are going to let the height take care of itself. We are going to completely ignore the document size because that's irrelevant, and then all that we need to do now is click OK. This will then resize the image. Here we want to double-click the zoom tool, just to make sure we're in this one-to-one, 100% view. Well, now here I can picture this inside of a Web browser, or I can picture this surrounded by an e-mail program, or I can picture this on my blog. Now at this size, we are of course a little bit big here.

We could go smaller. Many times when I e-mail clients photos, I size them down to 500 pixels wide or tall, but again, it's going to depend on your overall context, and where this image is going to eventually end up. In our case, because I'm hoping to send this out as an e-mail, post it in my portfolio, and include it in my blog, I'm going with this 700 pixel size. All right. Well, now that we've resized this image, we are ready to move on to the next step, which we will do in the next movie.

Resizing for the web and email
Video duration: 4m 23s 12h 24m Beginner


Resizing for the web and email provides you with in-depth training on Photography. Taught by Chris Orwig as part of the Photoshop CS5 for Photographers

please wait ...