89

I never liked that SO/SE relied on the external gravatar service, so I was glad to read that it doesn't any more. However, it turns out that one cannot use as profile picture a PNG file with transparent background (something that is supported by gravatar):

enter image description here

Above is a screen capture of my profile page, with a profile picture that has a transparent background. That background is turned into black, which I suppose is a bug.

The method of upload doesn't change anything (I uploaded it manually to imgur, but the same black background is observed). See the difference between the two following URLs:

https://i.stack.imgur.com/Da3ex.png?s=128&g=1
scaled, with black background

and

https://i.stack.imgur.com/Da3ex.png
unscaled, okay

The problem is thus in the resizing code from imgur.

Improve this question
14
  • 2
    What if you upload the correct size so no resizing is necessary?
    – Daniel Beck
    Jan 15, 2013 at 20:00
  • 13
    @DanielBeck there are many “correct” sizes: 32 for user icon below posts, 64 for expanded user card, 128 for profile page…
    – F'x
    Jan 15, 2013 at 20:21
  • What's wrong with Gravatar? It gives you a centralized location to manage all your avatars
    – NullUserException อ_อ
    Jan 15, 2013 at 20:33
  • 7
    @NullUserExceptionอ_อ Some people might not appreciate the inability to remove one's account, or want a different SE profile image than on every other web page while still using the same email address.
    – Daniel Beck
    Jan 15, 2013 at 21:01
  • 4
    The resized version is a JPEG, which would explain the loss of transparency.
    – John Flatness
    Jan 15, 2013 at 21:19
  • @JohnFlatness http://i.stack.imgur.com/Da3ex.png?s=128&g=1 (underline png) is a JPEG?! Someone has serious issues…
    – F'x
    Jan 15, 2013 at 21:22
  • 4
    Despite the extension, it is indeed a JPEG.
    – John Flatness
    Jan 15, 2013 at 21:23
  • @JohnFlatness yes, I understand, and that sounds like a really weird design choice
    – F'x
    Jan 15, 2013 at 21:32
  • This is purely imgur issue which does not support resizing transparent (or animated) pictures, it should be dealt by them.
    – Shadow Wizard Is Sad And Angry
    Jan 15, 2013 at 22:21
  • 1
    @DanielBeck That's easily fixable: I have different gravatars on my SE accounts (this is me, and this is also me), all while using the same email. Just append a +something (eg: something+so@somewhere versus something+mso@somewhere). You can also delete the gravatar for your actual email (if I were to use my email without the +, you'd see an auto generated image).
    – NullUserException อ_อ
    Jan 15, 2013 at 22:51
  • 6
    @NullUserExceptionอ_อ If "somewhere" happens to be Gmail.com. By far not every email provider supports address tags. While you can (soft?) delete images, you can't get Gravatar to forget about the email address in plain format though, and they always store a user name and password (that you can change). Just think about common password/username/email address reuse patterns. You asked what's wrong with Gravatar, this is. While you can minimize issues, it's a reasonable request not to have to use it.
    – Daniel Beck
    Jan 16, 2013 at 9:30
  • 1
    Can we even be sure that the background colour will be the same wherever the image is used, so that it can be manually set?
    – Neil
    Jan 16, 2013 at 21:28
  • The Green Dragon cannot be resized, it resizes you!
    – Jack
    Feb 20, 2013 at 12:44
  • 1
    @F'x http://i.stack.imgur.com/Da3ex.png?s=128&g=1 < Notice the query string that says s=128. This will tell the server to resize the image in the HTTP response, but the URL (Uniform Resource Locator) Still points to the original Resource in your browser.
    – MarioDS
    Apr 25, 2013 at 8:18

5 Answers 5

Reset to default
9

This issue was addressed and fixed back in March. Here's a quote from Alan at IMGUR:

After some more investigation it looks like this issue was already fixed back March when we were dealing with some thumbnails being corrupted. Since that meta post was created before that, in January, I suspect it's already been solved. This is the same image from the post with g=1 https://i.stack.imgur.com/ZH0eC.png?g=1 and also when resized https://i.stack.imgur.com/ZH0eC.png?s=128&g=1

Please let us know if you find any other images with issues.

