The Issue:
You create great looking graphics in Adobe Illustrator. You’ve tested the graphics on various screen sizes and resolutions. However when you upload the graphic to Facebook it maybe looks great on mobiles. However on larger resolution displays such as laptops and desktop screens, the image pixelates and loses quality.
The answer to solve this problem is actually very simple. The explanation as to why this happens is far more complicated.
Solution: Save For Web
- In Adobe Illustrator use the old “Save For Web” feature.
- Within Illustrator, go to File / Save For Web.
- Keep the default settings. The save dialog box will tell you that it’s saving as Images Only. That’s fine. Go ahead and Save and the file will be saved as a PNG (lossless file).
Illustrator will do the work of selecting which colour ranges and resolution ranges are acceptable for use on the internet.
Trust Illustrator to do it’s job because it can do this far better than Facebook’s image compression algorithm.
Tips
Set The Correct Canvas Size
Make sure your image size is correctly set before creating your blank canvas. Typically for a post image, the pixel settings (for 2022) are 940px x 744px. This is ever changing though so if you find these settings don’t sit right on Facebook, simply Google search for Facebook image sizes 202… (whatever year it is).
Overlap your borders.
Illustrator will only save the page canvas size when using “Save for web”. It’s easy to miss a thin white gap on one of your image borders.
Why Does Facebook Compress Your Images?
Facebook want to deliver easily scrollable content quickly to their end users. Without compressing images can you imagine scrolling through your news feed on Facebook and stopping to wait for every image to load correctly to it’s highest resolution….
- Keep images and graphics looking sharp by using the current recommended dimensions of your image. Facebook will not alter the dimensions of your image, but they will compress it to fit their display requirements.
- If you are saving in the older JPEG format, drop the settings down to around 70%. This applies more when saving actual photos in Photoshop.
The key is to give Facebook’s encoders less work to do and prepare your images correctly before uploading to Facebook.
The result is higher quality images on all screen sizes, whether they are photos or graphics containing text.