UPDATE December 2012: Facebook made a change in how it handles the uploaded Profile Picture by default. READ this updated post on creating a cool Facebook Timeline Cover Photo / Profile Picture integration.
This post is no longer relevant. Facebook, as of the evening of April 26, 2012, also changed the dimensions of the Profile Picture for Brand Pages to 160 x 160px.
HOWEVER: The Profile Picture placement over the Cover Photo is DIFFERENT for Brand Pages and Personal Profiles.
Brand Page: Distance from the top of the Cover Photo to top of the Profile Picture is 210 pixels.
Personal Profile: The above distance is 193 pixels.
DOWNLOAD THIS NEW TIMELINE FOR PAGES TEMPLATE for Timeline for Pages Cover Photo / Profile Picture combination.
On April 26, we will be updating the size of the profile picture on all Pages. We are letting you know about this small change in advance so that you can update your profile picture on April 26. The new profile picture will be 160 x 160 pixels and will sit at 23 pixels from the left and 210 pixels from the top of the Page.
It appears the 160 x 160px Profile Pictures were just a temporary glitch. They are now consistently displaying at 125 x 125px. Phew!
Detailed Tutorial & PSD Template for creating a great Cover Photo / Profile Picture integration — for Brand Pages — for Personal Profiles.
Several days ago many started to notice that their carefully crafted Cover Photo / Profile Picture integrations were messed up.
Perhaps I’m being cynical, but this reminds me of how Facebook made the order of the Photo Strip images random on Brand Pages, in order to disrupt attempts to, um, harden them into a graphical presentation.
It’s just possible that inconsistent sizing of the Profile Picture is the same principle applied to Timeline? If the Profile Picture is displayed inconsistently, you have to make it just a “logo” and not an extension of the Cover Photo. Well, anyway…..
Here’s the Fanta Timeline Page masthead, as viewed with Firefox or Chrome on Mac 10.7.3, logged in and using Facebook as my Profile:
It is displayed at 160 x 160px, rather than the expected 125 x 125px size. Notice that the bottle section in the Profile Picture isn’t a smooth continuous extension of the Cover Photo.
Here’s the same Page viewed in Safari, where the Profile Picture is displayed at the expected 125 x 125px size:
Note the smooth continuity of the Cover Photo and the Profile Picture.
So is Facebook Rolling Out a New Profile Picture Size, or….
Facebook is well known among developers for pushing out changes before fully testing them, seeing what breaks, and then making adjustments.
And then, sometimes a bug is just a bug… Some are already presenting the new 160px size as Facebook’s intention, although they admit they’re just making an educated guess.
Myself, I’m remaining agnostic on this one until I hear something from Facebook. Historically, when images on Facebook start behaving badly, it’s usually been a bug. BUT it can also indicate that something’s indeed afoot.
And thinking about it, the larger Profile Picture size does appear to be more appropriately scaled to the Cover Photo.
But when a design change is going to affect brands — very big (Ford or Fanta) and not so big — it seems Facebook has always provided a heads up, despite what I mention about their “push it out and see what happens” approach to testing.
This is affecting both Personal Profiles and Brand Pages
This inconsistency is happening on Timeline for Pages and Personal Profiles. Some say it began with Personal Profiles, but I don’t know if that’s true or not.
Peeking Under the Hood — the Underlying Source Code
I inspected the underlying code for both versions of the Profile Picture. The Profile Picture you upload at the required minimum size of 180 x 180px is resized in the HTML, with “height” and “width” values specified right in the <img /> tags. The images aren’t being resized with CSS.
When the Profile Picture is displayed at 160 x 160px, here’s the code:
<div class="uiScaledImageContainer profilePic"><img class="scaledImageFitWidth img" src="https://[IMAGE-URL].jpg" width="160" height="160" alt="" itemprop="photo" /></div></a></div>
Here’s the code (from Safari) when it’s displayed at 125 x 125px:
<div class="uiScaledImageContainer profilePic"><img class="scaledImageFitWidth img" src="https://[IMAGE-URL].jpg" width="125" height="125" alt="" itemprop="photo" /></div>
The Two Factors that Appear to Affect the Displayed Profile Picture Size
What is frustrating about this bug/rollout is that it’s wildly inconsistent. Two things appear to affect how you see the Profile Picture:
- What browser you’re using: On Mac OS X — Chrome and Firefox display the Profile Picture at 160px. Safari displays it at 125px. On Windows, IE 8 and 9 both display the Profile Picture at 125px;
- Using Facebook as Page or Profile: On Mac OS X Firefox, if I opt to use Facebook as my Page, rather than as my Personal Profile, the Profile Picture displays at the expected 125px. When using Facebook as my profile, it displays at 160px.
What should you do? Change your Profile Picture, or hold off?
My advice is to wait until either the bug resolves or Facebook announces this change.
If you’ve been using the Photoshop templates I provide in my Timeline for Pages Cover Photo / Profile Picture integration article, or in my Personal Profile Cover Photo / Profile Pic article, just know that if this change to 160px appears to be permanent, I’ll adjust the templates accordingly.
Stay Updated on This
I will definitely update this post with whatever information I learn.
Here is the bug report I posted on Wednesday, April 11, 2012.
And you can follow the lively discussion about this on the HyperArts Fan Page.
Share your experience in the comments
Feel free to share what your experience has been with this issue.
It seems that almost everyone is reporting something different!