Skip to main content
warm_Canvas15D5
warm_Canvas15D5
Inspiring
December 19, 2018
Question

Slow loading Epub - MSO, Many Animations

  • December 19, 2018
  • 2 replies
  • 1977 views

I'm working on an intricate FL epub that has 9 pages. Three pages have a few animations. However, the remaining pages are very intensive. For example, one page has an MSO with 62 states, buttons, 1-2 sound animations on each state and approximately 40 of the 62 states contain graphic animations. Each of the 62 states also has a link to a corresponding nested MSO with 62 states and scrolling text. All on one page, and yes, it needs to state on that page.

It works!! BUT it is very slow to load on the iPad. I replaced many png files with jpeg and reduced the resolution and jpeg file size on the export, but that didn't make any difference.

I'm thinking it must be the animations and possibly the number of MSO states. I added an additional 22 sound animations with corresponding play and stop buttons. It pushed the iPad over the edge (white screen for 20 seconds and another 10 seconds or so to fully load). Of course, it works fine on the iMac or laptop.

Is there a way to get it to load more efficiently? I still need to add another MSO with 15-20 states with sound animations and corresponding buttons and nested MSO on a separate page.

This topic has been closed for replies.

2 replies

warm_Canvas15D5
warm_Canvas15D5Author
Inspiring
January 7, 2019

So I tried to take one of my PSD images and put it at 72ppi. It looks terrible on a large monitor, but the PNG file looks fine. Maybe my artist can draw items in Illustrator so they won't look so pixelated. This product is definitely for computers and laptop, but again, I also need it to look good on a projector screen. 150ppi looks better. I'll just have to mess with it. 

Yes, I had seen something about ecancrusher. Thank you for mentioning it. I will check into that.

rayek.elfin
rayek.elfin
Legend
January 5, 2019

As with games, highly interactive epubs with loads of animations and graphics may overload a mobile device unless you are very careful how assets are prepared.

Couple of suggestions:

1) I assume you are working in an iPad Retina document in InDesign. Check all graphic assets in the links panel, and ensure all of them do not exceed 72ppi. (This means you are working at the native resolution of the iPad's retina screen.) Then export your epub at 72ppi as well.

2) InDesign's way of exporting PNG and JPG files is rather terrible. Instead, prepare you graphic assets at the exact required resolution, place them, and change the object export properties to tell InDesign NOT to process or convert these, and rather use YOUR prepared asset instead. Never depend on InDesign's export if you require your assets to be great quality and small in file size. Also, InDesign's scale-down algorithm is lackluster. If you want to do it right, do it yourself. And avoid Adobe tools for this (see next point).

2a) Make use of external optimized tools to optimize your graphics. Adobe Photoshop isn't very good at this, and the other Adobe tools are pretty terrible. For PNG opimization Colour Quantizer works best, and is easy to use. But it is not available for Mac, so you would have to do this on a different machine, or run it in WINE for Mac. It is worth the hassle, though. Color quantizer

2b) Animated elements can often be shown at a lower resolution than the native iPad screen, because moving/animated elements are blurred anyway. Take advantage of this. Place these at lower resolutions, for example half the retina resolution (four times as little video memory used and much faster loading times).

2c) when InDesign exports a fixed layout epub and you have groups in your document, it WILL create useless giant empty PNG files. While the file sizes of these are minimal, when loaded up in a device's video memory it will be uncompressed! Meaning: a 1kb compressed PNG image suddenly gobbles up 9mb of memory when displayed on-screen. To avoid this, use epub unzip tools to investigate the epub contents, and replace these empty PNG dummy files with 16px by 16px versions.

2d) often the (art) style of the assets used may allow you to use much lower resolution assets. Fluffy clouds look just as convincing and "sharp" at very low resolutions and scaled up. Sketched art, or rough painted art

as well.

In short, the best approach for excellent asset quality and super optimized files is to turn off InDesign's asset export and processing completely, and take control instead.

Steps:

To control image quality for an individual object in InDesign, choose Object > Object Export Options or right-click on the object and choose Object Export Options from the contextual menu.

Choose Use Existing Image for Graphic Objects – Uses the source file of the placed image. Make sure you are using a supported web format when choosing this option.

Finally, fixed layout epubs may not be the best choice for a highly interactive project with loads of animations and content. Consider using alternative tools to convert and export your work to an actual app (using a game engine, for example). But that would be much more technical, of course.

    warm_Canvas15D5
    warm_Canvas15D5Author
    Inspiring
    January 7, 2019

    Hello!

    Thank you ever so much for your detailed response!

    I believe 2(c) is most likely the majority of my problems. It's the whole memory thing/loading issue. I can see it stuttering on export. I'm definitely not a technical person (which is why I chose InDesign instead of an app), so I hope I can find these large PNG files. I do have several very small PNG files.

    Also, I will change the resolutions. I chose fairly large resolutions and exported it at 150 dpi since the user may project it on a large screen. I'll do some testing this week (hopefully) and see what happens.

    Thanks again!

    Sherlan

    rayek.elfin
    rayek.elfin
    Legend
    January 7, 2019

    sherlan  wrote

    I believe 2(c) is most likely the majority of my problems. It's the whole memory thing/loading issue. I can see it stuttering on export. I'm definitely not a technical person (which is why I chose InDesign instead of an app), so I hope I can find these large PNG files. I do have several very small PNG files.

    Also, I will change the resolutions. I chose fairly large resolutions and exported it at 150 dpi since the user may project it on a large screen. I'll do some testing this week (hopefully) and see what happens.

    Thanks again!

    Sherlan

    Don't forget that when you started out with InDesign's iPad Retina template/document, any bitmap image shown in the Links panel at a higher resolution than 72ppi is wasted: you should work at a max of the iPad's 2048x1536 resolution. More will not help, nor will it improve the quality when projected on a large screen. It will just needlessly gobble up resources and slow down things.

    Finding the empty dummy PNG files is only possible by either unzipping the epub file and examining the graphic assets in the OEBPS/image folder. You will have to check for empty images (which still display as very large in an image viewer), and replace those with 16px by 16px versions.

    A good cross-platform epub unzip/zip tool is this one: https://www.docdataflow.com/ecancrusher/

    Secondly, InDesign does a VERY poor job at compressing images. Smaller file sizes load up faster, and your published book file will be much smaller. Two basic methods to fix this are:

    1) unzip the epub contents, and optimize the image files. Replace the original ones with the optimized versions.

    OR:

    2) avoid relying on InDesign for image optimization, and use the aforementioned method to tell it to use your own custom prepared and optimized versions.

    One thing I forgot to mention is that InDesign does NOT support 8bit indexed transparent PNG files, and when you try to import these into InDesign the transparency will not work properly. This is why I tend to use a combined approach of (1) and (2). In ColorQuantizer when exporting a PNG an option becomes available in the save dialog called "Forced RGB", which basically prevents the PNG to be saved as an indexed 8bit version, and saves a full 24bit version instead. This makes sure that InDesign can read these optimized versions.

    At the very end, just before release of the book, I do a final optimization run (2) and clear any unneeded large PNG files, and optimize the PNG assets one more time.

    I am aware this sounds very intimidating, but it really is worth it: your book will be (a) much smaller in overall file size, and (b) process easier on slower (mobile) platforms (even on desktops). It also means your books may contain much more images and creative content compared to a direct InDesign exported version before it hits the file size limitations of online book repositories and markets. For example, the Kindle market sets a max size of 50mb(!) for an ebook. Although there are ways around these file size limits (such as splitting your book in parts or hosting it on your own site space), it does matter in the end, of course.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices