PNG with transparent background turns black when uploaded and resized

Steps to reproduce:

  1. Create a PNG-8 with a transparent background.
  2. Upload to WordPress 3.3.1.
  3. View original PNG in any browser, Chrome, Firefox, IE, etc. Notice that it retains transparency as it should.
  4. View a resized version of that PNG in any browser. Observe that the transparent portions of the PNG are now black.

Examples:

  • Original uploaded image: http://me.mikelee.org/wp-content/uploads/icon-facebook-lg.png
  • Resized version of the uploaded image: http://me.mikelee.org/wp-content/uploads/icon-facebook-lg-150×150.png

This occurs even with a clean install of WordPress 3.3.1 with no plugins activated. Any ideas on what might be causing this bug? I’ve been searching all over this forum, the WordPress support forums, and anywhere else Google can find. All I see out there are mentions of a NextGEN Gallery plugin bug and the infamous IE6 PNG transparency bug, neither of which appear to pertain to this problem.

Thanks in advance.

3 s
3

I’d try saving it as a PNG 24 first.

If that doesn’t work have a look at these:

http://www.akemapa.com/2008/07/10/php-gd-resize-transparent-image-png-gif/

https://stackoverflow.com/questions/6382448/png-transparency-resize-with-simpleimage-php-class

Leave a Comment