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

There are many different ways to go about making your images look better on Facebook and other social media. I would try any processes your find online, including the ones I described, and see which ones work best for what YOU do and what YOU want. Dig?

steven spaulding's picture

facebook's recommended sizes on the long edge are 720, 960 and 2048. this is what all the images get resized to, as per the most recent information on facebook's help site.

the jpg compression didn't used to be so bad, but like Nino, i've since converted to uploading png files to facebook to get the best quality i possibly can.

for my business website i still upload as 100% jpg as my site doesn't compress the images (not that i know of anyways)

either way, good write up Nino.

Nino Batista's picture

Yeah, the arbitrary resizing and compressing occurs only on sites like Facebook that have self-managing functions upon uploading images. On one's own website, depending on what service you use, or if you have a designer/developer do it, etc, your images generally stay exactly as you output them. I always remark that if you are wondering how to export your images for your own website, well, the answer is only "Whatever your web designer asks for."

steven spaulding's picture

ya, i am my own designer, manage my own host and database, and control the size and quality of the images on the site.

i always get " why not just use "insert template site here" and my answer is always because i can control so much more this way. yes its not as "easy" as some of the templates but i know exactly what is going on with my site and how it will work before i even upload an update.

Why not just upload the highest resolution .jpg and let facebook compress it to whatever extent it wants to? Wouldn't that in theory give us the best resolution image on facebook?

Nope, because Facebook's largest user-base aren't photographers, and 99% of them don't really care about the quality of the image - rather, the subject of the image.

Simply allowing Facebook to "optimize" your images would result in low quality, often unattractive (to a photographer's eye) photos which would often appear cringe-worthy. :)

(For the record, I'm pretty sure this was mentioned either in the article, or in one of the above comments.)

This is a great article, BUT, I dont see any way on my desktop or mobile device to create an album without uploading photos at the same time. I do remember when that used to be an option but I don't see how to now. If I'm missing something, please let me know bc I'm tired if FB ruining my picture quality.

I've tried on both my business and personal pages.

Nino Batista's picture

Its true. Creating an album requires uploading at least one image. No idea why, but that is their requirement. Simply wait until you are ready to add an image before making a new album.

Great article. ;)
You can explain why do not you use 2048px on vertical photos?

By the way, you could make an identical article to publish quality photos on instagram, with and without borders. :P

Philip Aveston's picture

Thanks Nino. I've been struggling with the quality of my images on FB so this is definitely the most valuable post I've seen all year!

Bardt Photography's picture

nice, thanks!

Considering Facebook claims the right to take, use, re-use, change and SELL anything you put up, including your personal information... Why would anyone put images on it?

Michael Miller's picture

I have been uploading minimal size and minimal dpi images with a good sized (c) my business name on my FB pictures. On Flickr, I upload full size, 300dpi, and with my (c) business name as well. But, now I am thinking about the quality of the FB pictures so I am studying Nino Batista's method.

Orion Erickson's picture

Your images are amazing. I may be wrong here, but are you sure it's not just using the albums section for the high quality images. I have a "normal" site and if I remember it says I can use "high quality images: in my portfolio album which I use for my portfolio album. Maybe it's not just commercial sites but, albums. I hope you're right and have stumbled across something that will keep me ahead of the competition! https://www.facebook.com/orion.erickson and my real non facebook one: www.orionerickson.shootproof.com Thank you so much!

Orion Erickson's picture

Why the switch from png-24 to jpg when going vert. to horiz? I'm sure there is a reason. Just curious.

Nino Batista's picture

Because I want larger horizontals, and 2048px wide PNGs are too large and FB converts them. In my experience, that is.

Ángela Gesteira Seijo's picture

This is so awesome! Thank so much :) I just have a little doubt. I assume that while you start the process (resizing the file for both vertical and horizontal) you are working with the photo in 16-Bit, right? Or is it 8-Bit? Thanks in advance.

Nino Batista's picture

I do this process to both 8 and 16 bit images indiscriminately. I see no problems with either, when it comes to prepping images for Facebook.

David Shimabukuro's picture

Does this also work for Google+, 500px and other web sites where photos can be uploaded / shared?

Nino Batista's picture

Both 500px and Google+ are more forgiving in terms of compression, but can get squirrelly with color profiles. I would follow the same procedures above, yes, but without the focus or need for PNG on those other platforms. For one, 500px doesn't accept PNG - it refuses that file type. Second, G+ doesn't add compression (or a tragic amount that you can really see) so JPG works fine on both.

David Shimabukuro's picture

Thanks for replying Nino..! Awesome post..! I always wondered how to get my pics looking good on Facebook.

blue li's picture

for your reference
How can I make sure that my photos display in the highest possible quality?
https://www.facebook.com/help/266520536764594

Michael Miller's picture

You mentioned that FB will keep the quality up if you upload to a "business page". But, your upload instructions just say to creat a new Album on "your Page" and does not discuss creating a Business Page. Could you please clarify that? Thanks.

Nino Batista's picture

You def need a Business or Fan Page or whatever they care to call it. Start here: https://www.facebook.com/pages/create/

So, you haven't mentioned square format. I'm assuming just like Vertical? We load ours up on Instagram (Sq. format) and have it automatically shared to our Facebook biz page.

Nino Batista's picture

Assuming you stay within the file size limit, which I THINK is 1MB, you can 800x800 PNGs with success - in my experience.

Awesome advice, thank you!

Andrew Murdock's picture

Have you done any work to figure out Facebook's color space ?. They seem to not quite follow the sRGB , IEC61966-2-1 profile that ships with Adobe products. It uses what seems to be "IEC61966-2-1 black scaled"

AdobeRGD as a default seems to be the closest, what is your experience ?

Lynne Bardell's picture

Another excellent FS article, thank you Nino.

Hi from London Nino and thanks for very informative article. Can I ask you if when sizing to 2048 (horizontal image), is it necessary to change the resolution from 300 pixels/Inch in the Image Size box, or doesn't it make any difference to the final Save for Web jpg image?

More comments