The often repeated and classic scenario of a .png showing as a dark image on websites when uploaded. I have done my homework and research on many Inkscape sites and have applied all solutions with no success.

I know this comes up a lot. I’ve read and read and tried and tried but no solutions I have come across are working.

Details:

Version 0.91
Windows 8.1
64 bit

First saved as .svg
Then used >File >Export PNG Image >Export As . . . >Export.
Background alpha values at 0.
Background RGBA is ffffff00.
Shows as a .png file in file explorer.
Not saved as a Cairo PNG.
No option in my V0.91 to save as a bitmap.
No option upon “Save As . . .” for the file type/extension of bitmap.
Shows up as white on white background in IE, Chrome and Firefox.
Shows as transparent in Windows Picture Viewer and Paint.
Uploads as a very dark rectangular image with vague lettering visible when uploaded to a website.

My thanks in advance,

James

Hi James,

does the website you upload the image to (facebook?) maybe convert the png image to jpg before displaying it?

Jpg files do not support transparency, and upon conversion from png, the transparency is converted to some other color - in this case, black (which is due to a bug in current Inkscape versions, I believe, should be white instead).

You can just add a white rectangle into the background of your drawing before exporting to make sure conversion from transparency to non-transparency is not necessary.

Could you share the PNG with us, so we can test? Can you share the address of the website? Or a link to the image where it's uploaded?

When you upload to a website, which browser are you using to view it?

In your search, did you come across the several to many messages explaining that some viewers and some websites just have this problem, and there's not much you can do about it. If you have the option of using a different viewer that might work -- you can only try it. But if it's a problem with a website, and you don't have any control over the website, there probably not much you can do.

For example, I used to use ImageShack as a host for images that I needed to upload. Often a transparent background would be displayed as black. Not all images with transparent background showed black, but some did. I never was able to figure out if it was something with the images. My final conclusion was that it must be something about the server. You know a site like IS must have many servers. So I thought images on certain servers behaved differently. I came to that conclusion because I could upload the same image on a different day, or different week, and it would display properly. I assumed it was because it was going into a different server.

I wish I had a better answer for you. But this is probably nothing to do with Inkscape. Of course I could be wrong. Maybe someone will notice some kind of problem with the image. But historically, it's not an Inkscape problem.

(@Brynn: yes, there is a bug currently: https://bugs.launchpad.net/inkscape/+bug/1430716 - programs that convert a png image to jpg often take the background color, which is always fully transparent black currently when the background is set to transparent, as a hint for which color to use after conversion.)

We may be talking about 2 different things, Moini. I was responding to James' description of using Export PNG and it showing with black background. It seems like you're thinking there may be a JPG somehow involved, but I don't understand how you came to that idea.

(I've never heard of a website converting an image format when it's uploaded. I don't doubt you at all, but I've just never seen that. Although if it's being uploaded into some kind of gallery -- yes, the gallery app could absolutely be creating thumbnails in a different format for example, like JPG. (Coppermine Galleries do that - I know because I use it on my site. And probably other kinds of gallery apps to it too.) (But I've never seen a black bg on a PNG in my CPG installation.)

Is that bug only when the commandline is used for exporting the PNG?

Now that I re-read the message though, I wonder about where the image is being uploaded. Maybe it's being uploaded into a set-size frame, which causes the image to be scaled, perhaps creating the described "dark rectangular image with vague lettering visible".

I guess the bottom line is that we need more info, before we can try to pinpoint the specific problem. The PNG or possibly SVG file, the website, or the url where it's uploaded.

@Brynn: the OP said the background becomes black after upload to a website, and that It is not black when viewed directly, before uploading.
Many websites convert png images to jpg images, for example facebook and twitter and g+, too, I think.
This is to save bandwidth and disk space, because jpg images are typically smaller in size. Our gallery app does that, too, when creating thumbnails (but it creates png thumbnails).

That bug concerns all PNG images exported from Inkscape with a fully transparent background, as far as I understand.

The only other reason I can imagine is that the website uses css to give all images a black background, as in the profile pages at inkscape.org (see my profile for an example).

Thank you for the many replies. I'll post this quick to show my appreciation and that time is needed to explore each.

Of interest thus far, the site I am uploading to is Shopify. The main logo is a .png and shows just fine. Five images in a slide show were all uploaded as .pngs and showed just fine too. The 6th slideshow .png was the one that went dark. I worked around it by converting it to a .jpeg that happens to have an all white background as the website has an all white background too. But that's a nice little coincidence and not a solution.

I shall explore and chat with Shopifiers about this and post findings in short order - James

I greatly appreciate everyone's input on this. Upon reviewing this post, I lean quite heavily to there being an Inkscape bug, I hate to say. But I am not a developer, so I can't state that with notable credibility.

If anyone has any new thoughts or potential solutions, please do reply.

I would appreciate to hear of any news of a near-confirmed bug if any, or, that there is nothing of the sort.

Here is the additional follow-up information. Files are attached.

1) Does the website you upload the image to (facebook?) maybe convert the png image to jpg before displaying it?

