Apr 03, 2013

Sharpen And Save Your Photos For Web In Photoshop

How to Make Your Photos Look Stunning on the Web

Color Space. For the most part in Adobe 1998, but the problem with with this Color space is that it simply has too many colors for the Web. Web browsers use srgb, which is a smaller Color space than Adobe 1998. It’s kind of like comparing a human’s eyesight to a dog’s – our eyes let us see more Colors than dogs are able to.

SO, if we’ve edit an image in Adobe 1998 and upload it straight to the internet, the Colors will be incorrect. By changing the color space to srgb before saving, the Colors will remain correct!

Sharpening. Make sure to resize your image before you Sharpen, otherwise your sharpening effects will be for the most part lost. Using High Pass with a combination of different blending modes and Layer Masks will allow to you create a natural sharpening effect.

Help Save the Rainforests With Photoshop

Save for Web. This will result in a much smaller file Size. The internet isn’t just magic, it requires energy to upload all of those amazing photos. By saving for web and lowering the quality just a little bit, you can help to make a Difference!

Related Tutorial

How to Create and Upload Social Media Banners in Photoshop Why Use Templates? When uploading a new image as a social media banner, some areas will be covered by items like avatar photos and account informatio...
How to Make Sure Your Images Look Great on the Web. Making Your Images Look Great There are a lot of options to check when you are editing your images. Choosing the right ones will make sure your images...
How to Create a Text Banner in Photoshop In today's episode, we show you how to create a Text banner in Photoshop. Banners are used in a variety of different ways, but you can't just put simp...
Match Your Facebook Cover Photo and Profile Photo Perfectly Using Screenshots The secret to getting your cover photo and profile photos to blend together seamlessly is using screenshots. This will enable you to...

Related advanced tutorials

Photoshop 301
Photoshop 201
Photoshop 101


