How I Upload My Photos to Facebook or The Photographer's Guide To Photo Formats For The Web

How I Upload My Photos to Facebook or The Photographer's Guide To Photo Formats For The Web

If there is one thing I get asked, and that has been answered online time and again, it's "How do I get my photos to look like I want them to look on Facebook?" followed immediately by "Why does Facebook ruin my photos anyway?" and finally "I just want my photos to look awesome on Facebook." The bottom line is, Facebook does give us options, loopholes if you like, and we just need to adhere to them and our images will look stellar. But, what are these magical settings? I decided I was going to fuse my two careers together into one article, and explain it all as best I can.

Assuming Facebook doesn't change these anytime soon, here are the full details on what I do (at least) to make my images on my Facebook Page look clear, sharp, and with minimal or no data compression, as of December 13, 2014. Let's start with some history, because thorough knowledge is better than hasty knowledge.

At the end of this article, I have added minor, dated updates since it was published as new information became available.

The Technical Stuff

Note: If you don't want to bother learning about the technical aspects of file types and image data on the web, and just want to make your photos look better on Facebook, skip this section and scroll down.

Now then, when you discuss photos on Facebook, you are really discussing image data on the internet, broadly speaking. Having some background in web design would help you as a photographer striving to showcase their work online, but not everyone has that luxury. I started working as a web designer in 1997, and worked on my last website project as recently as 2013, and I can tell you that showing images on the web isn't as linear and simple as one might think. Yeah, it can get complicated and technical, but there are also tons of unnecessary bits of tech information we photog's don't need to worry about. So let's break it down into the elements that a photographer in the modern, internet age needs to be concerned with.

File Types

There are bonkers amounts of digital image (raster) file types in the world, for every industry from film to websites to medicine, and it can hit you with the subtlety of a squadron of flying mallets when you first dive in to the subject. So, to make it simpler, we will only discuss the file types that relate to images on the web, and more specifically file types that matter on Facebook.

JPG

Let's start with the one you've probably heard of (well, mostly likely anyway, since your camera can create these types of files), which is the industry standard JPG. Keep in mind, JPG was originally JPEG, which is an acronym for Joint Photographers Expert Group, the committee that created the file type standard. JPG is what is known as a "lossy compression format", or a file type that utilizes data compression to decrease overall file size, but at the sacrifice of image quality (sharpness, smoothness, color consistency, etc) That said, just because JPG uses data compression, it does not mean that a minimally compressed JPG file is "bad" or "low quality". JPG image quality can vary wildly depending on the compression settings, so don't discount it as a good format for your images. You don't really have much choice, though, because JPG is the de facto standard format for digital images on the web. Want to know even more technical details? I recommend you start with the Wikipedia entry about JPEG (warning: heavy reading).

Check out the same file as a JPG compressed to quality 100 (minimal compression) and a JPG compressed to quality 0 (maximum compression). Use the slider to compare, and note that the 100 quality version is 445kb and the 0 quality version is 31kb. 

JPG compression setting: 0
JPG compression setting: 100

We don't want our images looking like the 0 quality version, dang it!

GIF

Next up is GIF, which stands for Graphics Interchange Format, and is different from JPG in many ways. This extremely antiquated file type (first introduced by CompuServe in 1987) made its way onto the internet via goofy, simplistic graphics in the web's infancy. In modern times it was given a stay of execution, in terms of common usage, because of one main reason: it supports animated sequences via sequential frames. While the GIF format is extremely limited in color (can only support up to 256 total colors in any given file, or said another way, less than .01% of the color information of a RAW file, making it worthless for contemporary digital photographers) the fact that it was implemented as one of the image file standards for web browsers and it supports frame sequences kept it alive and popular. Heck, now we have entire websites dedicated the fascination of "Funny GIFs". Video sequences can be converted into comparatively smaller sized GIFs, though with a signifcant quality loss and no audio, and can play on any browser, so this format perseveres. And although GIF supports transparent pixels, as it were, it is seldom used for this purpose since it has been effectively replaced by PNG for that purpose. Which is great because GIF does diddly squat for us photographers showcasing our work online. Feel free to read up on GIF's history if you're down for that sort of thing.