No. Shopify does not do this - pngs are preferred but other files types are accepted.
Of important note, I have uploaded approx 8 .pngs to the site, and all are just fine. What suggests an Inkscape issue is that the only .pngs I have uploaded that do NOT appear unadulterated with transparency are those created in Inkscape. The others were work arounds for reasons I won't go into, but were built in Word (?!), exported to PDFs, and then exported to .pngs. They work just fine and are transparent.

2) You can just add a white rectangle into the background of your drawing before exporting to make sure conversion from transparency to non-transparency is not necessary

Fortunately, as I may have mentioned, the website has a white background so changing to .jpg works just fine with .jpg's white background. But, this is more a happy coincidence.

3) Could you share the PNG with us, so we can test?

Files attached.

4) Can you share the address of the website? Or a link to the image where it's uploaded?

The site is commercial and is currently under construction, locked with a password, but a screen capture is attached of an uploaded Inkscape non-transparent darkened .png, as well as the same in native photo editing software FOTOR.

5) In your search, did you come across the several to many messages explaining that some viewers and some websites just have this problem, and there's not much you can do about it. If you have the option of using a different viewer that might work -- you can only try it. But if it's a problem with a website, and you don't have any control over the website, there probably not much you can do.

My Inkscape .pngs are transparent and fine in IE, Chrome and Firefox. Only when they are actually uploaded to a site - Shopify - does the issue emerge. I have not tried other sites as I only currently have access to the one. One might think, "Ah, then it is a Shopify issue." But, no, they take many file types and most tellingly the non-Inkscape .pngs I have uploaded are fine, so it can't be Shopify. Only the Inkscape .pngs have the issue.

6) For example, I used to use ImageShack as a host for images that I needed to upload. Often a transparent background would be displayed as black.

Same experience here. A FOTOR corrupted Inkscape .png screen capture is attached. (FOTOR = freewware for basic photot editing). But, again, only the Inkscape .pngs are corrupted in FOTOR; all other .pngs created with other software are fine.

7) I wish I had a better answer for you. But this is probably nothing to do with Inkscape.

I appreciate this, but the general thesis emerging above is that .png corruption is a apparently an Inkspace issue, upon upload and even natively on one's system. Witness the FOTOR attachment and the experience with ImageShack. Again, at my end all ,pngs that are not Inkscape are uncorrupted under all uses.

8) I guess the bottom line is that we need more info, before we can try to pinpoint the specific problem. The PNG or possibly SVG file, the website, or the url where it's uploaded.

Except for the webiste, files are attached.

9) Many websites convert png images to jpg images, for example facebook and twitter and g+, too, I think.This is to save bandwidth and disk space, because jpg images are typically smaller in size. Our gallery app does that, too, when creating thumbnails (but it creates png thumbnails).That bug concerns all PNG images exported from Inkscape with a fully transparent background, as far as I understand.The only other reason I can imagine is that the website uses css to give all images a black background, as in the profile pages at inkscape.org (see my profile for an example).
Something doesn't work? - Keeping an eye on the status bar at the bottom can save you a lot of time!

