Hi Kathryn,
I found PubCoder's PNG compression rather lacking and not very effective (but the same can be said of just about any other design software). I always use ColorQuantizer to optimize transparent assets (PNGs) which does a brilliant job.
https://www.softpedia.com/get/Multimedia/Graphic/Graphic-Others/Color-quantizer.shtml
It is free, and in my opinion the best PNG optimizer out there. But unfortunately not available for Macs. Mac users have access to a reasonable effective optimizer in the shape of ImageOptim:
https://imageoptim.com/mac
You have two optional workflows:
1) optimize the image assets before importing these into PubCoder (or replacing the existing ones with new optimized versions). Then ensure that for each image in the Selection tab --> Image Options the "Use Original Image" option is checked.
This will instruct PubCoder to export the project with the original optimized assets intact.
Alternatively 2) export your current project as-is, use the unarchiver tool to unzip all the epub files, and replace the images with optimized versions. Drag and drop all the images into ImageOptim, and have at it! Possible that the files sizes will be reduced quite a bit.
As for the animations: one option is to replace your animations with APNG files. While PubCoder will not play these in the preview, as long as the Use Original Image option is used, these APNG files will play in Thorium reader (Windows/Mac/Linux) and the Apple reader.
Here is a simple example. I took a small animation of a fox running consisting of 12 frames, and each frame is around 7~8kb at 153 by 139 px. The background is transparent, with some edge anti-aliasing. Thus, PNG is the only option here.
Importing these in PubCoder and using the animation object to re-create the animation results in PubCoder saving new version at ~25kb per frame! That means Pubcoder increased the overall size of the originals from ~83kb to a whopping ~290kb!
So I turned on the Zopfli PNG compression in the Project settings and exported once more (this is much slower, and only suggested for final testing and release versions). No difference, though.
To tell PubCoder to use the original images, all assets used for the animations must be attached in the Assets panel. Then PubCoder will use the optimized versions.
The full animation with separate frames then resulted in ~83kb. Not bad.
Next, I converted the animation to an Animated PNG file. On a Mac you can use APNGb: https://github.com/shgodoroja/APNGb
On WIndows, APNG Assembler:
https://sourceforge.net/projects/apngasm/
The result: ~63kb. To import these APNG files in PubCoder, remamber to activate the Use Original Image option.
Now, you must also understand that an APNG does not require any code to be run or added, which means you will save a bit on epub xhtml and css code as well. It means in overall probably around 20~25% smaller files. Also, don't forget that if elements are animated across the screen without seeing a static version, then the resolution of said asset can be reduced as well. Readers cannot focus well on moving objects, and we can get away with lower resolution assets, providing another opportunity to reduce file sizes.
Movies are effective IF and WHEN no transpareny is required. Great for animated backgrounds, for example. But useless for transparent animated elements. (It is also possible to render the entire animation to a movie file, of course - but that would exclude any interactions. If your page is merely a static animation, converting the entire thing to a movie file is probably a good option depending on how much of the screen is animated.)
My basic workflow consists of optimizing static PNG files with Color Quantizer, and importing those with the "Using original image" option activated for each. I do not rely on Pubcoder (or other design software) to prep my PNG images (or my JPG images, for that matter).
For animations: it depends. While APNG is a good option, because these are non-lossy compressed frames, the resulting animation file size is quite heavy compared to movie files (which have lossy compression). So for full-screen background animations a movie file is the way to go.
But for animated characters/foreground elements there are other options.
- APNG
- html5 driven animations
Ideally (2) is used for larger characters, for example. Animate CC or Spine (two animation apps) can export to html. The approach here is to segment a character's limbs into parts that can be separately animated in an animation app. Then export an html5 version with a transparent background. The character parts are then compressed in a "texture atlas" (one image that contains all character parts).
The animation files are then imported in PubCoder, and the html file placed in a smart object with an iframe tag.
The main advantage here is that very complex animation sequences can be introduced, at little extra overhead, because only one or two texture atlasses will be used. This technique is often used in games as well, because the results speak for themselves, and the file sizes remain manageable.
This option, however, is somewhat more complex to deal with, of course ;-)
Sorry for the long write-up.