Optimizing your Photos for Facebook

2009/5/29 (Friday) | Filed under: Fashion,For Photographers,How To/Tech,Portraits

Uploading pictures to Facebook has always made me a bit uneasy. They just don’t seem to have the same color, sharpness or “pop” that they once had. I suspected this was due to the way Facebook, resized, re-compressed or otherwise altered the image upon upload. Hence, this little tutorial on saving your images in the best possible way BEFORE uploading to your Facebook album for optimal results.

I started with a recent head shot I thought had good sharpness and color.

model head shot

Original image, squished a bit by WordPress. Click to view full res.

The first thing to do is resize the image on our end to Facebook specs. This will ensure that what we see in terms of contrast and sharpness at 100% view will be pretty much what ends up on Facebook. No matter how awesome and “high res” your original picture is from your 2 million dollar 500 megapixel Hasselblad camera, Facebook won’t have a use for anything larger than 2048 pixels on the longest edge. (about 4.2 megapixels, max). It will also end up in the sRGB color space.

72 PPI has somehow become the “standard” for web images. See this article for a more detailed explanation of PPI and how it does not affect the on screen display of your photos. Set it to 72 or 83 or 300 or 507 if you’d like. All the end user’s computer cares about is how many pixels wide by how many pixels tall the image is. PPI won’t come into play until you print the image. It will simply be displayed pixel for pixel on a screen.

For 90% of computer monitors, anything beyond good ‘ol sRGB color space is also a waste. Most monitors just can’t display the full spectrum of ProPhoto RGB or Adobe 1998.  I know some noted pros who shoot in JPG mode with the camera set to sRGB, and process their finals in 72 PPI. Keeping your “digital negatives” or RAW files in a larger color space might be a good idea for the future, but for the most part, on a computer monitor it is an unnoticeable difference. For print, go ahead and process your RAW files in that big color space. You might just see a difference.

image resize fro Facebook

resizing the image

In Photoshop you can resize your image by going to image>image size. Make sure “constrain proportions” is checked. Now set your long edge (width or height, whichever is greater) to 2048 pixels. Let the other number change on its own to preserve the aspect ratio of your photo. I typically set the resample image setting to bicubic or bilinear so I can handle the sharpening on my own in the next steps.

Next, double click the magnifier tool to view your image at 100%. I try to do most of my editing at 100% view since it is the most accurate portrayal of the image, not being “squished” to fit on your screen or magnified beyond its means to the point of pixelation.


Re-introducing some sharpening.

At this point, the image can look a bit hazy from resizing. You can reintroduce some punch by using unsharp mask. Go to filter>sharpen>unsharp mask. Its a relatively small image, so I start with small numbers, an amount of about 60% and radius of 1/2 pixel. Tweak this to your own taste. There is no simple formula, it really depends on the subject matter in the frame, not just pixel dimensions.

Voila! You’re now ready to save your image and throw it up on Facebook for your friends to see. One bonus of going through this is that, although it takes some time, it makes the upload go way faster since we are downsizing it preemptively.

Go to file>save for web. Since Facebook will add a bit more compression, I set my mode to JPG, quality to “100″ and make sure “progressive” is unchecked. “Save for web” automatically converts your file to sRGB color space by default. Web browsers can’t obey color profiles, so that’s the way to go for photographs bound for the web. Facebook will also accept .PNG files, but I have not noticed much of a quality difference (at least on my monitor) between a JPG and a PNG.

When uploading the image to Facebook, be sure to select high quality for the 2048px images.

Here’s a Facebook example.

Thanks for looking!

Side note-  Don’t start with a hazy, underexposed or out-of-focus picture and expect miracles to happen. This method is meant to simply preserve the color and sharpness of your original file, NOT enhance it.

If you are familiar with Photoshop and want to automate the process, try my Free Photoshop Actions here. Load the actions into your actions panel and they will do all this stuff for you automatically. For now, they are free to download, but if you use them, please  help me out by sharing this blog post or liking the Facebook page. Thanks for reading!

Popular Posts:

back to top

