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?
-
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.
The topic ‘Transparent PNG backgrounds being converted to black’ is closed to new replies.
