Another spinoff from my current library to optimize SWF/SWC files. Reducer is a tool that will make SWF and SWC files significantly smaller. There is currently a huge problem with filesizes. If you use the [Embed] tag with PNG images they are not compressed at all. For the Hobnox AudioTool we have been using the Flash IDE to export all graphics so that they are smaller which was a pain.
Now with Reducer you are safe to use [Embed] and then run the tool afterwards. It will compress all lossless images and make them lossy. But usually a PNG can be compressed at 100% JPEG quality and you will still safe a lot of data.
Note: You will not loose alpha transparency when using Reducer. The SWF file format allows us to use a special compression where a PNG gets split up into its color and alpha channels. The color channels are encoded using the traditional JPEG algorithm with adjustable quality while the alpha channel is handled seperately. Transparency is always stored in a lossless fashion which means even with a low JPEG quality you will not get any compression artifacts for the alpha channel.
Update: Reducer is now open source!
It makes my swf ( flex app with embedded png icons ) bigger – 744 vs 784kb.
it gave mine saddlebags
What? This is an outrage!
Do you use lossless embeds in there and how do you export the SWF? Via the Flash IDE or FlexBuilder. Oh, and did you try a different quality?
Anyways, I have an idea for your case.
I made a small update:
- Images up to 16x16px are ignored.
- If the loseless image is smaller than the lossy image it will be kept now. This does not take into acount that the whole SWF gets compressed again though.
That’s better : )
…didn´t try it yet but sounds very very usefull!
I haven’t tried it yet but does the process lose the png’s transparency?
No, this is the catch: You still have full transparency support!
I just tried it and the size stays almost (1Byte) the same with this console output:
[i] Running tool “Reduce” …
[i] Ratio: 1.2386248E-4%
[i] Total bytes: 1
[i] Completed in 1134 milliseconds.
[i] http://www.joa-ebert.com/
I am using Flex 4 and the project contains a bunch of PNGs with alpha channel. And I did not set any special parameter. Hmm.
Sönke, how big are those PNG files and do you use the [Embed] tag?
I added a small early-out that will ignore images with a size of 16×16 and smaller.
wow great stuff! thanks a lot for sharing, i will try it out soon…
I’m having Sonke’s problem, although I save 5x as much with 5 bytes.
My swf is full of [Embed]‘d png’s. Some are smaller than 16×16, but most are not. Almost all of them have very few colors (and use indexed colors), if that makes a difference.
So, I tried dramatically lowering the quality (saved me 92852 bytes) but the game looked exactly the same at first. Then I noticed only some images were converted to jpg, while most were left alone.
I’ve been running around your source code and realized my mistake, I thought reducer would optimize lossless images, which it doesn’t seem to do (am I correct?). Very few of my images would be better suited to even low-quality jpgs, leaving my swf largely unchanged.
I have a few files with 8KB though which are 40×40 and they are embedded with [Embed] or in MXML with @Embed. A lot are smaller than 16×16 and the larger not all have an alpha channel.
There’s any way we can get adobe to insert it on the flex sdk? It’s an essential and missing feature.
It is not a coincidence that this ticket has been updated last Friday:
https://bugs.adobe.com/jira/browse/SDK-18954
Hi Joa,
This tool is very useful to use on runtime css files. We have completed the development of a project that had a 1.3 megabyte css file. @ 80% quality I was able to reduce the css file size down to approximately 450 kb. I noticed however that pngs with small dimensions disappear. I was unable to determine how to reproduce this issue, however, I can send pngs that this happens to if you choose to continue working on this tool. From what I can tell, pngs that were greater than 16×16 do not seem to be affected by the issue I am experiencing.
I am still able to use this tool after doing some manual optimizations. We moved graphic assets > 40kb into the modules that use them. We saved about 200 kb on pngs by targeting these module swfs. The final size of the css swf after moving pngs to modules was 157 kb. With only small images in the css file, compression was trivial, but remained effective on modules.
In the current state of the tool, this approach may be useful for those who use runtime css with modules in flex.
Thank you,
Melih
This sounds great Melih,
I will have a look at small PNG files. Actually I handle PNG files of a size that is smaller than 16×16 different.
Best,
Joa
Hi Joa! This is a great tool! I´m not a very good friend with the console and therefore I am looking for a way to get a front end to work together with Reducer. I´m not familiar with Java and I have no idea if it´s even possible to use i.e. Air to create this front end, but that was my thought. Do you think it´s possible?!
Best regards
Patric Jonsson
Hi Joa,
very nice tool,
I tried it with a .swf of 1.4 meg and it was reduced to 800k nice!
there was 1 problem.
some small icons disappear after optimization.
optimization:
java -jar reducer.jar -input the_romantic_manifesto.swf -output the_romantic_manifesto_0.9.swf -quality 0.9
as you can see online the icons of the music player disappeared.
they are 16×16 px and are embedded in the regular way for example the play button:
you can see the result online here. go to music (no sound is actually avaiable, just the swf’s are there)
the first link is the original, the second the optimized.
http://www.theromanticmanifesto.com/the_romantic_manifesto.swf
http://www.theromanticmanifesto.com/the_romantic_manifesto_0.9.swf
if you want the source for testing let me know!
Arnoud
sorry the code for the play button was filtered out….
here it is:
mx:Button id=”playPauseButton
click=”togglePlay()”
toggle=”true”
width=”18″
height=”18″
icon=”@Embed(source=’assets/images/play.png’)”
toolTip=”Play”/
cheers,
Arnoud
Cool thank you. I have heard about taht error before but I was not able to reproduce it. With those SWFs I will be finally able to fix it :)
Nice,
i’ll check back in a while.
thanx!
arnoud
Anoud: Your bug has been fixed. Thank you for the example SWFs.
Hi Joa,
awesome! we wanted to use it in a big project, but we use small images.
With this fix we can use it :-)
thanx for the fast fix!
Arnoud
The bug has been fixed by Patrick LeClech who submitted a patch to the open source Apparat project :)
Hi Joa,
i needed to update the project of which i posted the problematic swf files.
After checking out taas from svn and rebuilding i tried the fixed reducer, but still the images smaller than 16px disappear on the player.
is the fix already in svn? or do i need to do something with
deblock or keep-premultiplied? Not sure where those are for.
thanx,
Arnoud
Anoud,
please choose the Recuder download from apparat.googlecode.com which should work.
Best,
Joa
Hi Joa,
Thanx, works great!
Gotta say i love this tool, it’s so useful! 1.4 meg to 800k without visible
quality loss is awesome!
thanx again,
Arnoud
@Joa you´re welcome for the patch, thanks for the Apparat tools :)
@Arnoud Thanks for sending a sample file.
Patrick.
How to use!!
I am not able to further compress swfs with pngs with alphas and using quality 1.0.
In your documentation you say:
“- The best way to reducer is embedding PNG files with an alpha channel and then using the -quality 1.0 setting. This will keep the best quality but your SWF will still shrink a lot.”
Is there an additional parameter or setting I should be using? Thank you.
I swapped in your test rainbow png for my png of little variation and… file size reduction goodness! Obviously, I guess the type of image factors into the savings. My images do not have that much variation, so I guess the savings are moot. Any event, this was educational and fun. Thanks.
Oh man! it works like a charm!
is there a version for reducing audio files?
i use flex and it seems there are a lot of limitations in using low freq or low kbs mp3 files
anyone there could give me the best solution about best audio compression method in flex? :D
i like your blog very much :D