Wanna see what a pro photographer's image looks like as an 8-color GIF vs a 256-color GIF? It's pretty significant. Use the slider below, and also note how both versions are crummy ways to show your images online if quality is a concern for reasons of bit depth, but also see that color management goes out the window as embedded profiles are not supported.

1994 called, they want their web images back.

PNG

Which of course brings us finally to PNG, the "newest" of the common image formats for the web, introduced in 1996. PNG stands for Portable Network Graphic, and unlike JPG is not a lossy compression format. Thankfully unlike GIF, it supports many thousand times more colors, which is a good thing, but also makes way larger files. This is one reason why PNG didn't take off immediately in the early stages of the mainstream web, as dial-up access meant downloading a 1MB PNG photo was impractical (read: slow as hell). As a lossless format that supports as much as 32 bit RGBA color, the immediate reaction to the uninitiated might be "PNG is the format for me", but there is a catch. For one thing, while the web browsers of the world support 8-bit (PNG-8) and 24-bit (PNG-24) PNG files, remember that it is a lossless format. In other words, PNG uses no lossy compression to decrease overall file size. The upshot is that image quality is not compromised, but keep in mind that the same pixel dimension JPG file at minimal compression is always quite a bit smaller than a PNG-24 at the same pixel dimensions. You can get jiggy with the details about PNG as well, if again you are so inclined.

Check out this 2048x1365 px image as a minimally compressed JPG (2.3MB) vs a PNG-24 (4.4MB). Even the most militant digital photophile would be hard pressed to tell the difference between them, but the fact remains that the PNG is almost exactly twice as large as the JPG. 

PNG-24 also supports something called alpha transparency, which is hugely useful and used regularly by web designers. Photographers, not so much.

And This Means What on Facebook?

You want your images to look as amazing on Facebook as they do in Photoshop, or at least darn close, but lo and behold, Facebook makes merry with your images when you upload them and now they look like poop. This happens because your files are being converted by the Facebook systems, and the end result is having your file turn into a significantly compressed JPG file.

The horror!

Are you asking yourself, or perhaps screaming at your display, "Why!!??!". Well, the answer is simple practicality. Facebook receives (no joke) well over 100,000,000 image uploads per day. I'll pause a second to let that sink in. 100 million photos. Every day. And that figure is likely quite a lot higher. So it is no stretch to imagine that Facebook has some pretty significant file serving and capacity concerns regarding images. Therefore, when the average Facebook user (who is usually not a photographer) starts to upload their vacation snapshots at full resolution (because of course they would), the Facebook system kicks in to resize and compress these images immediately upon upload. This function can reduce the overall size of a batch of full resolution, minimally compressed images by as much as 99%, helping file storage and data hosting considerations across the board for Zuck & Co. This works just dandy for 99% of Facebook users because 99% of Facebook users just want their friends to see that they were drunk as a skunk in Bermuda, and how funny that snapshot is. Quality of said drunk image is irrelevant to these 99%, so the image gets uploaded and shown on feeds, the user who posted it is pleased, and Facebook saves a crapchunk of data capacity. Remember, Facebook is simply a website, and web standards apply across the board.

Anyhow, the unfortunate thing is that we are photographers. For us, image quality is not just preferred, it is our very livelihood. So when we first upload that epic, super sharp, colorful image of the bride & groom from the most recent gig, and Facebook kicks in and resizes and compresses it, we feel threatened. We worry that potential clients may see it and think "This isn't very sharp, I dunno that I like this photographer's work very much."

The good news is, most potential clients can't tell the difference. The bad news is, you are a photographer, and you notice. Therefore, it matters that you get the matter resolved. 

