Image Optimization for Textbooks
9 June 2014
There is no one-size fits all when producing images for textbooks. Therefore a number of image optimization techniques are required. Some of them are discussed here.
I recently blogged about audio optimization for textbooks. Now it is the turn for images to get a little work.
A typical interactive K-12 textbook has some combination of:
- Text (it seldom goes away) in many languages
- Images (which may be SVG)
- Widgets
- Audio
- Video
- CSS and scripted animations of varying sophistication
- Interactivity of various sorts
- MathML or Math images in some subjects.
This little combination is of course "multimedia" and can bloat the size of an e-book very quickly.
File Size = Bandwidth Cost
We have been working on a lot of textbooks which have a lot of images and have to produce books while handling the following problems (amongst many):
- We deliver digital content to any platform from five inch mobiles to the desktop and projectors.
- We don't have the luxury of working with a single aspect ratio and screen size. Design has to work for 4:3, 16:10 and 16:9.
- The files are often delivered in low-bandwidth or no-bandwidth environments.
- The textbooks are delivered to thousands of users in hundreds of schools and institutions.
So, file size does matter!
So, file size does matter! The non-text component of any textbook can easily be a bandwidth gobbler if not considered and handled explicitly during design and production.
If images are processed casually with print or even web-techniques e-book packages can bloat insanely. With a few standard image processing techniques, a little thought, good eyeballs and critical QC amazingly small packages can be created.
Different Subjects, Different Years, Different Images, Different Interactivity
There is no one-size fits all when producing images for textbooks. Therefore a number of image optimization techniques are required depending on the use and context-value of an image.
Photographs, charts, graphs, illustrations, icons and other images will all need specific consideration when creating a digital textbook. This is especially true when a print textbook is being transformed into an interactive masterpiece.
We have put up a small set of five tutorial articles on APEX@IGP; primarily as a guideline for licensees of IGP:Digital Publisher, but they are available to all. These cover a range of image processing issues and techniques. Here is a link to the Introduction page. Here are direct links to the various articles by title.
- A Little Technical Background About Images
- Image Pixel Dimensions
- Lineart (Black and White) Images
- Grayscale Images
- Flat Colour Images
- Colour Photographs and Illustrations
An Example
A print maths textbook had around 100 plotted graphs presented in a nice spot coloured border. At three graphs a page that was a lot of paper. The graphs were all printed in black and gray.
Because of the nature of the instructional text flow and some other issues the graphs could not be treated as SVG. So it was PNG all the way. The images needed to be 800px wide to ensure clear presentation in wider viewports. Each image with its border, saved as a standard PNG was 95Kilobytes. 100 X 95KB = 9.5 Megabytes. We needed to do better than that.
The image was separated into two images; border and graph. These were then optimized as Indexed PNG images with aggresively reduced palettes.
The border was reduced to 32 colours and the filesize became 21KB.
The graphs were reduced to 16 colour palettes and the average size reduced to 5KB.
We only needed the border image file once as we were now able to use a little clever CSS to insert the graphs into the border. These were set with @media so they would size according to the plaform viewport size and orientation.
This is a dramatic saving of 9MB with no visible reduction in image quality on any device or platform.
The final package filesize for these images is now 100 X 5KB + 21KB = 521KB.
This is a dramatic saving of 9MB with no reduction in image quality on any device or platform.
Summary
When transforming a print textbook into an interactive digital content book for the world, the usage, treatment and process planning for images is important during design analysis as navigation, design and interactivity interpretation.
We are working with publishers to create textbooks for delivery around the world, in multiple languages, in regions that may have very poor or no bandwidth. File size really matters whether books are being transferred by Internet, wireless or sideloading. Of course these are good production techniques irrespective of bandwidth availability.
Use indexed PNGs and aggressive colour palette reduction where the images are suitable...
There has been an aversion to indexed PNG images as a somewhat non-recommended technique. Indexed images are not the choice for most photographs where JPG does the job well. Use indexed PNGs and aggressive colour palette reduction where the images are suitable for the treatment.
This sort of approach emerges naturally when a controlled vocabulary tagging system like IGP:FoundationXHTML is used. This is the native tagging pattern in IGP:Digital Publisher. It is less obvious and difficult to execute when using various desktop applications for production because a technique as simple as the double nested images example above is hard to execute. IGP:Digital Publisher is a toolbox with the breadth of tools and techniques instantly available to address nearly every digital content production problem or challenge.
The final package is processed to ePub3 or E0 for final channel delivery using AZARDI:Content Fulfilment, for ePub3 to any other reading system, or even transfer to an LMS or other website.
Posted by Richard Pipe