Transparent PNG backgrounds being converted to black

  • Hi there, we tried permanently converting all of our media library images to WebP with this plugin. It worked well for most images, but some of our PNG images had their transparent background converted to black pixels, so we had to do a rollback.

    Here’s an example of one of the affected images: https://sitebolts.com/temp/icon3.png

    And what it looks like after conversion: https://sitebolts.com/temp/icon3.webp

    Other than that, the plugin worked great; most of our image sizes were reduced by half or more. Would it be possible to fix the transparency issue?

    • This topic was modified 3 months, 1 week ago by SiteBolts.
    • This topic was modified 3 months, 1 week ago by SiteBolts.
Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter SiteBolts

    (@sitebolts)

    We looked into the plugin’s code and found that it was using PHP’s native imagewebp function, which should definitely be compatible with transparent PNGs.

    Through some research online we were able to fix the issue by making a small edit to the PNG switch case in the create_webp function in lib/class-pluswebp.php file.

    Original:

    case 'image/png':
    	$src = imagecreatefrompng( $filename );
    	$img = imagecreatetruecolor( imagesx( $src ), imagesy( $src ) );
    	imagealphablending( $img, false );
    	imagesavealpha( $img, true );
    	break;

    Fixed:

    case 'image/png':
    	$src = imagecreatefrompng( $filename );
    	$img = imagecreatetruecolor( imagesx( $src ), imagesy( $src ) );
    	imagealphablending( $img, false );
    	imagesavealpha( $img, true );
    	$transparent = imagecolorallocatealpha( $img, 0, 0, 0, 127 );
    	imagefill( $img, 0, 0, $transparent );
    	break;

    After updating that code, we ran the conversion again on our client’s website and successfully converted every PNG image to WebP without breaking any transparent backgrounds.

    • This reply was modified 3 months, 1 week ago by SiteBolts.
    Plugin Author Katsushi Kawamori

    (@katsushi-kawamori)

    Thanks your report.

    I’m unable to download the image you specified, so we cannot test it. ( Sorry, you have been blocked
    You are unable to access sitebolts.com )

    Thread Starter SiteBolts

    (@sitebolts)

    @katsushi-kawamori – Sorry about that. I’ve loosened our firewall rules; are you able to access the testing images now? Otherwise I can upload them to Dropbox.

    Plugin Author Katsushi Kawamori

    (@katsushi-kawamori)

    Images could be retrieved.
    I added them to the media library.

    Plugin deactivated

    • The original image is now grayed out and invisible.


    Plugin activated

    • Original code
      • The original image becomes grayed out and invisible.
      • The webp image is correctly generated into a normal black and white image.
    • Your code
      • The original image and the webp image will be grayed out and invisible.
    Thread Starter SiteBolts

    (@sitebolts)

    @katsushi-kawamori – To clarify, the image is meant to be gray with a transparent background, not a black background. It sounds like maybe you were testing it on a white or light gray background, which made it difficult to see? Google Chrome also adds a light gray background when viewing transparent images in their own tab, which can make it more difficult to spot the issue.

    If you change the background to something like green or purple then the issue should be a bit more evident. Here’s an example: https://wctest.zilbr.com/webp-transparency-issue/

    I did a bit of testing and found that the bug only affects “indexed” PNGs but not “RGB” ones. The patched code appears to be able to handle both cases correctly.

    Plugin Author Katsushi Kawamori

    (@katsushi-kawamori)

    It is blocked and I can’t download it.

    Thread Starter SiteBolts

    (@sitebolts)

    @katsushi-kawamori – I’ve adjusted the firewall rules for that site now too.

Viewing 7 replies - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.