Reducer

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!

33 Comments

  1. Posted Aug 8, 2009 at 9:32 pm | Permalink

    It makes my swf ( flex app with embedded png icons ) bigger – 744 vs 784kb.

  2. Mike
    Posted Aug 8, 2009 at 9:45 pm | Permalink

    it gave mine saddlebags

  3. Posted Aug 8, 2009 at 9:46 pm | Permalink

    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.

  4. Posted Aug 9, 2009 at 12:35 am | Permalink

    That’s better : )

  5. Posted Aug 9, 2009 at 10:58 am | Permalink

    …didn´t try it yet but sounds very very usefull!

  6. Toby
    Posted Aug 9, 2009 at 5:44 pm | Permalink

    I haven’t tried it yet but does the process lose the png’s transparency?

  7. Posted Aug 9, 2009 at 6:58 pm | Permalink

    No, this is the catch: You still have full transparency support!

  8. Posted Aug 11, 2009 at 8:22 pm | Permalink

    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.

  9. Posted Aug 11, 2009 at 9:15 pm | Permalink

    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.

  10. Posted Aug 11, 2009 at 10:28 pm | Permalink

    wow great stuff! thanks a lot for sharing, i will try it out soon…

  11. Posted Aug 12, 2009 at 2:46 am | Permalink

    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.

  12. Posted Aug 12, 2009 at 9:34 am | Permalink

    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.

  13. Posted Aug 12, 2009 at 11:03 am | Permalink

    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.

  14. Posted Aug 17, 2009 at 5:59 pm | Permalink

    There’s any way we can get adobe to insert it on the flex sdk? It’s an essential and missing feature.

  15. Posted Aug 17, 2009 at 6:15 pm | Permalink

    It is not a coincidence that this ticket has been updated last Friday:
    https://bugs.adobe.com/jira/browse/SDK-18954

  16. Posted Aug 17, 2009 at 11:41 pm | Permalink

    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

  17. Posted Aug 18, 2009 at 10:03 am | Permalink

    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

  18. Posted Sep 10, 2009 at 2:07 pm | Permalink

    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

  19. Posted Oct 28, 2009 at 11:24 am | Permalink

    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

  20. Posted Oct 28, 2009 at 11:27 am | Permalink

    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

  21. Posted Oct 28, 2009 at 12:28 pm | Permalink

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

  22. Posted Oct 29, 2009 at 1:13 am | Permalink

    Nice,

    i’ll check back in a while.

    thanx!

    arnoud

  23. Posted Oct 31, 2009 at 6:49 pm | Permalink

    Anoud: Your bug has been fixed. Thank you for the example SWFs.

  24. Posted Nov 3, 2009 at 11:27 am | Permalink

    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

  25. Posted Nov 3, 2009 at 1:16 pm | Permalink

    The bug has been fixed by Patrick LeClech who submitted a patch to the open source Apparat project :)

  26. Posted Nov 30, 2009 at 10:49 am | Permalink

    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

  27. Posted Nov 30, 2009 at 11:59 am | Permalink

    Anoud,

    please choose the Recuder download from apparat.googlecode.com which should work.

    Best,

    Joa

  28. Posted Dec 1, 2009 at 10:37 am | Permalink

    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

  29. pleclech
    Posted Dec 2, 2009 at 3:57 pm | Permalink

    @Joa you´re welcome for the patch, thanks for the Apparat tools :)

    @Arnoud Thanks for sending a sample file.

    Patrick.

  30. Posted Apr 18, 2010 at 10:47 am | Permalink

    How to use!!

  31. Erik
    Posted Apr 21, 2010 at 6:31 pm | Permalink

    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.

  32. Erik
    Posted Apr 21, 2010 at 6:55 pm | Permalink

    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.

  33. Posted Jul 20, 2011 at 11:22 am | Permalink

    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

10 Trackbacks

  1. By Twitted by elliotrock on Aug 9, 2009 at 1:41 pm

    […] This post was Twitted by elliotrock […]

  2. By Twitted by jenschr on Aug 9, 2009 at 2:07 pm

    […] This post was Twitted by jenschr […]

  3. By Redusera filstorleken på Flash filen! on Aug 10, 2009 at 3:38 pm

    […] http://blog.joa-ebert.com/2009/08/08/reducer/ Comments [0]Digg it!Facebook […]

  4. By [Flex] Reducer « Lab of Chowky on Aug 11, 2009 at 5:13 am

    […] Source: http://blog.joa-ebert.com/2009/08/08/reducer/ […]

  5. By Twitted by gillesguillemin on Aug 11, 2009 at 11:54 am

    […] This post was Twitted by gillesguillemin […]

  6. […] The full source code of Apparat is now available at GoogleCode. It is the whole framework behind TDSI and Reducer. […]

  7. By Merseyside Derbyshires on Aug 18, 2009 at 4:55 pm

    […] Reducer at blog.joa-ebert.com – Blog of Joa Ebert […]

  8. […] Visit Site […]

  9. […] Reducer – This tool squishes the data for PNGs inside SWFs/SWCs to make them significantly smaller. It does this by converting the PNGs to JPEGs. By adjusting the JPEG compression level. The higher the compression, the smaller the resultant SWF/ SWC. […]

  10. By » Day Two Marc Hibbins on Sep 24, 2009 at 2:24 pm

    […] there was Reducer, which reworks the JPG compression for SWF files to make them an incredible ten times smaller at […]