I'm not on the Facebook social media site, nor do I plan ever to use it for myself. However, from time to time, I do work for people who use Facebook. I find Facebook difficult in part because of all of the background research one has to perform to be able to use the product correctly. A case in point is the Facebook banner system which changed recently but which I feel was not widely announced.
Previously, banners could be 200 x 600 pixels. Facebook has suddenly changed the dimensions to 180 x 540. This makes the old banners illegal, either causing cropping faults or page errors. After some research, I found out how the new regime works, and in an almost unbelievable act of charity, I will pass on my findings. I am also including a real-size template you are free to use for your own banners.
To begin, 180 x 540 is the maximum banner size. You cannot have a banner that is more than three times tall than it is wide. Nor can you use banners with dimensions that have odd-numbered pixels (i.e. 179 x 539). You may have smaller banners if you wish.
The Facebook banner is built around what I call the "hot square", although I do not know what the Facebook engineers call it, if anything. On default settings, Facebook will crop your banner to a 180 x 180 square exactly in the center of the image. Formerly, this used to be a 200 x 200 square, which makes sense as many social media sites use a 200 x 200 square image for avatars (your personal picture). Now that the banner has shrunk, so has the hot square. For maximum readability, or if Facebook changes to defaults without your input, you should fit the most important part of your banner within the hot square. That way, if Facebook re-crops your banner, it can still be readable. You can usually adjust the crop manually within Facebook, after you have uploaded your image.
There exists around the edge of the image a "gutter" which is 17 pixels wide all the way around. The gutter is the dark part on my template. This gutter is to account for any inaccuracies that Facebook may exhibit when cropping your image. While you are free to use this space, I strongly suggest not allowing text or any important graphics to reside within the gutter space. Anything in the gutter has a chance of getting cropped.
Finally, you will want to keep your file size extremely small. Try to avoid exceeding 20 kilobytes, which is asking a lot. Facebook uses an undisclosed image compression algorithm which is very lossy, meaning that it will distort your colours and make your image blurry if it is too large. Facebook will do whatever it takes to make your banner conform. The smaller your image is, the less compression Facebook will apply to it.
Your best bet is to convert your image to 256 Indexed Colours, and then save as a .PNG file. That's what I did for my template. If you have to use a .JPG, you may have to experiment a little. Likely, Facebook will compress a banner that is saved at full .JPG quality. Even at 50% quality a .JPG can suffer. Probably 30% may be okay, or you may have to go as low as 10%! Watch the file size: as you approach 20 kB mark, you should see less degradation in Facebook. The other alternative is to save as a .GIF. How your moral compass swings may affect your choice to use .GIFs, for until the year 2004 the .GIF format was under legal dispute. Users should now be free to use older .GIF compression technology, but newer .GIF forms may be under legal protection. Use at your own risk; I simply avoid .GIF as much as I can.
Avoid using fancy blend modes in your graphic, such as complicated drop shadows or gradients, as the Facebook compression may turn them to mush. Simpler is often better, and clean, crisp images will capture the most attention.
I wish I could take credit for coming up with all of this, but that would be a lie. I credit Mr. Kieth Heustis of Clear River Advertising & Marketing, and also his friend Kathy Burckhardt for cooking up a concise method for creating a functional Facebook banner.
Posts
