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.