Wednesday, November 28, 2012

Troubleshooting PNG vs JPEG in EPUB

So, I wrote two articles on versioning in iBooks (here and here), but I didn't tell you my main reason for wanting to update the book.

The truth is that in the first version of my Monarch Butterfly book, my favorite page didn't work on the iPad 1. That page has 10 images, each of which measures 1600 x 1100 px. As I was exploring the possibilities of interactivity, it was one of the first pages that I created in the book. And because I had a vague (erroneous) idea that Apple preferred PNG, I decided to experiment with them.

PNG affords some advantages, including allowing transparency, at least in the 24bit version. In the later pages of the book, I used this to advantage for the arrows, so that I didn't have to position them perfectly on top of the images. In addition, PNG doesn't suffer from the licensing issues that JPEG has. On the downside, its compression is not as good, so images are larger.

Here's what the page looks like. It's set up so that if you click the images across the bottom, they are expanded into the center area, so that the reader can view and control a stop-motion movie of the caterpillar emerging from its egg, and then having its first meal. If you click the center image, the animation goes backwards.

Unfortunately, when you open the original version of this page on the iPad 1, it crashes. And like I do so often when I'm troubleshooting—and this is the real lesson of this post—I assumed that the problem was that the iPad 1 was slow and didn't have enough memory, and that I had just pushed it too far by adding too many images. I decided to upload the book as is, and warn people that it simply didn't work well on the iPad 1.

The other day, someone asked me about PNG and the NOOK and I remembered an issue I had come across a year or so ago. I was helping some folks with a book with lots of images. Not particularly big images (it was a flowing book), but lots of them. The NOOK would refuse to let you navigate to the next chapter by turning pages, even though you could choose the chapter from the TOC and it displayed just fine. Very strange. One workaround was to change the images to PNG format.

And even though the problem was the JPEG in that problem, it made me think I should try to switch from PNG to JPEG. And the crazy thing is that it worked. I'm not sure if it's because the images are smaller (233Kb instead of 950Kb), or because of the format itself, but now the page works on iPad 1 beautifully and doesn't crash.

So, the moral of the story is first, don't assume you know what the problem is, and second, let those bits of information percolate in your head and spark new theories that might help—even if they're not directly related, and third, use JPEG images in EPUB for iBooks unless you need PNG's transparency!

P.S. I've just sent an email to everyone who bought the first version of the book so that they can download the new version for free. If you don't receive the email, let me know. If you bought the book through Apple, you'll be able to update the book through the iBookstore: go to Purchased Books, and then click Update next to The Monarch Butterfly Book.

And if you haven't bought the book yet, you can find the latest version on the iBookstore or on my own website.


  1. Not only is that very useful to know, it gives me a really good reason to buy the book for my creaky old iPad 1. Thanks!

  2. @Liz, just got your email and have downloaded the update. Thank you so much for taking such care, being so proactive, and providing a no-nonsense way for purchasers to pull down the update!

  3. It's funny you mention this issue because when I was creating my last animated interactive ebook, I experienced it.
    But I was not aware at all of the iPad1 issue!
    My problem is that my iPad 2 was crashing when PNG were to big. I had to do all over again the pages with PNG (almost all of them).
    First because transparent PNG (for my background with an animated window) were so big I had to replace them with JPG+mask, as recommended.
    Then when I used PNG for animations (I had to, in order to animate several transparent layers) it was even worse.
    Another issue was when I added voices and musics: the more you add, the more the device has to handle. And my iPad 2 had trouble when the read aloud functionality was on an animated page with PNG images. I had to carefully test what I could animate or not and test it on both iPhone and iPad.
    The funny part is when I got the iPad mini and tried to open a fully animated version it worked fine!
    When using transparency, animation and sounds, the device has to be powerful enough, i guess.
    Another thing that could be interesting for you is that although it is not recommended (if not forbidden) to use GIF, my animated transparent GIF work fine and my ebook was accepted.

  4. I once read somewhere that the epub standard imposes a 10-Megabyte-per-Chapter limitation. Don't know if that is the source of the problem. But depending on what you are doing 10 Megabytes not be enough for serious work.

  5. My cartoon ebook used jpeg images and when I tested it on a Nook in their store it did the same thing with the chapters and TOC. Could not turn the page to go to the next chapter; had to do it with the TOC. Nook sells almost no books so I don't bother thinking about it. Kobo is virtually a non-seller as well so it doesn't deserve much consideration either.


More of my books