If you've ever researched the "uploading your photos to Facebook" subject in detail before, then you may very well know that other pixel dimensions also work beyond 900x600, but I am going to start with the type of image I upload the most, vertical portraits, and I love how they work on the web at these dimensions:

Rather than go into the details of why this works, I will just say you should really be using Photoshop for purposes of file prep, and below are the key bullet points (that work for me 100% of the time) you need to know to prep your vertical photos for Facebook:

  • Go to Image Size (Image/Image Size) and resize to 900x600 px
  • In the Image Size options, be sure that "Resample" is checked and "Bicubic (smooth gradients)" is selected in the pulldown, click Ok
  • Go to the Save For Web function (File/Save For Web)
  • Select the format: PNG-24
  • Uncheck "Transparency"
  • Uncheck "Interlaced"
  • Check "Embed Color Profile"
  • Check "Convert to sRGB" and use "Internet Standard (No Color Management)" from the pulldown
  • Embed Metadata as you see fit in the next pulldown menu
  • Save your file in a folder on your drive, ideally your repository of Facebook ready versions

NOTE:  Using the same process above, except sizing your cover banner image to 851x315 px, you can upload a crisp and clear PNG as your Page's cover image.

Quickie visual in case it helps ya out:

Click to enlarge.

Next, and this is crucial, you need to know where this file works on Facebook and where it doesn't. If you don't know this stuff up front, you will try to do them and then you'll be angry at me, so make mental notes of these:

  • Upload to anywhere on your Profile: Facebook compresses and resizes your images. Bad.
  • Upload to any Group: Facebook compresses and resizes your images. Bad.
  • Upload to a Message you're sending: Facebook compresses and resizes your images. Bad.
  • Upload via any mobile device: Facebook compresses and resizes your images. Bad.
  • Upload via any other site, app or platform into Facebook: Facebook compresses and resizes your images. Bad.
  • Upload full resolution anywhere on Facebook at all: Facebook compresses and resizes your images. Bad.
  • Upload a RAW file, Facebook kicks back an error stating that it does not support that format. Really bad. And stupid.

​Feeling limited? Fear not, because Facebook knows that business Pages need to be able to show images clearer, and without getting compressed, and that is what you can exploit. But you have to follow the rules they've laid out in order for it to work:

  • Create a new Album in your Page, and name it whatever you like ("Portfolio" is a common choice)
  • Click to view the Album
  • Click on "Add Photos"
  • Select the vertical PNG file you just saved
  • As it starts to upload, make sure the bottom left checkbox "High Quality" is checked
  • Let the upload finish, then continue

If you did everything correctly, your image should have been accepted by the Facebook Page system as a PNG-24, and unchanged. As such, it should look amazing (or how it looked when you saved it on your drive, at the very least).

