Optimizing your Photos for Facebook

2009/5/29 (Friday) | Filed under: How To/Tech

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 have when viewed on my home computer. I suspected this was due to the way Facebook, resized, re-compressed or otherwise altered the image automatically on 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 product image I thought had good sharpness and color.

Orignial image, squished a bit by Wordpress. Click to view full res.

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 space age camera, Facebook will knock it down to 604 pixels by about 400 pixels, or about 1/4 of a megapixel. It will also end up in the sRGB color space at 72 PPI.

There is nothing wrong with this really.  To a computer monitor, everything above 72 PPI is basically superfluous. 72 PPI is the standard for web images. See this article for a more detailed explanation of PPI vs DPI.

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 at 300 PPI in that big color space. You might just see a difference.

resizing the image

resizing the image

In Photoshop you can resize your image by going to image>image size. Make sure “constrain proportions” is checked and PPI is set to 72. Now set your long edge (width or height, whichever is greater) to 604 pixels. Let the other number change on its own to preserve the aspect ratio of your photo.

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 shome sharpening

Re-introducing shome sharpening (pun intended)

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 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 and resolution numbers.

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.

I also ran a version using “save as” instead of “save for web” to see if the quality would be any better. To be honest, it wasn’t much better.

Judge for yourself here in the Facebook gallery. Note the difference between the picture Facebook processed on its own versus the pre-sized and sharpened ones.

For those interested in VERY expensive knives, I shot about 70 knives for the Premier Knife Auction in Chicago. The print catalog will released soon, but you can see more photos of these collectible knives and join the online bidding at their auction site.

Thanks for looking!

**UPDATE- for a limited time, I am adding some free Photoshop actions for doing this automatically. I created them in CS3 so I cannot guarantee their compatibility with all versions. I just ask that if you download my free photoshop Facebook actions that you please come back and leave a comment to let me know what you think and if they worked for you. Click here: download free Photoshop actions (.ATN file format) .

Installation: Start Photoshop, press F9 to open the actions panel, click on the dropdown menu on the top right, click “load actions”, browse to your downloaded ATN file and enjoy!

**A couple of notes:

1.) The action will pause on the sharpening part so you can adjust your own sharpness levels.

2.) The resize is done using bicubic smoother. I feel that bicubic sharper is too sharp for my eyes sometimes. The pause offers you greater control of the final sharpness.

3.) The file is converted to the sRGB profile in Photoshop and, additionally, saved for web. I think this should help you see the same thing in your PS window as in your “save for web” window. (Correct me if I am wrong).

4.) There are two actions, one for portrait (vertical shots) and one for landscapes (horizontal shots). Be sure to use the correct one for your application.

5.) Don’t start with a hazy, underexposed picture and expect miracles to happen. This is meant to simply preserve the color and sharpness of your original file, NOT enhance it.

Enjoy! If you like this article, please help me out by posting a link to my blog or website at http://www.balancedigital.com. Thanks for reading.

back to top

Comments(17)

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

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