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