How to split a transparent PNG into 2 separated images with imagemagick

2
votes

Recently, I read an interesting optimization technique to optimize transparent PNG images.

The idea was to split a transparent PNG image into 2 parts : PNG 8 bit with color information and PNG 24 with transparency, and to merge it on the client side. It will drastically reduce the size of the image. In the article example made with Photoshop, but I'm pretty sure, we could make it automatically with imagemagick.

So, the question is : how to do split a PNG image with imagemagick in such way ?

1
imageoptimizationimagemagickpng
Are you sure you understand what you want to do? What does it mean "an image with transparency"? Does it mean that it include only the (semi) transparent pixels? And how would you combine them afterwards? (if the non-transparent part has all-opaque pixels, you cannot superpose them). Perhaps you should make yourself some example with the desired result, original and split images – leonbloy
Actually, I thought, what the superposition should be done with images superposition. I meant, transparent image, which contains the data only about transparency, about Alpha channel, if my understanding of terminology is correct. I will try to make such experiments, of course. – Fedir RYKHTIK

1 Answers

1
votes

The article talks about "dirty transparency" which means the colour values of transparent pixels, although not visible, are retained in the image - they are just made invisible by the alpha layer.

These values, because they continue to contain the colour information, prevent the PNG optimiser from encoding them efficiently. You can achieve what the article suggests in this respect within ImageMagick by using:

convert image.png ... -alpha background result.png

That will make all transparent pixels have the same colour (your background colour) and then the PNG encoder will be be able to optimise them more readily since the values repeat over and over again.

See last part of this answer.