Transparent Images (PNG) has black background when converted.

[ghost]

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:

[ghost]

@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

[ghost]

@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.

[ghost]

@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:

[ghost]

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.

[freekmurze]

Let's fix this when we tag a new major version :thumbnail

[mauricekindermann]

Yup still a problem. For now I have hard coded background->(#ffffff). I have about 500k images/conversions, so regenerating them is not trivial.

[TonsiTT]

Is this still planned to be fixed? The issue still seems to be there

[timvandijck]

@TonsiTT like said above we will likely fix this when we tag a new major. For now you can use the workaround of passing a transparent background color:

$this->addMediaConversion('my-conversion')->background('#ffffff');

[TonsiTT]

@TonsiTT like said above we will likely fix this when we tag a new major. For now you can use the workaround of passing a transparent background color:

$this->addMediaConversion('my-conversion')->background('#ffffff');

Thanks, this issue was closed so i assumed this fell between the cracks.
Also, sorry if i am not understanding this correctly, but using ffffff just adds a white background to my (previously) transparent images. So it doesnt really solve the issue unless i am doing something wrong here

[timvandijck]

@TonsiTT can you try passing rgba(0, 0, 0, 0) or #fff0? I might have been wrong with the #ffffff. Basically you just need to pass a color with full transparancy.

[BenjaminSimode]

It worked well with RGBA colors, thanks for the tips!

$this
    ->addMediaConversion('thumb')
    ->background('rgba(0, 0, 0, 0)')
    ->keepOriginalImageFormat();

[mauricekindermann]

Nice, I might try that. Just be care of adding keepOriginalImageFormat if you already have conversions, because I did that and all existing conversions stopped working (since by default this package expects all conversions to be JPG, so it always uses a JPG, and if you specify this it will always return .png or .gif etc). So you just need to regenerate your existing conversions.