Transparent Images (PNG) has black background when converted.

[sajilo-anuj]

As title says, when a conversion is made on transparent png image, the converted image has black background.

The new version of the package started having this issue, installed version: 11.0.4
There was an additional issue with Fit::Crop which has been resolved by installing spatie/images: 3.3.3.

$this->addMediaConversion('square-thumb')
    ->fit(Fit::Crop, 100, 100)
    ->keepOriginalImageFormat()
    ->performOnCollections('image');

Original Image:

Converted Image:

[sajilo-anuj]

@timvandijck Any update regarding this fix?

[langeuh]

Having the same problem since v11
Note that this only happens for me when using 'gd' as IMAGE_DRIVER
'imagick' renders the background transparent for the same file.

Don't know if related, but I'm also getting this error for my transparent files:

ErrorException imagecreatefromstring(): gd-png: libpng warning: iCCP: known incorrect sRGB profile
vendor/spatie/image/src/Drivers/Gd/GdDriver.php:88 Illuminate\Foundation\Bootstrap\HandleExceptions::handleError
vendor/laravel/framework/src/Illuminate/Foundation/Bootstrap/HandleExceptions.php:255 Illuminate\Foundation\Bootstrap\HandleExceptions::Illuminate\Foundation\Bootstrap{closure}
[internal] imagecreatefromstring
vendor/spatie/image/src/Drivers/Gd/GdDriver.php:88 Spatie\Image\Drivers\Gd\GdDriver::loadFile
vendor/spatie/image/src/Image.php:49 Spatie\Image\Image::loadFile...

Versions

php -i | grep 'GD|ImageMagick'
GD Support => enabled
GD Version => bundled (2.1.0 compatible)
Imagick compiled with ImageMagick version => ImageMagick 7.1.0-52 Q16-HDRI x86_64 36d3408b5:20221106 https://imagemagick.org
Imagick using ImageMagick library version => ImageMagick 7.1.0-52 Q16-HDRI x86_64 36d3408b5:20221106 https://imagemagick.org
ImageMagick copyright => (C) 1999 ImageMagick Studio LLC
ImageMagick release date => 2022-11-06

spatie/image: 3.3.4
spatie/laravel-medialibrary: 11.0.5

[sajilo-anuj]

@langeuh So using imagick as Image Driver solves this bug? Been waiting too long. I need this to be working asap. So can you please confirm.

Edit/Update:
Yes the 'imagick' driver has no issue with transparent images.

[timvandijck]

This should be fixed in the latest version of the spatie/image package that is used by the medialibrary package.

[sajilo-anuj]

@timvandijck I checked but still I am getting the black background with the latest spatie/image package. I was initially using webp and the result is same. Tried with pngs to, and the result are with black background.

Original

Converted:

Package Versions:

[sajilo-anuj]

I checked with imagick driver and its working correctly for pngs, but with webp, its the same issue.

[timvandijck]

@anuzpandey5 intresting, would you mind running the test in the spatie/image package?

vendor/bin/pest --filter "works with transparent pngs" 

I'm curious if our differences in results are machine specific or if something else is causing it.

[zub0r]

@timvandijck This is still an issue.

Tested on the above image with "spatie/laravel-medialibrary": "11.9.1",
happens for both gd and imagick drivers, (ImageMagick 6.9.11-60, GD library Version: 2.3.3)

[zub0r]

Ok, so for anyone having this issue after migrating from older media-library - it looks like before the white backgound was the default, now you need to explicitly set in in your conversion with
$this->addMediaConversion('some-conversion')->background('#ffffff')...

[timvandijck]

Indeed, I believe in hindsight it was not ideal to have this default changed, but reverting it back might again cause problems for people who expect it to be there.

For now passing any color that includes transparency like #ffffff or rgba(0, 0, 0, 0) should do the trick.