As for horizontal images, all the same considerations apply, but I strongly recommend these settings:

  • Go to Image Size (Image/Image Size) and resize to 2048 px wide (this is not only accepted by Facebook for your Page, but also allows for more resolution available for those viewing your images on a computer display. Makes for epic landscapes)
  • In the Image Size options, be sure that "Resample" is checked and "Bicubic (smooth gradients)" is selected in the pulldown
  • Go to the Save For Web function (File/Save For Web)
  • Select the format: JPEG
  • Quality: 100 (because why the hell not, it's not your server space. You can, however, use as low as 75-80 with no obvious quality difference)
  • Blur: 0 (don't ask)
  • Uncheck "Progressive"
  • Uncheck "Optimized"
  • Check "Convert to sRGB" and use "Internet Standard (No Color Management)" from the pulldown
  • Embed Metadata as you see fit in the next pulldown menu
  • Save your file in a folder on your drive, ideally your repository of Facebook ready versions
  • Do the same upload procedure to an Album on your Page as stated above
  • Revel in the epic quality of your images on Facebook

Try this out, and let me know if it works for you. If you have any doubts about the results I get with this, check out my Facebook Page portfolio (warning: glamour) and browse around. You'll find minimally compressed JPGs and super clear PNG-24 files everywhere. 

IMPORTANT: When browsing Facebook via any mobile device, all bets are off. Facebook uses a different aspect of its file delivery system, compressing data (including and especially images) on-the-fly as you download (view) them via mobile. Basically, nothing I reviewed in this article will directly impact your mobile Facebook experience. The good news is, JPG compression is less noticeable on a mobile device, for the most part. So, don't panic.

UPDATE 12/21/14: Further experimenting with uploading to my Facebook Page has yielded a new result. I uploaded a PNG-24 directly, to my timeline on my Page, and it remained unchanged (stayed as a PNG). This is different than my experiences before, so I am exploring why this suddently worked on this particular image. I theorize file size has something to do with it.

UPDATE 2/10/15: It seems Facebook has changed its Photo Uploader interface. As of this week, I noticed the "High Quality" checkbox is now, in fact, in the upper left and not the bottom left as I mentioned above.

UPDATE 4/20/16: I've confirmed (by repeated tests yielding the same result 100% of the time) that uploading a PNG file to your Page that is more than 1MB will cause the file to be converted to a JPG (and subsequently over-compressed). I found that if I tried a 960x640 PNG that ended up 1.1MB, I could simply make it 900x600 and it would be just below the 1MB limit, and therefore not get converted to JPG. Remember, PNG is "lossless compression", not "no compression", meaning that while no quality is lost upon saving as PNG, the file size is determined by the overall complexity (number of colors used, etc) of the file. 

UPDATE 5/9/17: There seem to be somewhat conflicting reports on whether or not 2048px long side JPG files work, as either horizontal or vertical. Many photographers have encountered tons of problems trying this, and others claim it works every time. Try it out and see what happens for you if you want larger verticals.

UPDATE 3/5/19: Currently I am uploading every image I add to Facebook at 2048px long side, as a minimally compressed JPG, with consistent success. So far, I have not encountered an issue with this approach for almost a year, and find the results to be quite good, even on my Profile. On occasion, some images seem negatively affected, but for the most part this has worked well since early 2018 from what I have seen. It is my belief that Facebook has expanded their capacity capabilities exponentially, and can be more generous with file sizes these days.

If there is a glaring error on any of this information, be sure to point it out in a smug comment below!

Log in or register to post comments

84 Comments

Previous comments
Nino Batista's picture

Resolution is totally irrelevant on this matter. That is a printing matter. I get asked about that a lot as well, may be doing an article about it soon!

Thanks Nino. I thought that it was relevant just for printing, but wanted to double check that what I'd read elsewhere was correct.

I followed the guidelines in this article and I have uploaded a high quality in December 2014. To check I have downloaded the picture from facebook and the size was about 3.5Mb. The quality was good indeed.

Today I've tried to upload another high quality picture, but no luck. The uploaded was ugly and the downloaded picture was about 400Kb.

I tried to upload the image I uploaded in December. No luck.

At this moment I'm confused: it seems the uploading algorithm is randomly keeping or discarding high quality feature while you upload an image.

Kendra Paige's picture

I could hug you for this article. A million thanks!

I didn't use to have an issue with my photos looking like crap on FB. I really could care less. Most of my viewers were friends and family and couldn't tell a good photo from a bad photo even when it was obvious. However, I now have many photographer friends and certainly want them to see the best I can show them. This article really helps me to understand things a little better and explains a few things I didn't know. Thank you!

Robert Robbins's picture

Superb article, and the follow through with the updates, commendable! great work!

Hi Nino... Great article; however, I've followed step-by-step, and when I check on the FB image one uploaded to see if it retained its "png", it's back to the "jpg". Can't seem to figure out what went wrong.

Nino Batista's picture

Are you uploading the vertical PNG as 960x640 and into a folder? If not, try that because it works every day for me. Even this morning.

Somehow the settings work for horizontal images but not for vertical. I have tried multiple times but facebook still converts png to jpeg and compresses it.

Nino Batista's picture

Are you uploading the PNG as 960x640 and into a folder? If not, try that because it works every day for me. Even this morning.

what should be the dimension for landscape ? 2048 X ?

Nino Batista's picture

As far as my testing has shown, if the long side is 2048, the short side can vary. I think the only limitation on 2048 longside images might be overall sile size, but I have not found that limit as yet.

This the most thorough explanation I've seen - thank you for all the detail. Is there any possible way to upload from the mobile app in "high quality"?

Kon Iatrou's picture

Hi Nino, great article. I followed the steps to the letter for a horizontal image and I still see that it's not as sharp as when I see it in PS6. Are there any further updates for horizontal images?

Mohamed Nidhal Battiche's picture

Hi Ni-ni,
Your article is great, then I ask how might we proceed on flickr?
Thanks for all

Ben D's picture

Hey folks,

I followed these instructions to the letter and notice that my image still looks a bit lossy, and that it's a bit more saturated than the original. The reds are much more pronounced.

Original:
https://www.flickr.com/photos/87635527@N04/26296476274/in/photostream/lightbox/

FB upload:
https://www.facebook.com/madheiress/photos/a.786081601479056.1073741827....

Any advice? Thanks.

Also, are there any Capture One Pro users doing something similar as Nino explains? I have recently begun using it instead of LR and would prefer to wean myself off of Adobe entirely.

This is only partially true. The PNG 24 is the best route for srgb monitors. The image will be sharp and colors somewhat acceptable. If you open facebook in a Adobe RGB monitor (99%), you will see facebook has disregarded the srgb profile, and pushed everything into the monitor wide gamut. Long story short, you will end up with perfect sharpness, but the colors will be all pushed up to Adobe RGB, blown out, neonish and unusable. I had my website, behance, and facebook opened in firefox and chrome at the same time, and the first two where fine as they should, but the facebook images where shamefuly wrong. So, be aware of the PNG solution i´ve seen in many pages. It is not true. Only works for sRGB monitors.

Juil Yoon's picture

Have you found that the file size for JPEG images affect the amount of compression at all when you are posting to a business page?

andrew segreti's picture

Hey I know I am late to this article but I just started using FB as a photog and using these guidelines,
It still seams like my thumbnail images are a little softer then the should be and there are some digital artifacts that I just can't seem to get rid of, regardless of file type and size. Thoughts from anyone?

Nino Batista's picture

Time to redo this article and update it!

Kelly Easter's picture

ITS 2019 Time to REDO the Best Practices for Upload To Photoshop!

Great Article and updated regularly. What's your opinion on the new .heif file format and how soon do you think I'll be fully implemented past Apple and Adobe?

Nino Batista's picture

The truth is, better file formats have been around for some time. Especially rather proprietary ones. JPG is so so so so so ingrained in the public consciousness AND the de facto standard on the internet, so it persists. Also, bandwidth continues to increase across networks, so file delivery is less and less of a problem in terms of size. Like anything, it is my belief that if HEIF (or other similar formats that have been developed / proposed) were to take off and end up becoming the standard, it would have to happen only thru the phenomenon of "common usage". In other words, if it just randomly became popular after being adopted by Adobe, Apple, all the major web browsers, Facebook and Instagram, etc. "If you build it, they will come." really doesn't apply to what becomes popular, so, if HEIF takes off on some surge of "oh man you should be using HEIF!!!" word of mouth, then maybe. So far, that hasn't happened with a new emerging file format because, remember, 90% of web users are not tech nerds – they don't care what the formats are, what the file sizes are, etc. If it works, they roll with it. Now, if every major software developer pushed for HEIF in a unified manner, and educated the masses about it, and made it very very very easy to save to HEIF in their applications, and pushed out a sort of "campaign" to promote HEIF......maybe.