Shopify accepts .pngs and does not convert them to .jpg. One source: Paragraph 8 - http://unmatchedstyle.com/news/masterin ... themes.php

10) Maybe it's being uploaded into a set-size frame, which causes the image to be scaled, perhaps creating the described "dark rectangular image with vague lettering visible".

Possible, but Shopify goes as large as 2048 by 2048 pixels and "typically suggests 1024 x 1024 pixles for square product images" - https://docs.shopify.com/manual/product ... mage-sizes

My Inkscapes .pngs were just 402 pixels.

11) ZIP / Files attached -

a) TEST_PNG_FEB_23.svg - (this is an Inkscape .svg) - A simple one created and tested for this post;

b) TEST_PNG_FEB_23.png -.png of the above;

Created with the following main properties:
ALPHA = 0 (RGB, HSL, CMYK, Wheel & CMS)
RGBA = ffffff00
First, saved as INKSCAPE_TEST_PNG_FEB_23_2016.svg
Then, Export PNG Image
Then, Export As . . . INKSCAPE_TEST_PNG_FEB_23_2016.png
Then, Export.

c) WEB_SCREEN_CAPTURE.PNG - What shows up on the website after uploading; (ironically a .png screen capture);

d) WINDOWS_PHOTO_VIEWER.PNG – self-explanatory - all is well;

e) WINDOWS_PAINT.PNG - er, um, well PAINT is worth a try;

f) FOTOR.PNG - on my own system; no uploading; example of the Inkscape .png issue even before upload;

I hope this helps if there is a bug.

Many thanks - James

Wow, that was amazingly thorough. The info may well be useful at some point.

Regarding my comments about it not being a problem with Inkscape -- note that I'm no expert. I don't know the technical side of Inkscape, e.g. how it exports PNGs, where along the process that corruption could occur, etc. The info that gives me the impression it's not a bug comes only from reading many forum messages about various circumstances, all having the symptom of a transparent bg showing as black. The answer I've read over and over again, is that the problem lies in whatever program is being used to view the PNG.

And plus it comes from my own experience, where I've uploaded the same exact PNG to the same site (at different times) (ImageShack), and sometimes it shows the black bg and sometimes it doesn't. Although to be honest, it's been a few years since I had that experience (way back with version 0.46 approx). Maybe I should do some current tests?

Of course it could easily happen that this eventually comes to be recognized as a bug. Maybe the problem just hasn't been elevated to any interested developers yet?? (or maybe it already has been reported -- the bug tracker search gives me fits and I often can't find things) (even reports that I know are there )

Since we have confirmation that the site (Shopify) does not convert to JPG, and since this thread is so rich in details, I wonder if it would be a good idea to make a new bug report? Unless of course a report exists, and I just can't find it.

I guess we didn't mention this yet, but this is a user support site, and not very many developers participate here. Maybe ~suv (one of Inkscape's busiest bug experts, and one of the few devs who do participate here) will comment for us? Inkscape's bug tracker is here: https://launchpad.net/inkscape. And that's where users and developers typically interact.

@JamesUpNorth: Could you re-download the graphic from the published website? (using your browser: right-click on the image, Save image as...)

*If* the downloaded image really is a png image, then I guess Shopify's resizing algorithm is somehow broken - even a black transparent background should still be transparent after resizing, independently of the Inkscape bug with the broken background color, which is this one:
https://bugs.launchpad.net/inkscape/+bug/1430716

I am going to submit a bug report based on the foilowing:

1) A Shopify Forum Expert has stated:

"Shopify does not convert a PNG to a JPEG for product images. You're free to use whatever type you like, including those with transparency."

2) This person tested the file at the following location as an upload to Shopify and reported that no transparency was lost with no black Alpha channels:

http://tavmjong.free.fr/INKSCAPE/MANUAL ... xport.html

3) I downloaded the same test file; uploaded it to a Shopify page and indeed it is just fine;

