Beginners Guide to SFX
$34.99 $24.99

Episode Categories

Sharpen And Save Your Photos For Web In Photoshop

Category: Photoshop, Tools, Video
Tagged with:
Apr 03

Subscribe to Phlearn

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!

  • 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”

    P

  • http://www.facebook.com/profile.php?id=743312077 Braxton Klavins

    OMG, I think I may have killed a lot of rain forests……………………………..

  • PortraitsByRod

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

  • Pingback: Tips for Sharpening and Saving Photos for the Internet | Great Senior and Family Pictures in Michigan

  • http://twitter.com/thejoycevincent Joyce Vincent

    Shoot, me too. I never saw it that way before but it’s so true. New workflow for me from now on! Thanks Aaron.

  • 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)?

  • Eddie Sebastian

    Great tutorial. fantastic public announcement. LOL!!

  • Brycehughes

    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 :)

  • 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!

  • neben

    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.

  • neben

    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:
    http://www.thephotoargus.com/tips/sharpening-your-image-high-pass-filter-vs-unsharp-mask/

  • Pingback: Combine Multiple Exposures in Photoshop for Amazing Landscapes

  • http://www.facebook.com/ArielRomero15 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.

  • Elaine B

    Thanks, neben! I know that but I still get confused :~/

  • Chuck

    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.

  • 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 :)

  • Arturo Duarte

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

  • 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.

  • Michelle Gallagher

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

  • 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

Episode Transcript

Today I’m going to show you how to sharpen your images, get them sized correctly and get them on the internet all in Photoshop.

Hey guys, welcome to Phlearn. My name is Aaron Nace, you can find me on Twitter at Aknacer. Today we're going over something we've got a lot of questions about recently. The first is Color space. People seem to say that they're editing images in Photoshop, they'll upload it to something like Flickr, 500px and the colors will be totally wrong. I'm going to show you guys exactly what to do to make sure your colors are showing up correctly. Now we're also going to be showing you guys how to sharpen an output for the correct sizes for these things and also for things like your website. They're going to make your images look a lot better. This is really going to make a huge, huge difference.

Let's go ahead and start . . . we're using an image of a fly's face shot with (laughs) a macro lens today. I think it will be really nice for sharpening. This is Atray's image and he won the close-up contest that we had last week. Very cool image. Let's go ahead and talk about a couple things.

Our first is our color space. If you're in, let's say you set a color space, you can go to edit, and then down here to color settings. For the most part, I work in Adobe RGB 1998. The problem is that's not what the web uses. Adobe RGB 1998 has a very large color spectrum. In other words, you're going to be able to see and edit and work with a lot of colors. It's not really a great idea to work with SRGB because SRGB is a lot smaller of a color space. It's like you're not working with the entire image, you're just cutting yourself out of a lot of colors initially. What's a good idea is to work with as many colors as you can, and then when you're outputting it, then you save it for SRGB. This is what I'm working with here, and if I were to just go ahead and save this out with that color space and then load it on the internet, the colors would be not correct. That's one thing we're going to show you how to fix.

The other thing is, let's say we're going to be putting this on a website. In this case, we're going to just put it on Phlearn.com. Now the images that are below us in this post are 730 pixels wide. Let's check out the image size in this. We'll go to image, and then here to image size. Here we have a width of 1000 pixels. Now that's not a huge difference, but you'll probably notice sometimes if you sharpen an image, and it's the full resolution, it's 4000 pixels wide, or 5000 pixels wide, you sharpen that and then upload it on the internet, and its only displayed this big. It's not going to look sharp.

The reason is sharpening occurs at different scales depending on how big your image is. If your image is only going to be displayed 730 pixels wide, you don't want to sharpen an image when it's full size. You want to get it to 730 pixels, then sharpen it, and it's going to look much, much better because it's in its native resolution. That's what we're going to do. Even though this is not a huge difference, the width is only 1000, we're going to go ahead and take this down to 730 pixels. What you can do is you can create several different versions of your image. Let's say this is we'll pretend for a second that this is your full size. This is a full 20 megapixel file or whatever. You can right click here, go to duplicate layer, go over here to new and there we go.

So let's say this one we're going to be putting as a bio-picture—which I don't know why you would do that (laughs)—but we'll go to image size and this bio-picture is only going to be 100 pixels wide. You can make that 100 pixels wide. In this one, we're going to put . . . we're going to actually put this in the post down below. This is going to be 730 pixels wide. I went ahead and sized that. You can create a couple different versions and then after you've created these versions, then you sharpen. Let's go ahead and show you how to sharpen.

First, get to the proper size that you're actually going to put something on the internet. Then you want to do your sharpening. Here's how we're going to do our sharpening. Let's go ahead and full screen that, and zoom in. You can see it's not a very large image, but this is when you want to sharpen. What we're going to do is, is I'm going to hit command J on a background layer, that's going to duplicate it. Now, we're going to use a high pass filter for sharpening, and I don't want that to mess up our colors. The next thing I'm going to is desaturate, and you can do that while holding Shift command and hit U, or you can go to image adjustments and then down here to desaturate. Both will do the same thing.

The next thing we're going to choose is to change our blending mode and we can choose either overlay, soft light, hard light, any of these things and I'm going to talk about the differences between them in a second. Let's go ahead and choose overlay. This is a pretty common one. We can see already it does have an effect, not exactly what we want, this isn't sharpening, it's just actually making the image look a little different. Now what we're going to do is run the high pass filter. We're going to go to filter, down here to other, and here to high pass.

