Sizing images for web is an issue that many photographers struggle with. What is the best method? What are the correct settings? Resize in Photoshop or Lightroom? If you are using a more recent version of Photoshop, you might have noticed that your photos are looking over-sharpened once you downsize for web. There’s an easy Photoshop preference you can set to remedy that. In this post, I’ll show you three different ways you can resize your photos for web in both Lightroom and Photoshop, while keeping them looking their best.
Photoshop Preferences: Image Interpolation
If the majority of resizing you do in Photoshop is downsizing for web, then you’ll want your image interpolation default to be set to Bicubic (best for smooth gradients). Newer versions of Photoshop default to Bicubic Automatic, which generally results in down-sampled (web sized) images looking overly sharpened. Changing this preference will change the default for how the crop tool, free transform, and the image size settings are applied.
To change the default, do one of the following.
1. (Windows) Edit > Preferences > General >Image Interpolation > Bicubic
2. (Mac OS) Photoshop > Preferences > General > Image Interpolation > Bicubic
Now that you have the image interpolation default setting changed to bicubic, you can use any of the following three methods for downsizing your photos for web.
Image resizing for web in Photoshop: Image Size
This first method uses the Image Size dialog box. Select Image Size from the Image menu. Here’s how the image size dialog box first looks for a full-sized photo before down-sampling. You can see the interpolation method is set for Bicubic, due to the default I set earlier in the preferences. The resolution is set to 300, perfect for printing, not perfect for web viewing. The corresponding image size at 300 pixels per inch is 19.2″ x 12.8 inches.
1. Uncheck Resample Image. Then type in 72 for the resolution.
2. Recheck Resample Image. Constrain Proportions will most likely turn on as well. If you want to keep your original proportions for your cropped image, keep this checked. Now type in the smaller Pixel Dimensions for your desired web size. My blog takes a max image width of 630 pixels, so I typed in 630. Because constrain proportions was checked, Photoshop automatically changed the height to a corresponding 420 pixels. You’ll notice that the document size is now a max of 8.75″ x 5.833″ at a web-viewing resolution of 72 pixels per inch. The document file size has also been drastically reduced from 63 MB down to 775.2 KB. You can further reduce the file size by the image options quality level you select when saving the file as a jpg. Hit OK to reduce the size of the image. I HIGHLY recommend that when you save your web-sized file, you choose Save As to save a copy. Otherwise, you will overwrite your original full sized file. That could be bad.
Image resizing for web in Photoshop: Crop Tool
One of the upgraded features I really liked in Photoshop CS6, was the crop tool. I often use the crop tool for resizing my photos quickly in Photoshop because it offers a lot of useful options. One of which is the ability to save cropping options to presets. This is super handy if you use a variety of different crop sizes and resolutions. In the image below you’ll see that you can elect to view a crop overlay to help you select the perfect crop. I generally keep the rule of thirds overlay on. There is also an option to delete the cropped out pixels; meaning those pixels will be permanently removed from the file. Once they are gone, they are gone. This is a nice safety feature to keep unchecked if you should decide to change the crop later on during editing.
When using the crop tool method to resize images for web, simply select the crop tool (C on the keyboard), then select the drop down menu shown below. You’ll notice that Photoshop offers some presets of common image sizes, allows you to crop based on the original image ratio or unconstrained for custom ratios, as well as allows you to type in custom sizes and resolutions. Select Size & Resolution.
The Crop Image Size & Resolution dialog box will open up. Here, you can input your desired dimensions and resolution. Again, for my blog, I want a max width of 630 pixels and I want a web resolution of 72 ppi. Since this is a crop I’ll be using time and time again, I’ll check the box “save as crop preset” and hit OK, being sure to name the crop preset something meaningful. You can see in the image above that I’ve saved a few crop presets that I use for things like web-sizing for blog, facebook, image proofs, slideshows, etc. With these saved crop presets, sizing images for web is super quick and easy.
What about sharpening for web?
After you have resized your images for web in Photoshop, you may want to add a small amount of sharpening. My preferred method is to duplicate the background layer, then choose Filter > Sharpen > Edge Sharpen, then drop that layer opacity down to about 50%. If you prefer to use another sharpening method such as Unsharp Mask, by all means, do that. I’ve created an action for web sharpening that you can download for free from the store.
Image resizing for web in Lightroom
Sizing images for web in Lightroom via the export dialog box is incredibly easy. This is my preferred method for sizing images for web, especially if I’m saving out numerous images all at once. To down-sample your images for web within Lightroom, simply select all the images you wish to resize (shift click to choose multiple images from the grid or loupe view). Then, from the Library Module, click export. Likewise you can make your selections, then right click with the mouse and chose export. The export dialog box will appear as such.
You will want to set your Export Location and File Naming as desired. What we need to concentrate on is 1) File Settings, 2) Image Sizing, 3) Output Sharpening, 4-5) Presets.
1) File Settings: When saving images for web within Lightroom, the jpg file type is really our only choice. Color space should be set to sRGB for viewing online. Quality and Limit File Size To will allow you to control the final size of each file. Lowering the quality will make the file size smaller. You may need to experiment with the quality setting to see how low you can go and still maintain a desirable image quality. For me, as a general rule, I keep mine between 80 and 100 and keep the “limit file size to” unchecked. However, if you are posting somewhere online where you are limited to a maximum file size, then type that number in. Doing so will make sure that your file size is set to that limit by automatically adjust the quality accordingly. With this option, keep the quality set to 100.
2) Image Sizing: This is where you will specify the pixel dimensions of the final image. When saving for web, I generally choose to “resize to fit: Long Edge.” Again, using my blog images for example, I know that I want the maximum width to be 630 pixels and I know I want a web resolution of 72 ppi. You can specify whether to resize based on long edge, short edge, width & height, dimensions, or megapixels. By setting my long edge to 630 pixels, I know my images won’t be any longer that 630 px, and if I have a square shaped image, it will be 630 x 630 pixels.
3) Output Sharpening: If you want to add a little extra sharpening to your images while they are being resized for web, make the proper selections here. My preferences for web sharpening in Lightroom vary, but in general, I elect to sharpen for screen by either the low or standard amount. You’ll want to try saving with different sharpening settings, then comparing what looks best for your particular photos and for where you’re uploading.
As a side note, I find the watermark feature in Lightroom a fantastic time saver. I have a variety of different custom watermarks for different purposes saved as presets. It’s quick and easy to choose the necessary watermark when saving for web. This saves one extra step of manually applying a watermark to image individually in Photoshop.
4) Save a Preset: Once you have taken the time to input all the variables above for saving for web, it’s smart to save these setting as a preset for using over and over. Simply click the Add button at the bottom of the export dialog box. Name the preset something meaningful. You can create folders of presets based on their use. Here’s a helpful tip about saving presets. As a general rule, leave the top portion of the export dialog box settings blank. Don’t specify where to save, or specific file renaming, as these options will generally change each time you save images.
How you choose to save your images for web will depend upon what particular programs you use, how many images you are saving out at one time, and what your overall editing workflow entails. You’ll notice that I did not cover the Save for Web option in Photoshop. I personally only use this method when saving animated gifs or saving sliced html files, never for general image resizing/saving. I hope these suggestions and explanations, along with the free sharpening Photoshop action will help you decide which method works best for you.