user image You
(will not be published)

  • user image
    Paul Frocchi

    ha, so funny you should post this sharpening technique today. I literally relooked at your RobGrimm/ProPhlearn to remind me of the technique.

    Attached are some product shots inspired by you and MistaGrimm. I struggle looking for subjects to practice lighting with, and that tute opened my eyes to practicing with stills.

    Thanks Aaron! “Love your show”


  • user image

    Great post. I have used high pass filtering before, but the idea of using linear for selected areas is a great idea. Thx

  • user image
    Elaine B

    I noticed that the resolution of the photo was 72 ppi. Is it necessary to reduce the PPI in Image Size if one is using Save for Web (assuming the original photo was a higher res)?

    • user image

      The ppi is a ratio meaning pixel per inch. It only matters for printing outpout as screens only display an image based on its pixel count.

  • user image

    I’m a closet hippie, so I liked that… but to reach a broader range of audience and to get the msg across to those that don’t give a feck – tell them in terms of $$$$avings to their power bill, less wear on their computers, more time for… whatever 🙂

  • user image
    John Z

    I primarily work within Lightroom with the NIK plugin collection. Is there an advantage to this sharpening/save for web process over a Lightroom workflow? Or is it just personal preference? Just wondering. Keep up the amazing work – this site is an unbelievable resource!

  • user image

    Thanks for the tutorial, I didn’t knew for the sRGB color space output as I work mainly in adobe RGB. I’ll give it a try to see if I can notice significant difference.

    I have a few question for you and the phamily though:

    Don’t you think that progressive scans (3) should be preferred over optimized baseline for format options so that one can see the image immediately (even if a rough version of it) resulting in lesser waiting feeling, especially on slow internet connection. The drawback of that option being it compute the images 3 times thus increasing the CPU load on the device (becoming less and less significant as mobile device are more and more powerful). It seems like facebook does it that way (at least for the computer version) and it is actually way better to stare at a rough image being refined than a black screen with a loading icon?

    Unsharp Mask Vs High pass filter:

    Without going to deep on that ever going debate, it seems that Unsharp Mask seems to product less background noise than its counterpart even if a little bit harder to use (for those of you using the Lightroom sharpening tool it’s quite the same though). Can any experienced user give it feedback on it as I have been using High pass filter for quite a while now, for its simplicity over unsharp mask, but have always been annoyed by the noise it tends to generate.

    here is the original article:

  • user image
    Ariel D. Romero

    This did not work for me, at all! After editing my raw files in Lightroom, I’ll send the image to Photoshop to make final adjustments. Usually I’ll save the image at about 80-90% of the original size, using the “save for web” tool in Photoshop, and let my site do the scaling. I shoot at 20 megapixels, so it usually makes for a pretty large file size. Normally I follow what Aaron teaches like gospel, so I went ahead and resized my latest image for my site just as he advised. The results were awful, my picture looked muddy and pixelated after I reduced the size to the 640×427 and then gave it a high pass touch up. I thought “well, this probably looks better than if I let my site scale it down”…WRONG! After letting my muddy picture sit on my blog for a day, I went back, resized the image down to about 50% of its full size, and uploaded to my site, to let the scaling happen there. The image looks MUCH better now, and I’m embarrassed I put up such an ugly image. Sorry Aaron, but it seems Photoshop isn’t any better at scaling than WordPress is.

    • user image
      Arturo Duarte

      When you have it scaled down and duplicate the image, you could try the unsharp mask under Filter then Sharpen. I usually tinker with the amount and radius options in the dialogue box. For the kind of stuff that I do.

  • user image

    Thanks for this tutorial. But if CMS like WordPress and SquareSpace automatically resize your images for a variety of displays, what do you sharpen for, as you stressed to make the image the size you are going to need first and only then sharpen it. Thanks, and keep these tutorials coming.

    • user image
      jot singh

      I am from india (punjab) i like your videos…plz edit my pic and send me plz sir..

      Photoshop Tutorials: Sharpen And Save Your Photos For Web In Photoshop

  • user image
    Sachin Myneni

    Loved the environmental message! I’ve never worried too much about filesize thinking that a bigger filesize will do wonders for my public image. Apparently not so 🙂

  • user image
    Arturo Duarte

    That was a great environmental message, there are plenty of people that should not upload so many pictures.

  • user image
    Michelle Gallagher

    Not as designer but curious… Will this work for eBooks also? Or and eBrochure?

  • user image
    Rob Schut

    My dear friend ….

    In the last hour you have probably :

    – Printed something you did not really had to print.
    – Ate more than you body really needed.
    – Later today you probably take your car to be somewhere where you also could
    go by foot or public transportation .

    did you even think of the environment when you did/do that ??

    you are cannibalizing your own business cause we watch your movies over and over (same thing as uploading/downloading pics huh ) so would you advice us not to do that out of ENVIRONMENTAL reasons ???

    I will stop bothering you and easy your conscience:
    – the numbers are hugely over exaggerated.
    – the alternative is printing it on paper, distributing everything all over the world, by plain, truck, train, boat, etc. (do the pollution math on that)
    – remember analogous Photography with all the chemicals and whatnot, DID SOMEBODY EVER COMPLAINED ??

    I say hurray for digital data !!!!!!!!!!!!!

    Stick to Photoshop , that is what you do best.

    Love your site, work, tips, ideas, workshops and SAY HI TO ALL YOUR COLLEAGUES who make this happening for you and us.

    Greetings from a cloudy Amsterdam

  • user image
    Ole Henrik Skjelstad

    Have had some extra time on my hands the last couple of days and have watched a lot of episodes and I have learned enormously. I do upload quite frequently both to Fb and 500px. Sizing and sharpening have not exactly been my strong sides. This episode helped a lot in that regards. Even though I have some success with my landscapes on both Fb and 500px there are still a LOT to improve. Thanks for making these videos. They are well made, informative and fun to watch. Thanks!

  • user image

    I did all the steps curious to when I resized and sharpen, why does it look as if I ran a grain filter on it?

  • user image
    Jenny pearl

    I have pocket wizard ii. I need a shutter release cable for my canon 5d Mark ii and 7d. What type of cable do I need to get? Pls help. Thank you! And I appreciate it!

  • user image
    David Roth

    Dear Aaron,

    Where did you go to school or get your training. Or are you self taught? You seem to have an incredible amount of knowledge and experience. Besides watching your “show” I’ve ordered some DVD tutorial type lessons but would you recommend a one-on-one method of learning with an instructor and at what point?
    I took a shot of my folks. I realized my depth of field was way too shallow with a 50mm wide open. Maybe it helps with the wrinkles… I used the Photoshop/liquify tool to create a smile for my dad who never smiles in pictures. Just starting out so go easy.

    Photoshop Tutorials: Sharpen And Save Your Photos For Web In Photoshop

  • user image
    Azo Matadi

    is there a link where the photo has been uploaded online so we can see how it looks?