Decrease size of ebook

Hey guys,

So I have basically finished up a small hymn book app for my church group. The only issue is the size of the app, as I just used scanned copies of the hymn book pages, so I have about 600 jpgs, so that makes the app around 200mb. This is technically fine for right now, but I plan to extend to more hymn books later on, and therefore the size will increase quite alot if I do it the same way I am doing now. 

I need to have the music notes stored in the pages, as some people like the notes when they sing along, and also I want it to be able to be used by the pianist to play with her tablet as a guide. Otherwise I would just use a bunch of text files which would be alot smaller.

So basically I am looking for either a better file type to convert everything too, or a better way to set up the app to not just use standard picture files for display, or for someone to tell me that theres not much I can do and the users will just have to deal with a large app size.

Thanks alot

What resolution are those images at?  If I read your post right that comes to about 333KB per image on average (less  fixed part of binary of course).

You might try:

  1. Putting them through: https://tinypng.com/  (works for JPG and PNG)

  2. Converting them to PNG and then running them through: https://tinypng.com/

I know #2 sounds weird, but I’ve seen better results doing it that way sometimes.

I use this http://luci.criosweb.ro/riot/ it is genius at crunching assets.  Much better than tinypng in output quality and file sizes - especially with 8 bit + alpha.

or plan B… load the images from a web server on first load.  Then your app would be like 10MB.

Thanks guys, sorry I was busy this weekend, Ill respond with what works later today when I get home from work.

Thanks again for the replies

Are these images that don’t need transparency?  If so, use JPEGs. They compress to much smaller than PNGs. If you need part of the image to be transparent, then you will need to stick with PNG.

Rob

Okay so I tried some of your guys suggestions last night.

I tried jpg compression and I wasnt able to get much smaller of a file size without lowering quality quite a bit, which is a problem as on small screens, users need to be able to read the smaller text off the pictures.

I havent tried png conversion, on this particular topic, but I will give that a go if nothing else works.

A web server will be last resort, as that increases the complexity of this, on purpose, very simple app.

I dont need transparency, and I will attach a sample image of what im working with.

Thanks a ton

there’s a fair amount of “speckle noise” in there, which is likely affecting your compression.

if you still have the original paper documents, try scanning in b/w but at much higher resolution, despeckle filter at hirez, downsample as grayscale, remap to 16 grays, THEN try saving as PNG-8 (which, at least in theory, should beat jpg with all those long runs of white)

There is of course another option… but is is a very technical solution.

You could convert the hymns into a data stream and then simply draw it note by note with some simple pngs?  If you can find MIDI files it will be easy as there are MIDI to JSON converters.

http://www.vexflow.com/vextab/tutorial.html is an example of what I mean.

Alright thanks dave, that seems like my best solution right now, just to rescan the pages and just deal with the app size that I end up with in the end.

This is super cool stuff that I am going to look into once I get everything else up and running. Since I dont have the MIDI files, I will have to transform them by hand, but I think there is some potential in this idea, I’ll update this post if I get around to messing around with it later.

Thanks again everyone for you thoughts and information.

Hey again guys,

So I followed your suggestions (new image attached) and the size is great, decreased final apk size by about 2/3’s. 

I now have having some pretty serious display lag, I think it is because of the much high resolution leading to newImageRect taking longer to create/display the image? I am also using transition.moveTo so that could be causing it aswell maybe.

For clarification of my problem, when moving to the next page, the transition used to be really smooth and quick, and now it is quite slow and laggy, and the only thing I have changed with the project is the images.

I will attach one of the new files and if you could let me know what would be the best thing to do to fix it that would be awesome. I can share code/etc too if you think that would help. 

You have scanned at a much higher resolution and therefore your image dimensions are probably much larger and therefore are consuming a lot more texture memory.  

Try resizing your images to the resolution you are using (in config.lua).  You may need to add a sharpen filter to keep things looking good if the resize is major.

What resolution are those images at?  If I read your post right that comes to about 333KB per image on average (less  fixed part of binary of course).

You might try:

  1. Putting them through: https://tinypng.com/  (works for JPG and PNG)

  2. Converting them to PNG and then running them through: https://tinypng.com/

I know #2 sounds weird, but I’ve seen better results doing it that way sometimes.

I use this http://luci.criosweb.ro/riot/ it is genius at crunching assets.  Much better than tinypng in output quality and file sizes - especially with 8 bit + alpha.

or plan B… load the images from a web server on first load.  Then your app would be like 10MB.

Thanks guys, sorry I was busy this weekend, Ill respond with what works later today when I get home from work.

Thanks again for the replies

Are these images that don’t need transparency?  If so, use JPEGs. They compress to much smaller than PNGs. If you need part of the image to be transparent, then you will need to stick with PNG.

Rob

Okay so I tried some of your guys suggestions last night.

I tried jpg compression and I wasnt able to get much smaller of a file size without lowering quality quite a bit, which is a problem as on small screens, users need to be able to read the smaller text off the pictures.

I havent tried png conversion, on this particular topic, but I will give that a go if nothing else works.

A web server will be last resort, as that increases the complexity of this, on purpose, very simple app.

I dont need transparency, and I will attach a sample image of what im working with.

Thanks a ton

there’s a fair amount of “speckle noise” in there, which is likely affecting your compression.

if you still have the original paper documents, try scanning in b/w but at much higher resolution, despeckle filter at hirez, downsample as grayscale, remap to 16 grays, THEN try saving as PNG-8 (which, at least in theory, should beat jpg with all those long runs of white)

There is of course another option… but is is a very technical solution.

You could convert the hymns into a data stream and then simply draw it note by note with some simple pngs?  If you can find MIDI files it will be easy as there are MIDI to JSON converters.

http://www.vexflow.com/vextab/tutorial.html is an example of what I mean.