In our last post of this series we talked about the Lions Clubs International (LCI) brand in more general terms. Now it is time to start some hands-on activity!
While visiting your facebook pages we observed, that a significant minority of pages show either
- a clipped logo
- distorted logo
- poor quality logo (resolution)
- an outdated logo
- all things together
All these visual “deficiencies” impact the (visual) appeal of the page and prohibits an immediate identification as part of Lions Clubs International (LCI).
It also impacts our brand, because we all are part of LCI and contribute how LCI gets recognized all over the world.
btw. not to give the wrong impression here: the majority of pages look really great and is doing very well with graphics and visual appeal. This article is just about supporting those who a struggling with the nasty bits and piece of image sizes, ratios and resolution.
So lets see how to approach these pitfalls …
BASIS | The Facts
Basis to a proper facebook logo graphics (aka “Profile Picture”) is the knowledge about the graphics dimensions reserved by facebook for the logo and the dimension your actual logo graphic has.
On the LCI Pinterest site you find a nice infographic about the various graphic dimensions being used for different visual elements / widgets of all those social media pages:
Pinterest: Lions Clubs Social Media Image Guide
From that infographic (facebook section) you can see, that facebook uses a 200 x 200 pixel placeholder (1:1 ratio) for the “Profile Picture”. Based on that information we can check the picture to be used for:
- Ratio (mis)match
- Resolution (mis)match
if your logo has a different ratio (width:height), meaning it is not a square format, it obviously will get distorted and/or clipped (depending on how the service – facebook in this case – treats your uploaded graphic logo).
Match examples: 200 x 200 pixel, 100 x 100 pixel, 1000 x 1000 pixel, etc.
Mismatch example: 200 x 210 pixel, 305 x 557 pixel, etc.
So basically we are looking for an image with ratio equal 1.
Using a tiny square logo with a size of 50 x 50 pixel will match the Ratio criteria, but not the resolution (200 x 200 pixel). It’s just too small! In case the picture gets accepted as upload at all, it typically has a poor display quality, as it gets most likely enlarged to the placeholder size).
So is a 200 x 200 pixel graphic the best? It depends …
Considering requirements and also the time it takes to load images when visiting a (facebook) page later, you should definitely stick with the smallest image dimension and file size possible that gives an appealing result.
But you also need to consider that web pages nowadays get displayed on a wide range of screens, all having different physical sizes and screen resolutions. So an image that looks good on a small smartphone display might show some artifacts when using a 24 inch high-resolution monitor.
You need to experiment a bit …
Start with the exact 200 x 200 pixel dimension and check the visual appeal on multiple screens. Then re-size to a larger multiple of 200 x 200 pixel (e.g. 400 x 400 pixel) and see whether it simply looks better or not.
One word about resizing. Always try to resize from large to small and not the other way round! And use a quality tool to do that.This way you are more likely to keep image quality.
Lets do it …
Lets assume, we just want to use the plain vanilla LCI logo as “Profile Picture”.
The official resource for all logo files is the lionsclubs.org website and here in particular the Member Center. Once you hit the homepage of lionsclubs.org, drill down this path in the menu (for your convience below text “Lions Logos” is a weblink to that location):
For use as facebook “Profile Picture” you either pick the small GIF (216 x 204 px) or the small JPG (900 x 852 px) picture file. Follow the instructions for downloading the file, so you make sure that you do not download the preview picture instead
Unfortunately these logo files are not “ready to use“ for our purpose, as they do not have a square (1:1) ratio, so you have to tweak them a bit (or download the versions we provide for your convenience at the end of this article).
Below you see the differences using (from left to right):
- the original, non-square logo picture
- the tweaked logo, with some extra (white) border at the top and bottom to make the format square, plus some extra whitespace on all sides to have some distances from the surrounding box and finally downsized to 200 x 200 px.
- the tweaked jpg logo, kept at it’s large resolution of 940 x 940 pixel
In the next blog post about our Social Media Directory observations i give you a step-by-step tour and name some tools, which you can use to achieve the same for your images to be used as facebook “Profile Picture”.
So stay tuned …
Tweaked (“squared”) logos:
[fixed some typo on Sept., 10th 2013 by SK]