What is the best way to reduce image size AND retain sharpness in Photoshop CS2?

Posted on 2007-08-05
Last Modified: 2008-01-09
If I saved an image in Photoshop CS2 (let's say it's about 20,300 KB), what is the best procedure to reduce it for the web AND maintain optimum sharpness?

I am just trying to see if there is a better way to reduce images than what I am doing.

When I do it manually, I first go into Image Size and with NONE of the bottom three boxes checked, I change the resolution to 96 pixels/inch.
Second, staying in the Image Size dialog box, I make sure all three boxes are checked and change the Resample Image to Bicubic Sharper.
Third, I change the largest of the Pixel Dimensions and change it to 1000 pixels which changes the file size from 20.3 MB to about 2.15 MB.

Is there a better way to reduce images to retain optimal sharpness?

Also, when I do my adjustments and such (levels, etc), do I do it BEFORE reducing or AFTER reducing?
(I work on a PC.)

Question by:dgage123
    LVL 65

    Expert Comment

    normally the procedure you are following is fine for resizing the images....
    i will only add one thing here; and that is to use the Filter>Sharpen>Sharpen to increase the sharpness of the image after resizing.

    and yups, i recommend to use adjust the brightness, contrast, levels and etc. after resizing, becuase it gives the result with the final image and there is no change of loosing these settings after resizing it :)
    LVL 32

    Expert Comment


    it is important that you know the size of the final image on the web, no point letting the browser resize the image for you.

    Typically you would use the image resize after you have applied all your filters, you can set 72 dpi as well if you want. just ensure that you use bi cubic as it preserves fine detail better than the otherwise used bilinear method.

    Use jpg compression level 6-8 for smaller image 8-10 for larger, simply play round to makes sure the image does not display distorted fragments from the compression, hence test the image in your browser first.

    LVL 1

    Expert Comment

    Just a suggestion, sometimes I got to better (more natural/realistic) results using the contrast and sharpen filter set to strong levels BEFORE reducing the image size. I think the resizing mixes the effect with the image making more difficult for people to say "Is has been sharpened".
    LVL 9

    Expert Comment

    I'm with JuanLucas's recommendation of sharpening before downsizing the image. But a radical downsize does soften the image so I generally apply a very soft Smart Sharpen afterwards.

    The size of 1,000 pixels bothers me because that is wider than most web pages are, so the image should be downsized to the actual size you'll use on the webpage. In this point, captainreiss is correct. However, I would use the Save For Web dialog box to do the final jpeg compression. This will result in smaller file size and you can easily compare before & after images to make sure you aren't introducing jpeg artifacts.

    In theory, it shouldn't matter if levels or curves are applied before or after the image is downsized. However, IMO, it is better to it BEFORE you downsize, because I have seemed to find a greater chance of clipping highlights or shadows if I do it AFTER downsizing. Just my very inscientific opinion. YMMV.
    LVL 4

    Expert Comment

    CTRL ALT SHIFT S    (save for web) .    Don't downsize in image size window in photoshop.  Downsize in the save for web dialog.  If you downsize in photoshop and then save for web you are double downsizing and everybody know double downsizing can be down right dangerous.!
    LVL 26

    Accepted Solution

    These are the recommendations that Adobe gives. According to their engineers, the resampling algorithm like to do things in 10% bites. This supposedly give the program the best chance to recalculate the edge contrast and maintain sharpness. They also recommend a small amount of sharpening after each 10% decrease and they recommend using the bicubic sharper filter for downsizing (bicubic smoother for upsizing).
    My work flow is almost identical to yours. I start by calculating the size that I will need in pixels. Then convert my image to 72 dpi without resampling. Next, I use image size to downsize using 90% as the new size. Then a tweek of sharpening. And finally, a check of my pixel dementions.
    If the next 10% step takes me smaller than I need, I change my settings by typing in the exact pixel dimensions that I need.
    The 10% steps, bicubic sharper method is laborious, so I have an upscale by 10% action and a downsample by 10% actions. I just click these buttons a few times and I'm there.

    How are the end results? There's no way I could look as someone's sample and say "Oh, you tried to resample all at once" or "Oh, I see you resampled in 10% increments!" It's just that the few times that I did do a comparason, I could see a slight difference and that's good enough for me.

    David B.
    LVL 4

    Author Comment

    Thanks for the advice.
    I started using a tripod when automatically bracketing exposures to help with decreasing slight camera movement. Also, a while back, I was taught to avoid using the contrast and brightness settings, and to use Levels (and/or Curves) instead.

    To D Brugge:
    After reading your comment, I now remember that 10% rule for upsizing, and it makes sense for downsizing too (however, I believe its actual effectiveness is one of those hotly debated topics).

    Thanks everyone!

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Join & Write a Comment

    Suggested Solutions

    I've been using this technique since Adobe CS2, and it should work with any version of Illustrator that includes the appearance panel. In this tutorial we'll create a button using the appearance panel in Adobe Illustrator, and then save it as a r…
    Technology opened people to different means of presenting information, but PowerPoint remains to be above competition. Know why PPT still works today.
    In this tutorial viewers will learn how to create blended and gradiated shapes in Illustrator using the blend tool Draw two shapes, one of them in a different color: Select both and create a blend by going to Object > Blend > Make: Blends can also b…
    Learn the basics of inputting and editing your text components in Prezi. We will cover how to set styles, position, and group your text components. In your Prezi editor, click anywhere on the canvas to add text: A flashing cursor informs you that yo…

    729 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    15 Experts available now in Live!

    Get 1:1 Help Now