Sizing Photos for the Web
by Dave Salahi
Most cameras today capture photos at a resolution (level of detail) far higher than needed for viewing on the web. That is, they contain more detail than you can see on a typical PC monitor without zooming in. This also means that the image files are larger than they need to be. This slows the process of uploading for you and it also slows the galleries when people are viewing these over-sized images. To speed things up—and to provide some protection for your work—it’s best to resize your photos appropriately before uploading.
The first question you may have is “what is the right size for uploading images?” and the answer is that it depends on your goals. The short answer, for the purposes of this website, is about 2000 pixels or smaller on the longer dimension. So, if you have a photo in the 3:2 aspect ratio that would equate to a size of about 2000 x 1333. The longer dimension would be the width for a landscape orientation photo or the height for portrait orientation. This size will fill the monitors of the commonest sizes today so that people can see plenty of detail. As a reference point, HD resolution is 1920 x 1080.
If you upload files larger than this, viewers will not see any additional detail unless they zoom in on a portion of your photo. If it’s your goal to showcase all the fine detail in your photos then feel free to use a higher resolution—but not on this website. Save the high resolution images for your personal website, flickr, etc. We want files to upload and download quickly to provide a good experience for all of our members and visitors.
You may feel free to upload files that are smaller than this suggested size if you prefer. This might be a necessity due to cropping or copyright concerns (see below for more on the latter).
Optimizing Image Quality
There are two components of file size: image resolution and image quality. I’m speaking now of images in the JPEG format which is the best format to use for photos on the web. For any given image size (resolution) you can reduce the file size by increasing the amount of compression used but this also reduces the image quality. The JPEG format is what is known as a lossy format. This means that some of the information contained within the photo is discarded in order to achieve a smaller file size. At the highest JPEG quality setting very little information is discarded and the resulting image is often indistinguishable from the original. But the more you compress a photo (for a smaller file size) the more the image quality will be degraded.
The optimum amount of compression varies from photo to photo depending on the content. Some photos can withstand more compression without an appreciable loss in quality. These include photos with less detail and with large amounts of the image area all in the same or similar color. The less detail a photo has the more it can be compressed without a noticeable loss in quality.
The right amount of compression also depends on your needs. If a small file size is important then you may want to sacrifice some image quality by using more compression. Or, if image quality is your priority you may choose to minimize the amount of compression. It’s a good idea to compare the image quality at a few settings with varying amounts of image compression. When you reach the point where the photo quality begins to suffer, back off a little until the quality is restored. That will achieve the best balance of quality vs. file size.
Note also, that you may see a color shift when saving photos for the web. Typically, your native image will be in either the Adobe 1998 color space or the Pro Photo color space. However, JPEG images use a much smaller color space called sRGB. This allows for smaller file sizes but requires discarding some color information. Color spaces are beyond the scope of this article but just be aware that a color shift can occur. If you notice a significant color shift you may want to apply a color correction to the original image to counter-balance the effect of shifting to sRGB.
Protecting Photos Online
If you’re worried about your photos being stolen online the best protection is to upload them in low resolution. The smaller the images, the less likely they are to be stolen. But the smaller the images, the less detail will be visible to website visitors. For more on this question see my blog post titled Protecting Your Photos Online.
Resizing Photos using Lightroom
Use the File –> Export option in Lightroom to prepare a photo for uploading. When you choose this option you’ll see a dialog like this one:
This dialog contains a number of panels but in the example above they are all collapsed except for the two that are relevant to this discussion: File Settings and Image Sizing. The File Settings panel shows the proper settings for Image Format and Color Space. Also, a typical value of 75% is shown for Quality.
In the Image Sizing panel the Resize to Fit option is selected so that the longer of the two edges won’t be more than 2000 pixels. The Resolution value is not relevant to this discussion.
To simplify the process of exporting I’ve created a preset (see next paragraph) which you can use to quickly select the proper settings. In the screen shot above you’ll notice that a preset called “SCPC website – 2000” is selected. Choosing that preset automatically chooses the settings shown above. And if you prefer you can use this preset as a starting point and fine-tune the settings to your own preferences.
You can download this preset (right-click and choose “Save target as” or “Save link as”) and then import it into Lightroom on your PC. To import the preset go into the Lightroom File –> Export dialog and right-click on one of the existing presets. You’ll see a small pop-up menu:
Choose the Import option and select the preset file that you downloaded from the link above.
There is one caveat about this preset. There is a bug in Lightroom 5.3 which prevents Lightroom from limiting the longer edge to the specified dimension in certain cases. The workaround is to uncheck the Don’t Enlarge checkbox. Normally, of course, you would want to check that box because it’s not a good idea to upsize photos (quality usually suffers). But, because of the bug we need to leave this unchecked until Adobe gets the problem fixed.
Resizing Photos using Photoshop
To resize photos from Photoshop use the File –> Save for Web option. This will open a dialog like this:
Photoshop comes with several export presets including one called Very High which is shown here. This preset provides a good balance between image quality and file size for most photos. If you want to maximize photo quality you can choose the Maximum preset or if you prefer to go for a smaller file you can choose High. Being a photographer—which I assume you are if you’re reading this—you probably won’t ever want to go below High quality.
In addition to using a preset you can also manually tweak the picture quality by adjusting the Quality value and watching the effect on the photo. With the 2-Up dialog layout shown here you can easily compare the original image with the JPEG that will be exported.
You can either resize your photo using Photoshop’s Image –> Image Size command before opening this dialog or you can use the Image Size textboxes on this dialog. You should select the Convert to sRGB and the Embed Color Profile checkboxes as shown here.