Slow loading Epub - MSO, Many Animations

Report · Dec 19, 2018

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.

Report · Jan 05, 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.

Report · Jan 07, 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

Report · Jan 07, 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.

Report · Jan 07, 2019

Hi, I appreciate your detailed response. Quick question.

I have a fixed layout EPUB published to iPad (Retina) containing about 50 full-screen retina images in various slideshows within the EPUB - EPUB is about 130MB in size. I would be very interested in investigating your point regarding "Use Existing Image for Graphic Objects" point.

Just wondering, if I were to go through each image and re-link them to optimized JPEG versions (at the moment they are all PDS's) and individually set their Use Existing Image for Graphic Objects, what other step do I have to do? What about in the conversion settings in the export dialogue? See below.

Does InDesign's Use Existing Image for Graphic Objects setting override these export settings? I am new enough to InDesign and would appreciate the advice.

Also, I am having issues with animated elements (I have animated the headings, text and some images to make it more dynamic) I have set all to Hide until Animated and used some CSS to force the hide until animation action, however some pages (random with each export) have animation errors whereby the animated elements appear on the page, then they disappear and then animate in. Could this be related to size in your opinion?

Thanks,

Eoin

Report · Jan 07, 2019

EoinWinston wrote
Hi, I appreciate your detailed response. Quick question.
I have a fixed layout EPUB published to iPad (Retina) containing about 50 full-screen retina images in various slideshows within the EPUB - EPUB is about 130MB in size. I would be very interested in investigating your point regarding "Use Existing Image for Graphic Objects" point.
Just wondering, if I were to go through each image and re-link them to optimized JPEG versions (at the moment they are all PDS's) and individually set their Use Existing Image for Graphic Objects, what other step do I have to do? What about in the conversion settings in the export dialogue? See below.
Does InDesign's Use Existing Image for Graphic Objects setting override these export settings? I am new enough to InDesign and would appreciate the advice.
Also, I am having issues with animated elements (I have animated the headings, text and some images to make it more dynamic) I have set all to Hide until Animated and used some CSS to force the hide until animation action, however some pages (random with each export) have animation errors whereby the animated elements appear on the page, then they disappear and then animate in. Could this be related to size in your opinion?
Thanks,
Eoin

Yes, those overall export conversion settings will be overridden by the specific object ones. To make life easier for yourself, create an object style with the "Use Existing Image for Graphic Objects", and apply it to all your images (excepting the ones which you may not want to control yourself, of course).

When preparing your images for your ebook layout, first investigate the exact pixel size requirements by selecting the image frame in question, and checking the dimensions in pixels. This will yield the EXACT pixel size you will need to prepare that asset at. (That is, do make sure you are working with InDesign's iPad Retina document template.)

(I always work at a larger size for assets (twice, or so), so I have more leeway in cropping and perhaps rearranging things at a later time.)

Then you will have to decide which format will work best: either jpg or png. This really depends on the asset and the type of contents, but some general guidelines are:

JPG: objects which do not require any transparency, such as backgrounds, rectangular cutouts and overlays, and so on. Quality depends on the subject and contents.

PNG: any object which requires transparency, and artwork/illustrations with sharp-edged line art and a limited number of colours. Text objects that must be rasterized. Shapes that must be rasterized.

I always check the best image format on a per-object basis at the very end of a project.

As for your animation question: not sure... Animation in InDesign is often rather finicky. Instead of using custom CSS to hide your objects before animating in, I'd just group these objects (with an empty dummy object), and attach the animate-in action to the child, and the animate-out to the parent. Then play around with the timing panel until it is timed correctly.

InDesign's epub animation options are in dire need of an update for sure. They're pretty limited and prone to errors and buggy behaviour.

Report · Jan 07, 2019

Hi there,

Thanks for the detailed response, I started out with InDesign's iPad Retina document template. The 50 or so full-screen images are 2048x1536 and are @ 72ppi. They have no transparencies so JPEG seems to be the best option. For comparison the average PNG file size in the EPUB zip is 3.5MB and the same compressed JPEG is 330KB. (Note: I had originally used compressed JPEGS but failed to know about the Use Existing Image for Graphic Objects option)

Thanks for the advice about applying an object style. Wasn't aware of that so that will save a lot of time! I plan to do this tomorrow and will revert with progress and results.

On the animation problem, this has been a real pain going on a year. The error/bug/glitches can occur whether it's applied to objects, grouped objects, text, grouped text/headlines etc... in fact, if I output the EPUB from the same InDesign file two times in a row, one after the other, it can result in errors appearing in different places....never the same places/pages.

Also, even more confusing, when the EPUB is first opened in iBooks if the user immediately starts scrolling through the document it can result in +30 of 60 pages showing animation errors/glitches but if the user patiently allows the EPUB to 'sit there' for a while and very slowly goes from page-to-page, start to finish, it may result in only 2 or 5 pages with glitches..super annoying as it is so inconsistent and I have no explanation to give to the client. (Note: it is never a single animated element on a page that shows the animation error - always the entire page. (each page has multiple animated elements)

I have always wondered if the problem lies with the software (Adobe) or the platform (Apple/iBooks)

Anyways, will try using the JPEGS and see what it does to performance and file size...

Thanks again,

Eoin

Report · Jan 10, 2019

Hi!

I'm pretty sure I figured out one problem and the solution. Those "empty png" files are there because we create them. Yes, any time you create a "blank" frame (text or graphic) in InDesign, it exports to epub as an empty png file. For example, 1) a blank frame to group an animation, 2) a blank text frame to link to a nested MSO, 3) a blank frame for a button over an object, etc.

I think in theory when InDesign converts a file to epub, it sees the empty frame and "makes room" for what could potentially fill it. Maybe?? For me, I have over 650 empty png images which is why I'm having a huge problem. I made empty frames for all 3 reasons above.

Solution to remove PNG files: make all empty frames be text frames with a space in it. I've tested a few, so I know that works. However, I don't know what it will do when it sees "spaces" over the document.

Do you know of a script that will do this??? I would LOVE to install to get this fixed in seconds rather than hours. That way I can see if I've traded one problem for another.

Kind regards,

Sherlan

Report · Jan 07, 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.