Using Texture Packer to reduce size of image sets with alpha channel

goodmorning,..where can I find

  1. Select the new exporter, should be CSS (responsive, retina, mask)

I can't find it...and when I make an export now, I get a bigger file ( from 229 kb to 398 kb)

*****my mistake.....I had to select the data format first ;-(

the one I can select is: CSS - responsive, retina ....(without mask)

by using this one..im getting the warning that its working with the trial/pro version

When I use the CSS simple version it works...still a .png image of 229kb becomes a
.png of 399kb and a .CSS document of 673 bytes...

Will that be on the end smaller? because the limit of a .zip folder is 150kb :wink:


  1. Set the folder to your own additional extension's folder (for custom exporter)
  2. After that, you can choose the exporter from the list

  • This solution requires the Pro-Version and you can give it a try by enabling it as a trial (as seen in your screenshot). It's worth the money if you use it for commercial work (in my opinion also for fun).

  • As described in the tutorial above, the PNG that Texture-Packer produces can be big… is only used to extract an alpha mask and get the packed layout. The final usage step is to change the exporter to JPEG and re(export) and there you can set the quality. It's important because the CSS is also rewritten with the JPEG path.

You can also use the PNG to create your own JPG using Photoshop (after saving the Alpha-Mask from it). To sum up this approach we get all assets on one "sheet" and the positional data and CSS classes… it seems like some additional work, but the payoff is easy to update, responsive and the mask can be even reduced to 50% size and optimized using ImageAlpha (4-32 colors for example).

2 Likes

Hello MaxZieb...

I had a short holiday :wink:
and was delight to see your reply..

I did start TexturePacker and try the pro version..but still can't choose the CSS....mask

see screenshot

still something wrong?

In step one don't choose the folder of the exporter but rather your enclosing folder:

:white_check_mark: your-path/Texture-Packer-Exporter/

not

:x: your-path/Texture-Packer-Exporter/css-mask/

1 Like

thanks :sweat_smile: again

Thanks,

I think I succeed :sweat_smile:

At the end, the size off the images increase 20%..
I could get the mask.png smaller...with ImageAlpha, but then loose the transparency for the shadow below the couch.


Beside that, it is a little more work than normal..but maybe...I can make it for every couch we need...and after that, it is just change the class name to switch?

Do I really have to buy TexturePacker?..or can I do it also in photoshop?....or is the .css file the necessary thing?...

39.- a year is no problem, but I would like to use it a little bit more, before I ask the manager to buy it :wink:

hype doc

result

Using texture packer on a single image is okay for a testing, but doesn't make much sense in production. Can you DM or publish the test data, so I can give it a shot to see what is going wrong.

how do you mean...hype file of TexturePacker file?

wasn't it in the wetransfer-link?

No, there is only your result. No, source file (PNG, texture Packer etc.).

O okay, I will do that Monday...I’m not in the office anymore;-)

Morning...youre meaning, this files?

①+② Given that the original couch PNG is around 205 KB and the result is only around 30KB combined you have a reduction of about 84%. So, I am not sure where you are getting the increase from but that seems to be a significant

③+④ And trying to reduce a copy of the original to 30KB using Image Alpha requires reducing it to 32 colors. In my opinion, the JPEG with the CSS mask totally wins out. As the class names stay the same you can also add new files to your texture pack later and even if texture packer repacks them into additional sheets (they are limited to 2000 square pixel) the CSS will assign the correct coordinates. Only the run to extract the alpha channel is still a manual process. The developer of Texture Packer commented to me that one can run an alpha pass from the app itself but that still requires a second export run. Texture Packer doesn't support multiple runs in on exporter.

Not sure what you are asking of me. Running custom export scripts in Texture Packer requires you to have pro. Contact the developer for an extended trial, might be possible?! I once had the chance to buy a slightly more expensive indie developer license as a one off payment, but I don't think there is currently that option. Depending on what you make a year on Banner and if the value proposition is appealing, I don't think this price matters much in the grand scheme of things.

If you don't need the "packing" you can always just use the manual approach of exporting each image manually and writing the CSS for it to get a mask. I think I posted an example of that woman somewhere and in that example I didn't use Texture Packer.

Update: There is still a lifetime tier at 99 Euros

Okay, ...all clear..im gonna try some more examples and when I like buy texture packer...I think with using more items in the project the decreasing will be grow.

Thanks a lot again

1 Like

Update:
I just used a link to the page (twice) and got the indie offer again… putting lifetime at 49 Euros.