Now you want to choose a radius over here that's going to be. . . that's going to show the maximum amount of detail for your image. The reason I go ahead and change my blending mode to begin with is I can actually see what's going on here. You can see as I bring this up and up and up, we're going to get a different effect. Somewhere along the lines, it's going to go from not being very sharp to quite a bit sharper, and then right over here it just looks pretty poor. What I would recommend is finding . . . you can use the numbers or the up and down keys on your keyboard, by the way.

If you hold the Shift up and down, it will go by full numbers here and just up or down one will go by .1, .2 or .3. I would recommend just popping a couple of these up and down, figuring out what looks the best. Here the radius of 1.9 pixels–that looks pretty good. We're going to hit okay. Keep in mind guys, my radius was 1.9 pixels, but if this image was full size, a 1.9 pixel high pass filter would do almost nothing. That's why you want to get to the size first, and then do your sharpening. Let's just go ahead and see some of these areas might look good, but some of them might be overkill.

I like the eye's before, so we'll just pop a layer mask on that and we can just paint black on our layer mask over where the eye's are and then we're not losing some of that nice information that's there. I can do this, which is going to selectively sharpen part of my image. Now I can do the same thing. Let's just duplicate our background layer again. I'm going to go ahead and hit Shift command U to desaturate this. We're going to try something like linear light which is going to be a bit stronger of an effect. Soft light is going to be the least amount of effect, overlay is about in the middle and linear light is the strongest.

For this, we're going to go, basically just do the same thing. Filter, other high pass, and we can choose a different radius. You can see it starts to get really, really gritty. The one thing I do want you guys to keep in mind is that you can totally use your . . . let's just hit okay. That's pretty gritty, right? It's a bit too much. For the most of the image, but you can use your layer mass to define what areas you'd like to be sharp and what areas you don't.

Let's just go ahead and hold Alt or Option, Alt or Option. . . I'm going to put a black layer mask on that. Then I'm going to paint white right over here, and that's going to allow these hairs to really stand out. I'm choosing my selective area of what I want to sharpen and what I want to keep relatively unsharpened. Here's the before, and there's the after. You can do things like lower your opacity, which is just going to bring those effects down just a little bit.

Finally, we're going to do a soft light layer, and you don't have to do all these layers, by the way, I'm just showing you guys a couple different techniques that you can do in any combination with each other. Soft light is going to be the least amount of effect, so sometimes what I'll do is I'll go ahead and bring my radius up a little bit higher with the soft light. There we go. We can see that just did a general sharpening of everything.

Here's our before, and our after. You can see it's much sharper, it's got the crispy, crunchy look on the after. Maybe these are just a little bit too visible, and you can change your opacity and things like that, just like I'm doing here. There's our before and our after. We went ahead, we've got it to the exact size we want, and that's a disgusting looking fly. (Laughs) It's going to be great on the internet. People will be, "Whoa, it's so sharp and disgusting." Maybe that's the whole point of it all. I don't know. Let's change the opacity just a little bit on that. There we go.

Now what we're going to do–we sized it correctly, we went ahead and sharpened it at this current size and now we're going to save it out for the web, and make sure it's going to display correctly on every website. What you want to do is go to file, and you want to go save for web. Don’t bother with save as for this point. If it's going on the web, go to save for web. Trust me, every time it's just going to be much better. There are a couple of reasons why.

First is right over here. It's going to automatically convert it to SRGB. Web browsers like Google Chrome and Firefox, they use the color space SRGB as their default. If you're images are SRGB, they're going to show up correctly. The correct colors are going to be there, you're not going to get any weird things going on. The second reason is, and this is a moral reason, (laughs) every time you upload something on the internet, it takes energy to do so. That energy comes from somewhere. Usually they're cutting down trees, or burning coal to do so.

The difference between uploading a one megabyte picture and a ten megabyte picture to the internet, over the course of a year that could be a small part of a rainforest . . . if everyone in the world is doing that over and over again . . . I read recently that every time you upload a picture to facebook, it's the equivalent to cutting down a tree. Keep that things in mind, that's kind of a moral thing too. We just owe it . . . we don't need every single image we ever take to be on the internet and we don't need them all to be huge. This is a great place to get your images small, but still look good. It's in a safer web and devices.

We're going to choose our JPEG right over here, and we can see, here's our quality. If we go up to 100, our file says it's 280 kilobytes, which is not bad. We can come down to something like 67, or let's just try 60. I see no difference. It doesn't look any different, and now our file says it's 95k. Think about if every single person did that before uploading images to the internet, all the images . . . that's a pretty big saving and file sizes which saves in energy and transfer costs, all kinds of things. Just trying to save the environment, one file at a time.

Let's go ahead and bring this down to 60. The file still looks exactly the same, which is great. It's just taking up less space, 94 kilobytes, as opposed to again, 280 kilobytes. There we go. We're going to hit save, and we'll just put this on my desktop and we'll call this flyface, because that looks fun. That's all you have to do guys. Again, all you really (laughs) . . . what you're doing here is you're getting your images sized correctly, to what they're actually going to be on the internet, to sharpen them at that size and then save for web and devices. That's going to fix all of your problems in life. Guys, thanks so much for watching Phlearn. Hope you didn't mind that environmental message, but it's really important. Thanks a lot guys, and I'll Phlearn you later. Bye everyone.

Free PRO Tutorial
Sign up for our newsletter and instantly receive a free PRO Tutorial!
Over 20,000 people
are already signed up.
Random Tips

If on a mac, close and reopen Photoshop every hour or so – speeds things up a bit.