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.

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: 100

JPG compression setting: 100

JPG compression setting: 0

JPG compression setting: 0

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 3/26/15: By popular demand, I have created a video tutorial as a visual aid for this article. Check it out below:

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.

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

79 Comments

Andrew Griswold's picture

This is great man! Having just jumped from the print design world to a litlte more of the digital side its great to have all this info going forward. Thanks!

Anonymous's picture

Whats the reasoning behind using JPEG vs PNG for landscape photos?

Nino Batista's picture

Simple: At 2048px wide, Facebook converts PNG files. I suspect it has to do with a predetermined file size limit FB uses.

Anonymous's picture

Makes sense. Thanks!

Michele Anne's picture

I've always been terrified to upload vertical portraits because they always come out looking awful. This helps me so much and allows me to expand my FB portfolio. Thank you so much for sharing your knowledge!

PERFECTO, well written and informative. Thank you!

McKinley Wiley's picture

Great article!

FYI...I use an older version of Photoshop (and I'm sure some others here do too) and some of the bullet points in the steps you outlined above for the 'image settings' aren't there in the older version(s). I use CS4.

Nino Batista's picture

Good point. I remember there were differences on CS4 and older. In general, the micro-details such as the type of image size reduction and the PNG and JPG options under Save For Web shouldn't make that much of a difference. The key things you need are the pixel dimensions to be right, and for the Convert to sRGB and embed profile to be right. Usually those are the main things that make it work right for you on FB.

Bob Bell's picture

Nice one Nino, bookmarked! :)

John Harper's picture

What about if lightroom is your main image processor? I don't see any PNG output options.

Nino Batista's picture

No can do. I think Adobe might add PNG Export support to Lr eventually, though. Soon.

So, in other words, are you saying that unless a person (ie, me) has a Facebook business page (which I do not), there is nothing at all that can be done to improve image quality?

Nino Batista's picture

In my experience, nope. Sadly.

Is this still the case today? Meaning, you still need a Facebook "business" page for the best image quality? Its hard to keep up with the updates Facebook does and I am wondering if this might have changed since the original publication of this article? Thanks.

Nino Batista's picture

As far as I know, this is still the case.

It will be nice when Lightroom FINALLY allows us to export as PNG.
I keep waiting....

Nino Batista's picture

This has to come soon. However, it makes sense that it hasn't yet. Lr is photography program. Ps is a graphics and digital imaging program, so it makes total sense that it has the options (among dozens of others). Lr was developed as a photographer's program, first and foremost, and PNG was not considered a useful file format for photographers for lots of good reasons. For example, full resolution PNGs of your images would be massive compared to JPGs, and when Lr was first launched PNG was only recently accepted as a new standard. However, it was accepted as a new standard for *web* use.

Anyway, I think Adobe will put two and two together and add this function to Lr, and soon.

Michael Miller's picture

I will look, but does Photoshop Elements 10 have export as PNG-24?

Nino Batista's picture

Unsure. I have not used Elements in many many years.

Rodrigo Capuski's picture

I really didn't know that facebook doesn't convert PNG files to JPG. Thanks a lot for that information =)

Nino Batista's picture

They have a file size limit, or so it seems, but if you stay within said limit (and do the process I mentioned in the article) it will keep your upload as a PNG, yes. There are some variations to my bullet points in terms of pixel dimensions, but I reviewed simply what *I* use that works for me!

Rodrigo Capuski's picture

Yes, it's not so precise. I uploaded a PNG portrait with 592x900, following your directions and it was converted to JPG.
Maybe it's because when i resized the picture i didn't change the resolution to 72dpi, it stayed with 240. I'll try again on next photo.

Jordan Butters's picture

Great article! Can I also presume from the first slider comparison that saving at maximum quality over minimum quality also clones out models' ass hair? :D

Nino Batista's picture

Oh man an image format that edits for you!!?!? That would be sweet. Time saver for sure.

Adam Bender's picture

Boom goes the dynamite!

Felix Hernandez's picture

Great article!!! Thanks.

...what article? ;)

You can export as .png in Lr using a plugin called MagicExport. I use it all the time for Facebook. Ive found 1024px on long edge at 16 bits works best for me. Huge quality difference over Jpg. Add it to your export list for one click .png exports. I usually export as I am editing my pics after a shoot. You can download the latest version here and has just been updated for Yosemite on mac. Hope this helps.
http://fnordware.blogspot.ie/2012/10/magic-export-for-lightroom.html?m=1

Michael Miller's picture

BMarked.

Hey Nino, thanks for this information. I used to do this process posted in FS last year, would you mind give us your thoughts...

https://fstoppers.com/wedding/how-size-your-images-so-they-show-their-be...