We’ve been trying to figure out in recent weeks how Facebook applies the “circular crop” to photos we upload in Groups or Profiles. It’s led us to some interesting findings about Facebook’s interpretation of the photos we upload (and the “alt” tags it them applies to them)
The Facebook circular crop: how Facebook decides where the crop is made
You’ll be aware that Facebook has introduced circles rather than squares for various incarnations of the images we upload – there are some examples below.
And as we’ve looked into this we have found that where the circular crop is made (from a larger image), varies considerably.
We’ve evidence of the crop being made on the left, right, centre or off centre of the original cover photo and there seems little consistency as to where the crop is made other than that the decision seems to be influenced by the position of:
- Faces in the photo
- The location of those faces
- The number of faces
- The location of text
So you see Mari Smith is cropped centrally (one face in the centre of the image):
Dan Henry is cropped to the right (one face to the right of the image)
These ladies from the Recipes for Weight Loss Success have been given a much wider crop that has picked up half the original landscape cover photo.
In digging further into the code we see that Facebook is using photo tagging software to scan our cover photos and apply a written description of what it “sees”. Mari Smith’s photo has the alt text:
alt=”Cover Photo, Image may contain: 1 person, smiling, child and text”
Interesting that Facebook interprets the lovely Mari’s face as that of a child!
Whereas the weight loss group has the alt text:
alt=”Cover Photo, Image may contain: 2 people, people smiling, text”
You can see from this alt text data that Facebook is using that information to inform about the content of the circular crop.
Let’s look at some very different cover photos (we are using Group cover photos in all these examples):
The Wild Fermentation Group photo which is simple a shot of some bagels is described as:
alt=”Cover Photo, Image may contain: food and indoor”
Veganuary’s cover photo of sheep has confused the software a little but it recognises the face – just describes it as a person rather than a sheep:
alt=”Cover Photo, Image may contain: one or more people and text”
Kate Toon’s Recipe for SEO Success Group recognises the avatar as a person and the existence of text. It seems to have widened the circular crop a little to include the “With Kate Toon” text.
alt=”Cover Photo, Image may contain: 1 person, text”
The Click Funnels crop zooms in on the person on the right of the photo and unlike Kate Toon’s crop where her short text is included, the presence of text in the Click Funnels image is so wide that the crop ignores it:
alt=”Cover Photo, Image may contain: 1 person, smiling, text”
The use of super hero masks in our Team Digiterati Facebook Group has also confused the scanning software as it has only managed to identify one person. Together with the presence of text this has resulted in a more awkward circular crop:
alt=”Cover Photo, Image may contain: 1 person, smiling, text”
Alt text for Facebook Profile cover photos
When we look at Profile cover photos we see even more interesting information. My personal Profile cover photo is a watery landscape and Facebook recognises “sky, cloud, outdoor, nature and water”:
Carlton’s sunset shot is identified with the following alt tags: sky, ocean, cloud, twilight, outdoor, water and nature
Whereas our designer Justyn’s photo of his son’s back view is: “one or more people, people standing, ocean, outdoor and nature”
Further geekery: how cover photos are handled differently in Groups, Profiles and Pages
At the moment Groups and Profiles seem to handle images differently to Pages. On Profiles Facebook crops the image to the correct ratio and places it in the Page then if you click on it, it is linked to the the original uncropped image.
However, Group photos are displayed as full size with a wrapper that masks it to the scale on the screen, then if you click on it you see the full image.
Arguably these are simply alternative ways of doing the same thing but it makes us think that Facebook is currently looking at the best way for it to display images on different devices. We’ve seen the way Profile photos display change from day-to-day this week: at one point it was resized, but now it displays full resolution. We’ve also seen the same image working differently in the UK and Germany so I imagine we have stumbled over some early testing.
And if you really want to geek out look at the Facebook file names for the photos. The image files were that were resized (to 960 pixels wide) had an _n at the end of the file name and the full resolution version had an _o.
What does this all mean?
Well in many ways it means very little for us as users but it does give us some insight into Facebook’s forays to attempt to make some intelligent sense, via software, of the photos we upload. Facebook is attempting to interpret verbally what it “sees” visually. Clearly this can inform more intelligent cropping of photos but it perhaps also feeds into all that data Facebook holds about our interests and preferences.
For Page and Group admins it is interesting to see what Facebook makes of our own cover photos, and if, as in the Digiterati’s case, that information is not entirely accurate we can adjust our designs if required. We think will get a better crop if we remove those super hero masks so that the tagging software can better interpret the image as of two people and apply a more central crop.
This information also gives you some insight as to how to manipulate the crop to include your logo or any key text that you would like to have included.
How to read the alt data
This will vary by browser and operating system but you need to right click on the photo and select the “Inspect” option. This will then bring up all the code from the Page/Group/Profile on screen. Scroll and hover over this text until your cover photo pops up as per our screen grabs above. You’ll see the resolution information and the alt text that has been applied.
