Previewing the difference in results using browsers that do not support alpha

M66 2025-05-20

When using PHP to process images, we often use the imagecolorallocatealpha() function in the GD library to assign colors with alpha (transparency) channels. Its syntax is as follows:

 int imagecolorallocatealpha ( resource $image , int $red , int $green , int $blue , int $alpha )

Where the value of $alpha ranges from 0 (completely opaque) to 127 (completely transparent).

But the problem is: even if we generate PNG images with alpha channel on the server side, in some old browsers (such as early IE versions) or in some environments that do not support alpha rendering, the effects users see will still differ, such as the transparent part is gray or black, or it cannot be displayed normally.

So, how can we improve this preview effect using PHP code on the server side so that even browsers that do not support alpha can at least see an acceptable graceful degradation?

Core idea

The key to solving this problem is:
While generating PNG images with alpha channel, an additional image with "tiled" background is generated for browsers that do not support alpha.

In other words, when we assign colors with imagecolorallocatealpha() , we also consider a version that removes transparency and directly combines the background.

Code Example

The following example shows how to use the PHP GD library to generate two images: one PNG that retains the alpha channel, and the other is a normal PNG that is synthesized with a white background for browsers that do not support transparency.

 <?php
// Create a canvas
$width = 300;
$height = 100;
$image = imagecreatetruecolor($width, $height);

// Open alpha Channel saving
imagesavealpha($image, true);

// Assign a completely transparent background color
$transparent = imagecolorallocatealpha($image, 0, 0, 0, 127);
imagefill($image, 0, 0, $transparent);

// Assign a translucent red
$redAlpha = imagecolorallocatealpha($image, 255, 0, 0, 63); // 50% transparent

// 画一个半transparent矩形
imagefilledrectangle($image, 50, 25, 250, 75, $redAlpha);

// Save belt alpha of PNG
imagepng($image, 'output_with_alpha.png');

// --------- Generate alpha of版本 ---------

// Create a canvas on white background
$background = imagecreatetruecolor($width, $height);
$white = imagecolorallocate($background, 255, 255, 255);
imagefill($background, 0, 0, $white);

// 将transparent图片拷贝到白色背景上（Remove alpha）
imagecopy($background, $image, 0, 0, 0, 0, $width, $height);

// Save alpha of PNG
imagepng($background, 'output_no_alpha.png');

// Clean the memory
imagedestroy($image);
imagedestroy($background);

echo 'Image generation is completed：<a href="https://m66.net/output_with_alpha.png">带transparent通道</a> and <a href="https://m66.net/output_no_alpha.png">无transparent版本</a>';
?>

Core Step Description

1?? Assign colors with alpha <br> Use imagecolorallocatealpha() to color the transparent or semi-transparent parts.

2?? Generate main image for browsers that support alpha <br> This part is just saved as PNG, and it can be supported by modern browsers.

3?? Generate degradation diagrams for browsers that do not support alpha <br> Create a canvas with white or other background and copy the main image directly, so that the transparent part becomes a solid background.

4?? Selective loading of front-end <br> You can use JavaScript to check whether alpha PNG is supported on the web page, or directly provide two download links for users to choose from.

imagecolorallocatealpha