So, I know a lot of you design your own Facebook timeline cover photos for your group or for your business page and I also know a lot of you get frustrated because it gets pixelated or loses quality, right? Guess what, even as a web designer, this was happening to me! [the horror!!!]
When I was designing our graphics for the All Up in Your Lady Business podcast, I designed a group cover photo for our Facebook group with all of the “normal” specifications I used – the right size, the right format, etc and it was STILL looking like a hot mess. There were pieces of the solid color blocks that were pixelating and “feathering” around contrasting letters and it was driving me BATTY. But, guess what? I learned how to fix it and I wanted to share it with you!
Alright, so, you HAVE to make sure the image is the right size; if it is even 1 pixel off Facebook will compress it and your quality will go down-the-tube. So, what size should it be?
For a business page (and your personal cover photo): 851 x 315 pixels [WxH]
For a Facebook group page: 801 x 250 pixels
I create all of my images in Photoshop CC but you can do this in Photoshop Elements, if you have it, or, a free online option is Canva – which I HIGHLY recommend to the not-so-graphically-inclined-person.
The “normal” way to save anything for web use is to “save for web use” as a PNG file type BUT, in the case of our podcast FB group photo, it wasn't working, it was looking like this [look close, you'll see pixelation especially around the text on the left-hand side of the image].
So, I did a little research and realized that Facebook compress ANYTHING over 100KB's in size – even if your image is 101KB it will be compressed and look like poo.
How do you fix that? Well, you save it as a JPG and control the file size [see below].
These are some screenshots from Photoshop of how I size and save my images (this example is a Facebook Business Page Cover Image).
Start with the correct size
Create the image
Save as a JPG
In most editing programs, you'll see what size the JPG will be, in my case it was 202.6kb, so I dragged the quality slider until I got it the closest to 100KB without going over [ya know, sort of like the Price is Right, ha!].
Now, if you're using Canva, there's a “download for web JPG” and a PNG option, you'll want to choose the JPG option. If you're using Canva's images, they're generally already going to be sized correctly since they have templates already for these sizes and they know that the compression happens BUT if you are importing your own images and they're higher-scaled images (like professional headshots or something like that) the cover photo could export higher than 100KB.
In this case, you'll want to open the image in whatever “preview” program you have (for Mac, it's literally called “preview”) and there's usually an option to “adjust size”, you can use this to adjust the file size accordingly – just make sure you don't change the actual size (in pixels) of the image.
Alright, I decreased the file size to 99KB and below is the new screenshot of what our group image looked like…MUCH BETTER!
In full disclosure, we actually changed our brand around a bit after this all went down, so this is the actual current images on our group page – but still, no pixelation.
There you have it! How you can avoid the ever-so-present pixelation in Facebook cover images.