[Q&A] Image Resolution on Facebook…Any Advise?

posted in digital workflow

[Q&A] Image Resolution on Facebook…Any Advise?

I’m going to be starting a new feature on my blog, one that will commit myself to posting credible content that hopefully will help the person that asked the question to begin with. But also to start to build an organized reference area that can be referred to at anytime for anyone. So keeping that in mind, here we go…

It seems like I had the whole resolution thing for facebook down~ I do the majority of editing in Lightroom and export out of there at no more than 1mp and then into PS5 and export as a PNG as the timeline banner spec or at 720 or 960 px lg side but it seems like hit or miss for good resolution on facebook ~ looking crunchie lately ~ any advise?

I hear your pain! Facebook has done some pretty downright laughable image over compression, and always will continue to. Honestly, the quality of the image after it is compressed after uploading is for the most part out of any users control, but there are a few things that can be done to keep Facebook’s image compression  to a minimum.

Also, lets leave the Facebook Terms and Service and copyright arguments out of this. The purpose of this post is to help you get the best quality of image that a user can get when uploading their pictures to Facebook. Quality, not legality.

While Facebook kindly states in their uploading images help section, “We automatically take care of resizing and formatting your photos for you.” What they omit to tell you is that you is that your cover photo will be degraded “optimized” for a small file size roughly around the 40KB mark. The number one reason they do this is to save on page load time, but bandwidth and storage space are in the mix too. Who has not clicked through a photo album that is well over 100 images in less than a minute? All those images have to load, and they have to be saved somewhere, granted storage is “cheep” but the user’s experience would be greatly slowed-down if there was not any image compression.

Web developers have been compressing images for years to aid in fast page load times, but now with everyone having access to a camera and the web, not everyone knows how to properly save an image for the web, and it is usually built into the back-end programming on most websites.

File Type • Color Mode • Pixel Dimensions

To start, make sure that your images are exported or converted to a .jpg in sRGB color mode at the proper pixel dimensions. This will assure a few things, the first being that your images are in the proper color mode for digital display and should hold their respective color relationships across multiple platforms and devices. Two, that Facebook will not have to resize your photo. The thinking here is that the less that Facebook has to do to your image, the better quality you can expect (hopefully).

Screen Shot 2013-10-23 at 9.29.11 PM

Here’s what Facebook recommends for uploading pictures.

Honestly, I know quite a few people who follow the image specs that Facebook recommends and sad to say – there have not been too many happy campers with that method. So, I have stubbornly stuck to my own method and seem to have better luck with resulting image quality. My reasoning behind this is that I hand the file off to the not-so-magical image compressor over at Facebook – the file is already at 72dpi, is in the proper sRGB color mode and file type. All that really has to be done is compress the file to their standards – if any. The less the “machine” has to touch my images, the better result.

Photoshop Save for WebFor this example I have uploaded five of the same images that have been saved at different quality levels. I am using the “Save for Web” feature with PS6 Extended. (File > Save for Web) Find it? Don’t be afraid, it’s a lot easier than you might expect.

You will now be taken to a new screen that looks similar to this below. If you are seeing only one image you might have to click on the “2-up” tab in the upper left. This will allow you to see the original quality and the compressed quality side-by-side.

Screen Shot 2013-10-25 at 4.32.27 PM

There are three main areas that you will use and reference mainly to specify your image output settings. With the Facebook Cover Photo, we already know that the final optimal file size is going to be around 40KB, yes, only 40KB. So even if you upload a 60KB file, it still going to get compressed another 15-20KB. Keeping this in mind, we are going to already save the image as close to 40KB as possible. I already know there will be quality loss, but I feel better being in control of that loss. #controlfreak

Photoshop Save for web prompt

Remember we are saving as a .JPEG so make sure that you have the correct file type selected then go ahead kiss that “100” in the quality setting goodbye. I also prefer to check “Progressive” to help the load time and “Embed Color Profile” to insure that the color will be as close as it can be.

This is where YOU become the image compressor. You are in the driver’s seat, optimizing your image to get the best quality while shrinking the file size. (Side note – wondering why your blog’s images for for ever to load? Try optimizing them before uploading them.) I have often found that by simply entering a 50 into the quality gets me right around, or slightly higher than that magical ~40KB file size that Facebook likes. While changing your quality level, you can see the exported image’s size in the lower left of the window. Below are examples that I have exported at different image qualities for  reference.

Saved at 0% Quality

Saved at 0% Quality

Saved at 25% Quality

Saved at 25% Quality

Saved at 50% Quality

Saved at 50% Quality

Saved at 75% Quality

Saved at 75% Quality

Saved at 100% Quality

Saved at 100% Quality

This is where I found my test to be interesting. I uploaded the 50% quality to Facebook directly, and couldn’t really tell any difference after Facebook touched it. SO then I uploaded the 100% quality and let Facebook go nuts with their compression – Remember the pixel size is already exactly the right size (850px x 315px for the Cover Photo) – so the only process that has to be done is the image compression. To my surprise, the resulting processed image looks very similar to the 50% quality image that I uploaded in the first place.

Resulting image after Facebook Compression - Started with 100% Quality.

Resulting image after Facebook Compression – Started with 100% Quality.

Saved at 50% Quality

Resulting image after Facebook Compression – Started with 50% Quality.

Keeping these things in mind I have come up with my own way of preserving the best quality possible when sharing images that I think works better, but please do not think that this is the only way. If the file is prepped properly it will help, but it is really out of our control. I have actually uploaded the exact same image back to back and had entirely different results with the auto-compression that Facebook provides.

Have your own special way of prepping files for Facebook? Leave your workflow in the comments so we can fight image quality together!

 

Leave a Reply

Your email address will not be published. Required fields are marked *