Comments(48)

  1. Chick Lockerman


    June 15, 2009
    2:32 pm

    Thanks for the information. Your page told me (a Mac user and designer) exactly what I needed to know.
    Beautiful page and great knife!

  2. Whoa, thanks for the info! I hadn’t even considered DPI. Up until now when I’ve been adjusting for Facebook I’ve only considered the 604 px size.

    By the way, I was wondering if you might upload a third image to the album so that we could see what the knife image looked like when Facebook handles all the processing on its ownsome.

  3. Ask and you shall receive. I added a third to the Facebook gallery, letting Facebook do its own resize. I started with a 1024×683 or so. It was already 72DPI and sRGB so you will notice the main difference is the sharpness upon resize (or lack thereof) when Facebook does its own thing..

  4. If you are downsizing a photo, it’s also a general rule to use Bicubic Sharper in the “Image Size” dialog box (drop down list at the bottom).

  5. Great info. Always wondered why the pictures turned out so bad. I would even resize to 1000px wide, but it would still compress it. 604px is what I’ve used and now it is more crisper

  6. Thank you. I appreciate you taking the time to provide this information.

  7. Thank you for this informative article – just the information i was looking for.

  8. Excellent info that I used extensively in June. However, I am wondering if FB has changed its format for photos? Is 604×400 still the optimal size? They don’t seem to look as sharp anymore in my recent trials. Thanks again!

  9. YC- its not necessarily 604×400, but the longest edge is still 604, yes. Just set your longest edge to 604 pixels and let the other one adjust automatically. Download my Photoshop action at the end of the article if you have Photoshop. It will automatically walk you through the resize, sharpen, and save process.
    Thanks,
    Rob

  10. thanks Rob!

  11. Very helpful, thanks. I read a while ago that the optimal size should actually be 603px x 402px. Here is the link: http://www.facebook.com/album.php?aid=245774&id=593745025&l=b6b11cf6d2

  12. Thanks so much for this. It worked perfectly! (well…you know what I mean, haha)

  13. Great information – thanks.

    Do you know how this would translate using GIMP rather than Photoshop?

  14. thanks for your comments- not sure because I have never used gimp, but the size, PPI and sRGB will still hold true. Maybe someone else will chime in with detailed GIMP instructions?

  15. Hi Rob, Thanks for the tips for optimising… worked a treat. And the examples you gave on your Facebook account really help emphasise how much more detail can be regained with a couple of quick steps.
    I’m not sure if you’re aware but you can combine your Portrait and Landscape Action into a single action (saves the hassle of doing separate runs for both!):

    Instead of using the Image Size command to resize, click File > Automate> Fit Image…
    and set the constraints to 604 x 604 – that should automatically scale the image down to 604 for the longest edge, just like how facebook resizes.

    All the best!

    Ads

  16. Thanks for that addition Adam, good way to simplify the action.

  17. Thanks so much Rob!! I always wondered how people get such sharp images onto FB. This is great and the ATN file just made it a whole lot easier! :)

  18. Thanks for this wonderful guide. I always wondered why those facebook pics never looked like my originals

  19. sweet, thanks dude.
    also, checked out the auction for the knives.
    these ones sold for $1,400.00
    price was est$2,000 thats alot for knives!!

  20. Rob,
    I just came across your article and want to thank you for the explanation and instructions. I noted in one of the comments you wrote you said this ‘action’ for Photoshop was at the end of the article for downloading, but I don’t see it. Am I missing something?
    Thanks again!

  21. Hi Tammy- glad this helped. I need to update the action since FB recently upped their size to 720px. Should be up soon.
    Cheers,
    Rob

  22. hi there! thanks so much for this helpful article! will the new action for the 720px be available soon? i’d love to know when it becomes available. thank you! btw, you are such a talented photographer. your photos are amazing! i loved looking through them.

  23. Jen- yes, the current version is the 720px version. Use the link in the second to last paragraph.
    Cheers,
    Rob

  24. Ariel Leshinsky


    May 7, 2010
    1:30 pm

    Hi Rob

    Thanks for the guide, since everyone now use fb and upload photos to it it is good info how to put clear pics to fb

    I tried your guide, and also tried the actions u posted but i still cant put my pics, the are still look horible, and the size of the pic after the resize is bigger then the original, any advice ?

  25. Ariel-

    The guide should really mention that you need to start with a large enough image. Start with the image straight out of your camera which should be larger than 720px by 720px.

    If you start with anything smaller than 720×720, do not use my action, simply sharpen to taste and upload.

    Again, this method is not meant to improve your photo, only to preserve what you started with.

    Best of luck,
    R

  26. thanks for the article. very interesting.

  27. Thank you so much for this information! I’ll tweet about this post :)

  28. Johannes North


    October 10, 2010
    4:45 am

    Nice post. That is a one beautiful knife there.. Can you please email me where can i get one?

  29. Thanks very much for this tip. I’ve now added a Facebook preset in Lightroom to export photos at 720 px for the longest edge, 72 dpi, 100% JPEG quality, sRGB. (I was already doing the 72dpi and sRGB for web photos, but normally set for 85% quality.)

  30. great pic of the knife.

    what concerns have you with regards to copyright protection taking by facebook.

    i have been reluctant to post there due to this concern.

    see my glamour, art, nude port, if you like at

    http://www.culturedwoman.com

  31. Maggie-Lynn Dze


    January 24, 2011
    11:14 pm

    Hey! Thanks for taking the time to make this tutorial, it makes such a huge difference! Just what I needed. :)

  32. A question. If you take a picture that is in landscape mode (f.e: in 1024×768 resolution) and let it do the procesing on it’s own. Does it resize to a portrait (vertical) orientation automatically?
    If it does. Is the process done on any photo? or it depends on the focused subject? And if so, what subjects do trigger it?

  33. @fbsduser No, Facebook will not change the orientation. It just takes the longest edge down to 720.

  34. Killer Photoshop article. In the past I’ve just sharpened my images before uploading them to FB. I just recently developed this cool Facebook profile pic creator as well. Maybe your readers will like it: http://biggapic.com

  35. Hey! I used your action at my photos :) Check it ;)

  36. Thanks, that was the most helpful article on the subject yet (I’ve been searching for the last 3 days)! Good explanation. It will improve the way I upload my photos to FB.

  37. From Spain, millions of thanks! I tried several tutorials and yours has been the only useful!! Very clear explanations and really helpful. The result is impressive.

    I have just a question. After the optimization the picture shown in the Facebook is significantly smaller (around 15%). How can avoid this? Introducing a image size bigger than 720.

    Thanks in advance! I am not sure if you will you reply me by e-mail or here :-(

  38. The new spec is actually 960px, need to update my article!

  39. Thanks again Rob!

    I am really grateful. I’ll keep an eye in both your blog and your pictures.

    Saludos desde España

    Pablo

  40. rob,
    i knew recently FB has been announcing the new specs is 960px… and i’ve been trying to save my pics in photoshop with 960×640 with 72dpi and tried to upload it to FB… it’s still downsizing it to 720×480 :-( do u know why i still can’t get 960px pictures on FB? is there anything i’ve done wrong on photoshop or during picture saving? i’ve seen many FB users having 960px pictures when they do sharing :-(

    fred

  41. @Fred- I don’t know! My best guess is that they are rolling this out slowly and some accounts just have not been changed to the new spec yet.

  42. Hi!
    I just used your facebook action, and its the best one I have tried! Thank you!! – Jennifer

  43. Hi

    I’m using PE9 and would really like to use your FB resize action

    Where do I save the file too?

    Regards

    Dylan

  44. This is really helpful, thank you. Anyone out there use Aperture and have any hints/advice on resizing in Aperture?

  45. Hey thanks for the Info & the free auto Photoshop action, it works great! As a Photoshop user myself I’ve found it extremely helpful. just one thought to consider though is perhaps putting in copyright info via File > File Info > Copyright status into the action.

  46. Thank you~

  47. Thanks a lot for this great information! It really helped a lot :)

  48. Thank you SO much – you’ve solved such a headache for me. I’m a pet portrait artist that raises money for charity as I go – but my images looked truly dreadful on FB.

    You’ve saved the day – thanks again xxxx

No comments yet.

Leave a comment


Please leave these two fields as-is:
Clickcha - The One-click Captcha




You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

TrackBack URL

back to top