Improve this answer
17
  • 17
    Bug is fixed, but it's still not transparent, having white background instead. Any plans to keep transparency in the resized thumbnails?
    – Shadow Wizard Is Sad And Angry
    Jul 17, 2013 at 19:42
  • I'll ask, but I'm pretty sure we'll be sticking with transparent -> white.
    – Geoff Dalgas
    Jul 17, 2013 at 19:44
  • Fair enough. Just curious, was it busted along with animation, or did it always lose transparency when resized in imgur?
    – Shadow Wizard Is Sad And Angry
    Jul 17, 2013 at 19:52
  • 6
    This doesn't seem to be fixed entirely, this is the avatar I just uploaded via SE, and I get just solid black where transparency should be.
    – Mad Scientist
    Oct 9, 2013 at 19:53
  • Yes, it still happens. I just upload that image a few minutes ago for testing a related issue.
    – Ilmari Karonen
    Jan 18, 2014 at 20:00
  • @IlmariKaronen working fine for me (though not transparent) with same image uploaded now. How did you upload your image?
    – Shadow Wizard Is Sad And Angry
    Jan 18, 2014 at 20:12
  • @ShadowWizard: I uploaded it less than 30 minutes ago.
    – Ilmari Karonen
    Jan 18, 2014 at 20:13
  • @IlmariKaronen sorry, noticed only on second read. How did you upload it?
    – Shadow Wizard Is Sad And Angry
    Jan 18, 2014 at 20:13
  • @ShadowWizard: From my user profile page here on meta, using "change picture" -> "upload new picture".
    – Ilmari Karonen
    Jan 18, 2014 at 20:14
  • @IlmariKaronen true, when uploading file from the computer you're right, transparent becomes black on resize. I pasted the raw image data into the upload dialog and it caused the resize to work fine. Think it better be reported as a new bug, feel free to start it. :)
    – Shadow Wizard Is Sad And Angry
    Jan 18, 2014 at 20:19
  • @ShadowWizard: Done.
    – Ilmari Karonen
    Jan 18, 2014 at 21:14
  • 9
    @GeoffDalgas What's the reasoning behind the "transparent -> white" approach? With the addition of more and more different SE sites it's more and more likely that the image will be used on a site where the actual background is not white.
    – Etheryte
    Jun 9, 2014 at 15:29
  • 4
    GeoffDalgas: +1 for @Nit's comment above. If a user goes to their profile page on stackexchange.com, they'll see a large version of their avatar where white-for-transparent would indeed look good, but at the top-centre of the page, they'll also see a smaller version where a particular shade of dark grey would look much better. And on my Windows machine at work, under FireFox, my current avatar doesn't appear at all! In the age of PNG, why has StackOverflow decided to force users to have 2000s-looking avatars?
    – Michael Scheper
    Oct 22, 2014 at 3:44
  • Oops, this seems to be broken again, only this time transparent gets munged to black.
    – Michael Hampton
    Nov 21, 2014 at 3:14
  • 1
    Geoff you said "Please let us know if you find any other images with issues" yet you did not reply to a single comment here reporting lots of such issues. Can you please remove this misleading sentence? It doesn't feel nice to talk to a wall.
    – Shadow Wizard Is Sad And Angry
    Jun 28, 2015 at 6:52
14

The transparency (or rather lack thereof) is still an issue. I uploaded my current avatar today (17 December 2013) and the transparency in the PNG is replaced by black colour. Here's the image when included into the post:

enter image description here

Compare that with the one displayed as the avatar:

enter image description here

Improve this answer
1
1

Seems the black background and jpeg encoding is caused by the g=1 GET parameter:

https://i.stack.imgur.com/Da3ex.png?s=128&g=1
g=1

without it we get a png with white background:

https://i.stack.imgur.com/Da3ex.png?s=128
no g

Improve this answer
2
0

A solution no one has mentioned yet that is entirely within the control of StackExchange is to perform the image-resizing beforehand (preserving full alpha-channel transparency in pngs), and then upload 3 differently-sized images to imgur.

Improve this answer
3
  • 1
    Stack Exchange has no upload mechanism of its own, that's the whole point of using imgur in the first place. As far as I know, it just pass the file as-is to the external vendor without storing it anywhere.
    – Shadow Wizard Is Sad And Angry
    Jan 21, 2013 at 8:28
  • "Passing" = uploading. Don't know what "upload mechanism" besides that you think I meant, but if it can "pass" one file, it can preprocess and "pass" three files.
    – ErikE
    Jan 21, 2013 at 9:56
  • 1
    My main point is that such thing will require lots of efforts from the dev team here. While you are correct and it will work, it's better to have imgur fix their image resize code.
    – Shadow Wizard Is Sad And Angry
    Jan 21, 2013 at 10:54
-1

This can all be solved if the query slug from the imgur source is removed and https://i.stack.imgur.com/Da3ex.png is used in its stead, then the CSS automatically kicks in to make it look correct ^_^

Improve this answer
10
  • 1
    You do realize what's wrong with this solution and why it would not be used, right?
    – user159834
    Jan 15, 2013 at 21:51
  • @WesleyMurch ok tell me? Since the img's source is imgur -- it puts no extra load on the SE. So please, explain it to me ^_^
    – Naftali
    Jan 15, 2013 at 21:52
  • If I mention viewing the site on your mobile, does that ring any bells? You're forcing the user to download roughly 5 times as much data per avatar.
    – user159834
    Jan 15, 2013 at 21:54
  • @WesleyMurch what about visiting on mobile? CSS still works on mobile phones!
    – Naftali
    Jan 15, 2013 at 21:56
  • 2
    It has to do with what you force the user to download. More stuff to download means slower load times, more bandwidth used. I'll admit though, this is the only solution on SE's end - imgur would have to fix their resize method.
    – user159834
    Jan 15, 2013 at 21:57
  • 2
    @WesleyMurch usually after one load the image is in the cache and there is no need to download again. So no real issue there. especially in this instance where the same image is loaded 3 different times with 3 different queries, whereas my solution there is only one image.
    – Naftali
    Jan 15, 2013 at 21:58
  • 5
    Yes cache is meant to mitigate stuff like this, but it cannot help the first download of the image. Any given page may have 5-15 or more of these avatars, not in the user's cache yet. So it seems you're aware but don't agree that it matters, understood.
    – user159834
    Jan 15, 2013 at 22:00
  • 1
    @WesleyMurch well my solution is on SE's end (not on imgur's since we cannot change thier system) and the only way to show a png in the correct format currently (using imgur) is to use my method, so either we have to deal with png transparency looking "wrong" or we have to deal with large images. I guess it is up to the SE to decide that....
    – Naftali
    Jan 15, 2013 at 22:01
  • 7
    Just for reference, I managed to set a 4000 x 3000 image (natural size after upload, before dynamic resize) as my avatar. Compare original to resized, huge difference. I know I'm repeating myself, but I just can't see this being a usable solution.
    – user159834
    Jan 15, 2013 at 22:18
  • 4
    @WesleyMurch Another solution on SE's end is to host the images here.
    – NullUserException อ_อ
    Jan 15, 2013 at 22:59

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .