This tutorial is years old and was done in Photoshop CS5, but the method will work in all versions from PS7 and up. One of these days I’ll update it and add new screenshots for CC, but for now it still works.

You’ve taken a photograph that has captured all the detail perfectly. Then you upload it to the Internet and it looks flat and uninteresting. What happened? It’s time to resize photos for web with a twist.

Your photo is made up of pixels. Each pixel contains information about the color and brightness on that one tiny point on the camera sensor and it relates directly to all those other pixels that surround it. So what do you suppose happens when you start with a 5 MB file and end up with a 350k file? You’ve lost pixels and therefore, you’ve lost detail. Reducing size means throwing out photographic information and that can turn a great photograph into a nothing special photograph.

The good news is that if you use an image editing program like Photoshop, there are ways around it and you can resize photos for web that look spectacular!

Once you have finished making the basic adjustments like Levels and Curves and have added a bit of sharpening (I recommend using the High Pass filter for sharpening detail) then you are ready to prepare your image for the web.

To start, go to Image>Mode and ensure that you have RGB and 8 bits/channel selected as shown below.

Web1

Check your Colour Space

You may be using a larger colour space in Photoshop. Many people prefer to adjust colours in either the Adobe RGB1998 or ProPhoto spaces. They are much larger and allow greater control in the warm colours without clipping (losing information). However, the web will not handle these larger spaces so you need to convert to sRGB IEC61966.

If you would like more detail about colour spaces and how they work, click here and read more about it. You can also see examples of just how badly colours shift.

With your image flattened (only one layer) you are ready to go. Select Edit>Convert to Profile as shown at right.

Then adjust as shown below.

Your colour space may already be set for this but if it is not, convert now. Otherwise, your colours will shift badly.

web2
Photoshop Trick to Resize Photos for Web - Fig. 3

Resize Photos for Web: Bicubic

You will notice a dropdown list when you get to the Image Sizing box. This is all you need to remember:

  • Ignore Nearest Neighbor and Bilinear. We are not going to use them in photography.
  • Bicubic is used for moderate adjustments.
  • Bicubic Sharper is used for substantially reducing size.
  • Bicubic Smoother is used for substantially increasing size.
  • Bicubic Automatic was introduced as the default in CS6. Remember to CHANGE IT. It’s a dirty conversion and produces halos.

IMPORTANT: IF YOUR IMAGE IS NOT AT 72 PPI WHEN YOU START, REMOVE THE CHECK FROM RESAMPLE, CHANGE TO 72 PPI, THEN PUT THE CHECK BACK ON RESAMPLE. THIS WILL PREVENT ANY RESIZING CHANGE WHILE YOU ADJUST THE RESOLUTION. IF YOU MAKE A MISTAKE AT ANY POINT, YOU CAN HOLD DOWN ALT (WINDOWS) OR OPTION (MAC) AND YOU WILL SEE THE CANCEL BUTTON CHANGE TO RESET. CLICK IT AND YOU WILL BE BACK WHERE YOU STARTED.

web4

Select the final size in pixels. Here, we want the width to be 600 pixels. For display on the web, we want a resolution of 72 pixels per inch (ppi) or a maximum of 96 ppi. The higher the resolution, the slower the page will load and some of your viewers may still be on speeds  as slow as dialup. This is not uncommon in rural areas, even in 2019.

web5

The fox has been resized to 600 pixels wide and Constrain Proportions checked. This image is okay but the eyes are not bright and the fur on his face has lost detail.

Resize Photos for Web: Bicubic Sharper

web6

Selecting Bicubic Sharper will help maintain detail but not quite as well as doing it manually. See the photo below and note how the eyes are brighter and the fur more detailed than with the simple Bicubic method.

web7

Resizing using Bicubic Sharper. See how the highlights in the eyes are a bit brighter and the fur on his face is maintaining more detail.

Resize Photos for Web: The Manual Magic

Now the best one. We are going to do this in steps. First we will sharpen the image using a brutal method that would never ordinarily be used for photography. Our image’s original size is shown below. We are going to reduce the size to 600 ppi width so we have some room to play. The resampling will be set at Bicubic and NOT Bicubic Sharper. This is important. If your resolution is not at 72, set it there now but remember to take the check off Resample Image before you do it. At this point, you do not want to change any pixels in the image.

web8

Original settings. Once you have the resolution set to 72 ppi proceed to Sharpening.

web9Choose Sharpen twice. Don’t worry if you see the image quality deteriorating.

Once you have applied the Sharpen tool twice, proceed to Resizing Step One. Once your image is reduced to the first level, Sharpen again using the same system as above but this time, apply it only once. Then proceed to Resizing Step 2. A lot of information has been lost and the sharpening has reduced your colour saturation so you will need to repair it. The ‘magic’ number is 8. That will restore your photo perfectly. Please don’t be tempted to increase it more. Honestly, in six months you will see your photo and wonder what you were thinking. Just don’t do it. See how to do this below the Resizing illustrations.

Resizing Steps One & Two

Resizing using manual method keeps more detail than either of the two previous methods.

web10

web11

web12

Resizing using manual method keeps more detail than either of the two previous methods.

web13

Go to Image>Adjustments>Hue/Saturation

web14

Type 8 into the Saturation box and click OK.

web15From left to right: Bicubic, Bicubic Sharper, Manual Step Sharpening. Click to enlarge.

Save Your Photo

Save your photo as a jpg with compression no lower than 10. Less than that loses too much. I normally save mine set at “Baseline Optimized” and quality 12. Only save in this format for web. If you are saving to rework, then use PSD or TIFF format where there is no image loss. That’s all there is to it. Once you’ve done it a few times, you’ll get a feel for it. I’ve included a closeup of the fox using all three methods so you can see the difference. You won’t need to do this every time but if you have gone to the trouble of taking a shot with a lot of important detail, why not show it off at its best?

If you have any questions, just ask in the comments and I’ll do my best to help.

Please share

Leave a Reply

Close Menu