4) BUT then I noticed via info in the link above, that the file was created in either V 0.47 or 0.48;

5) I opened the current version 0.91; opened the above test file onto a blank page; saved / exported as a PNG;

6) I then had a V 0.91 file. I uploaded that onto a Shopify site and, ouch, it is corrupted with no transaparency. A PNG (ironically) of a screen capture of the end result on Shopify is attached; (NEW_SHOPIFY.PNG). The original uncorrupted version may of course be found at the link above.

Conclusion: There is a bug in 0.91. I'm 99.9% certain via taking the test file as a V 0.47 or 0.48 file and saving it as a V 0.91 with corruption then occurring, is proof of this.

Certainly freel free to comment away. I shall submit a bug report and post any news.

Many thanks for everyone's input - James

Thanks for all your hard work to sort this out. It will be interesting to follow this issue. Will you please post a link to the bug report?

I can't replicate the issue... same OS and Inkscape version.

I saved the png from Tav's site (the manual), imported into Inkscape .91 and exported a png. That exported png opens in GIMP with proper alpha transparency.

HI again:

I'll cut to the chase and then speak to tylerdurden's post above:

1) Bug report submitted. Replies and e-mails exchanged with programmer/ debugger "Hachmann."
2) Report investigated and now confirmed that all the above is a known bug in V0.91.
3) Details of bug can be found here: https://bugs.launchpad.net/inkscape/+bug/1430716

In a nutshell, when an Inkscape V0.91 PNG is uploaded to a website, such that the upload screen provides a thumbnail preview before actual loading into the image field, many sites with this thumbnail set-up convert the PNG to JPG for the thumbnail. It is here that the transparency / corruption occurs. (I believe this may have been touched on in previous posts). If there is NO thumbnail preview, meaning that the image field is directly populated, THEN an Inkscape V0.91 PNG will work.

For example, at a new Shopify site I've been working on, an Inkscape V0.91 PNG loaded as a logo displays just fine, because Shopify has no logo field thumbnail previewer.

But all other Inkscape V0.91 PNGs uploaded to fields in Shopify that first display as thumbnails, populated their fields with loss of transparency / corruption. For other sites with thumbnail previews with JPG conversion, again, this is where the bug emerges.

Regarding tylerdurden's post above, my reading is that your test worked in that your image was not uploaded first to a website using thumbnail previews. Hence, you would not experience any loss of transparency / corruption. If you test as much and succeed, the site you are using is one of the apparent few that displays thumbnails as PNGs.

LESSONS LEARNED

1) There is a transparency bug in V0.91 for sites that use thumbnail previews with JPG conversion.
2) The powers that be are aware. As of 2015-09-07 the bug was given recognition status; has a priority of undecided to medium; and will hopefully be addressed in V0.92 as per the bottom of the last post for the bug link above.

My own realization is that until the bug is fixed I cannot use Inkscape for sites that have thumbnail JPG conversion IF a PNG is required. I can only use it for image fields that have no thumbnail preview, or, sites for which a JPG will do. Meaning, er, um, I pretty much have to use a different program most of the time.

I will give a friendly nudge to Hackmann to hopefully upgrade the priority, as this bug in my view is a higher priority than undecided to medium.

Many thanks to all involved. Most impressed with the level of dedication. Hope that all this saves you time in not making Inkscape V0.91 PNGs for sites with JPG thumbnail previews.

No plans here to post on this again unless some dramatic news come to light.

Cheers - James

1. I probably shouldn't say this, but Hachmann, that's me (not programmer, not developer, only trying to help)
2. Use the workaround I have described: Just put a white rectangle into the background before export, if you know that the image will be converted to jpg.

Eh,

Seems Shopify and the current Inkscape renderer are incompatible...
Inkscape has black as the alpha color and for whatever reason, Shopify uses the background color as the alpha info.

The OP can use v.48 if Inkscape is desired.

For that matter, If the OP likes the .91 toolset, they can use that for composition in svg, then use .48 to render the png: