Contact Us
  • New Larger Size for Facebook Timeline Profile Pictures? Buggy Rollout or Bug?

    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.

    Apr 18, 2012: Facebook sent this message with the weekly page reports:
    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.

    RESOLVED!

    It appears the 160 x 160px Profile Pictures were just a temporary glitch. They are now consistently displaying at 125 x 125px. Phew!

    Create a Cool Cover Photo / Profile Picture Integration for Timeline!
    Detailed Tutorial & PSD Template for creating a great Cover Photo / Profile Picture integration — for Brand Pages — for Personal Profiles.

    Original post….

    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:

    Fanta Timeline Page - Safari Browser

    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:

    1. 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;
    2. 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!

    Comments

    1. Is there any way to make text not look all compressed. I have tried various file formats, resolutions etc but my Timeline Covers (any text I have over graphics) look just slightly distorted. VERY FRUSTRATING!

      • Jude, the best way is to make your uploaded Profile Pic image size a multiple (x2, x4, etc) of the displayed size. Of course, with this bug we don’t know what that is!
        But to avoid text distortion — and assuming a display size of 125 x 125px — you’d want your uploaded image to be: 250 x 250px or 500 x 500px. Get my drift?

        • Yes – and this has helped. I went to vector imges for the timeline cover 851 x 4 etc etc etc. And it does look better. I am also noticing that come fonts look better than others and some color fonts over others look better as well. IE black text (sans serif type) on white background does pretty good, whereas pink text with serif on white..not so much. All better than before however. Thank you all very much!

          Also….thought I was being really smart. I originally did a 5x…didn’t work out. But the 4x is beautiful. THANK YOU TIM AND THANK YOU HUGH. Small business, just getting off the ground and really appreciate your help.

      • Since I think you’re talking about text on the Timeline cover image itself and not the profile photo, there are two possibilities. Either you’re not saving the graphic at the correct size, which should be 851 x 315 or it’s the fact that Facebook compresses the crap out of our Timeline images so the file sizes are very small, (obviously to keep page load times down) and that results in a loss of quality. Reds, for example come out looking very bad. Just take a look at Coke’s Timeline and you’ll see what I mean. And, text, especially if it’s on top of a non solid color, with have some artifacts around it that makes it seem fuzzy.

    2. It seems to be related to the user account you’re logged in with and nothing to do with the browser you are using.  http://imgur.com/a/KjZd5 – you’ll see 160 and 125 px images there, both in IE9 on Win7, i was logged in with a different facebook account for each picture.

      • The issue appears to have been resolved. I’m now seeing the Profile Pictures as expected, at 125 x 125px. Phew!

        • mattscreative says:

          I just noticed the change this morning (4-17). Mine is currently at 160 x 160. So, you’re saying this is temporary?

          • What I am now surmising is that Facebook intended the larger 160 x 160px Profile Picture ONLY for Personal Profiles, not Brand Pages. The fact that Brand Page Profile Pics were also displaying at 160 x 160px instead of the expected 125 x 125px was most likely a glitch. BUT Facebook has remained silent on this issue that’s been going on for about a week and has messed up the carefully crafted Cover Photo / Profile Picture integrations many users had created.

            • mattscreative says:

              Thanks Tim, for the prompt reply and your insight. I went ahead and changed my avatar to 160 x 160. We all know Facebook changes constantly, but I’ve noticed they rarely go back to the original state once the change has been made. I’m sure by year’s end we’ll be trying to keep up with more of those changes.

    3. i think it is 180by 180, instead of 160 by 160 pixels..am i right?

      • 180 x 180px is the minimum size required by Facebook for the Profile Picture image you upload. But it is resized to display at 125 x 125px. The 160 x 160px appears to have been a temporary glitch which is now resolved.

    4. Looks as though this is resolved which is good to see, not too big of a glitch I guess, but enough to make some pages look as though their designers or owners don’t have a clue what they’re doing. 

      • Yes, a relief indeed! Some were actually blogging that this was a change Facebook was slowly rolling out and they were advising folks to adapt to the new 160 x `160px width. I hope not too many took that advice!

        • Wow, hopefully they didn’t otherwise it might get a bit messy!

        • Robert Scanlon says:

           Looks like it is now a confirmed change Tim … grrrr. After all that fussing about … luckily we only have two well-integrated profile pictures, but plenty of people are SM consultants and have a TON of sudden graphic work to do before April 26!

          Here’s the content of an email I just received from Facebook (confirmed by others receiving same message):

          “Hi Robert,

          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.

          Here is this week’s summary for
          your Facebook Pages:

          …”

          Oh well … it is a free service I guess.

        • You should probably update the “resolved bit” of the article now to reflect what I previously wrote and you dismissed – that it was not a bug but an intended change!

    5. When you use the “View As…” feature, you will notice that different users still do not see your profile as it should be.

      • If I now switch to use Facebook as a Page rather than my Profile, Brand Page Profile Pics are back to displaying at 125 x 125px. BUT it appears the 160 x 160px change may remain on Personal Profiles. I see that yours is nicely integrated for the 160 x 160px dimensions.

        • Although it’s integrated to the 160 x 160px, when I click on the “View As..” feature and start typing in other user names, only about 50% of them see the Cover and Profile Picture as it should be correctly displayed.

          I provided an example of how it should be displayed and how another user, such as my sister, see the image.

    6. Mine is still acting screwy. Facebook acts like a group of unruly college kids sometimes. SMH

    7. Daniele Del Frate says:

      Mine is still buggy :(

      • Thanks. I saw this. It confirms that the issue exists, and it *speculates* that perhaps it’s a rollout of a new 160 x 160px format for Profile Pictures on Personal Profiles. I see now that they say Facebook has “confirmed” the new size but they offer no source.
        I was a bit puzzled as to where NextWeb got its “130 x 125 pixels” and “166 x 160 pixels” dimensions!

        • Just as you are making up the “181px/161px” dimension, their image was never truely square. When its not square, the original image spills over, but it only displays the 160×160 pixels (even if the full image is larger). If you make your original image square (say 180 x 180) it will turn up as 180px.

    8. Jennifer Prescott says:

      I just got this message in my weekly Facebook page report: 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.

    9. Received this message from Facebook today:  


      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.

      Here is this week’s summary for
      your Facebook Pages:”

    10. Thanks for the update, finally got it all lined up

      http://www.facebook.com/LarryMichaelWatson

    11. Looks good!

    12. On the actual Timeline, photos don’t show as the full picture shrunken, if it’s too wide, it’s cropped instead. And you don’t appear to be able to re-position it? Is there a set size to use, if this happens?

      • You can position the uploaded Cover Photo, but not the uploaded Profile Picture. You should create your Cover Photo at 851 x 315px rather than leave it to Facebook.

        • No, I don’t mean either of  those. I mean in the actual timeline. If you upload photos, as a status update, the pictures go on either the left or right hand side of the ‘tree trunk’? If the picture is too wide (but I can’t find out anywhere how wide is too wide) it crops it. You don’t have the option of shrinking it or re-positioning it, as far as I can see. Which – as uploading photos to a status is something that people do all the time – seems a bit stupid… [sorry - I realise that this thread was about the 851x315, etc. I just thought that someone might know the answer...]

    13. Nico Grienauer says:

      I have updated my timeline template to v1.3 to fix this problem!
      http://ausgetrock.net/en/blog/nico/facebook-timeline-hack-template-update

    14. Paul Mitchener says:

      The bug is back. I noticed this quite some time ago when creating a custom cover / profile pic. I sat up last night and created covers for a handful of pages that I manage and they looked great. This morning they are all looking aweful, as they are displaying 160px profile pics as opposed to 125px

      http://www.facebook.com/earthwindnwater

    15. facebook have completely changed size. “It’s a feature.”http://webmarketinga.posterous.com/126444913

    16. Sounds like you didn’t get the memo, Paul.

      Facebook included an announcement about changing the dimensions for the Timeline for Page Cover Photo and Profile Pictures, about a week ago. The change took place last night.
      Here’s the updated tutorial for creating a cool Cover Photo / Profile Picture integration for your Page.

    17. Yes, it’s now live across Pages and Profiles, the new 160 x 160px display for Profile Pics.
      Here’s the updated tutorial for creating a cool Cover Photo / Profile Picture integration for your Page.

    18. Have done this, Michael. Thanks!

      Here’s the updated tutorial for creating a cool Cover Photo / Profile Picture integration for your Page.

    19. I’m not sure I understand what you’re saying, Michael.

      Who’s image was “never truely square”? I also don’t understand “spills over”.
      If you upload an image that’s not square — and is at least 180px wide — Facebook centers it. Nothing spills out of the Profile Picture frame.
      If, as you say, “you make your original image square”, then it gets resized to 160 x 160px. So I’m also not sure what you mean by “it will turn up as 180 x 180″….

    20. The size seems to be larger on all browsers and all OS now.  I tried to get your new template to fix but link gives me a 404 page.  Are you going to updated this?  Thanks.

    21. I fixed the link and it should work now. Sorry for the inconvenience!

    22. I developped a tool to create cover and profile picture like this, give it a try : http://www.korko.fr/clevercover/

    23. and now its 180 x 180?

    24. I just used your template today and it appears that Facebook has yet again changed how the profile image comes in. It seems to blow it up or make it larger. So it no longer lines up with cover image. Your template has work great for me in the past so fee like it is another change Facebook has made. Do you know anything about this?

      • I know that I’m seeing the same thing. However, before I change anything I want to make sure that it’s an *intentional* change and not a bug. Damn!

    Speak Your Mind

    *