Image Pixel Dimensions

These guidelines are for the production of K-12 textbooks that are to be delivered to a wide range of platforms, devices, viewports, resolutions and aspect ratios with AZARDI Desktop, Cloud, Android and IOS ▶ reading systems in particular; but any reading system in general.

The pixel "dimensions" of any image have to be considered during the design phase of any interactive digital book that is being converted from print resources.

In International K-12 textbook production you don't have the luxury of targeting a single device with a fixed aspect ratio and resolution. Therefore more thought, rules and guidelines have to be in place than the simple guidelines (or rules) which are usually focused on iPad or Kindle.

We need to create images that:

1. are the smallest width and height dimensions AND
2. the smallest possible filesize AND
3. that deliver the required learning engagement AND
4. are of sufficient presentation quality.

This is a very mutually exclusive processing list! It can be done.

The Design Questions

Here are some of the questions that need to be asked for the preparation of every image as you make the decision on the pixel dimensions of the image and the image processing for optimum file size.

• What is the value of the image in the textbook?
• How is an image to be presented or used in the final book?
• Is the textbook section containing the image a reflowable, scrolling or fixed layout section? Or if  the images are icons do they have to be present in all three layout modes.
• Does the image need to be zoomed?
• Is the image part of a locked interactive widget?
• Is the image used in any interactive context?
• Is the image reusable within this textbook or other textbooks?
• Should an SVG or CSS technique be used in place of the image?

All of this is part of any textbook analysis during the design phase and clear directions need to be given for efficient and effective production to be carried out.

The sort of textbook analysis and design guidelines you generally hear seldom address the issue of file size optimization.

Standard Production Guidelines

Please note these are guidelines not rules or laws. Always use your judgement, common sense and above all your eyeballs!

These are all general cases, but are a starting point. There are more specific guidances in other articles in this Images For K-12 textbooks Unit. There is also additional complementary information in the SVG Primitives articles.

In 2014 it is important that you don't put a knife between SVG and raster images. They can work together in mysterious ways to deliver superior learning products with amazingly small file sizes.

Images set in reflowable pages

This is about general photographic type images. These are the standard IGP:Digital Publisher image import resizing guides.

Landscape max width: 1000 pixels wide

Portrait max height: 850 pixels

If your source image is smaller don't be pressured to take it up in size. Rather work out how to use it at the size available.

Images in fixed layout pages

Landscape max width: The fixed layout page width or an even sub-multiple (for background images).

Portrait max height: The fixed layout page height or an even sub-multiple (for background images).

Create fixed layout images to the exact pixel size required by  the design. See this article on fixed layout page size guidelines. Your images must always be a size match for your page layout. If you have a sizing problem consider using multiple smaller images and CSS background positioning properties to build the final screen.

Scrolling page images

Landscape: the maximum @media page width size. Generally this will be around 1000px.

Portrait: No less than 60% of the maximum@media page width size or 850px high, whichever comes first.

Scrolling pages is an AZARDI reading system only feature and are not part of the IDPF Fixed Layout specification. But they do solve a lot of education content presentation challenges. It becomes particularly easy to use Widget techniques like reveal for large images.

Icons

Two times their base presentation size. Eg: if an icon is 50px wide with text size normal, make it 100px and CSS size it down. This allows it to grow with font sizing options exercised by the device user (if your CSS is right!)

If you are animating or creating dynamic icons consider going up to 250px for small icons and 500px for larger ones.

Make icons larger in proportion to the text than they are in a source print book.

What is the value of an image?

In education content there are probably three simple image value classifications that can be made:

1. Presentation. This consists of the icons and various "book-look" images used to make the book a distinctive product. If it was left out the learning experience would not be reduced, but enjoyment of use, ease of engagement and unique publisher branding may be lessened.
2. Illustration. This is supplementary images such as photos of people, places or things that compliment the content and create a richer learning narrative.
3. Subject Content. These are the core images that are part of the learning narrative and without them the learning objectives will be impaired or destroyed.

How is an image to be presented?

If an image or illustration part of the learning narrative it gets the full design treatment.

If the image an icon it will generally not be a problem if it doesn't resize with the text size up to 2X the start size.

Consider making icons bigger than a proportional text presentation and of course you are ALWAYS going to colorize mono-tonal or bi-tonal icons for a digital text book. This means they will sit well against text sizing from 50% to 200+% of the default text size.

Is the image going to be used as a background image referenced from the CSS? You need to understand if the image will be filling the background and prepare it accordingly.

It the textbook section reflowable, scrolling or fixed layout?

If the user can change the orientation of the viewport and the image is in a flowing single column layout it must be produced for the worst case scenario: Landscape single column. However you have to ensure that portrait images are not going to flow off the page.

If an image is being used for fixed layout pages make the images the size required on the screen, no larger.

Does the image need to be viewed larger?

If an image has content that requires the use of the AZARDI image viewer then it must be created large enough and in a format that clearly presents that information or allows it to be explored without resizing anti-aliasing. The maximum dimension size remains as a multiple of 2,000,000 pixels (2 Million pixels) if iBooks is a target reading system.

We strongly recommend against designing textbook content that depends on the image viewer to be able to explore the details of an image. This can be highly unsatisfactory on smaller screens and may result in a frustrating content engagement experience. Use a dedicated zooming panning widget if at all possible.

Is the image part of a locked interactive widget?

If an image is used in a size locked widget make the image optimized for the locked widget size rather than a generic larger size that is CSS reduced to the widget.

For example if your sliding panel widget is 500px wide and 400px high, make all the images exactly that size. 

Is the image used in any interactive context?

A lot of learning content, especially young-learner content has a lot of repetitive images. The ALL-IN library has modules to address this presentation requirement aggressively. If you need to count n objects, the widgets require the object to only be present once and they do the rest of the work. Take the time to learn how the object layout widgets work.

Is the image reusable in this textbook or other textbooks?

Core learning content is generally highly reusable. Especially basic geometric or illustrative images and general object images.

Keep in mind that there will always be future editions or variants such as study books, exercise books, online learning resources or teacher supporting content. Make sure your images are processed once and ready for use forever.

That means you must break print-book production thinking which is essentially use-once and throw. IGP:Media Manager 2 gives you all the tools to maintain, find and reuse content at any time.

Should an SVG be used in place of the bitmap image?

If it can, an SVG should be used. But sometimes the two concepts can work together in a mysterious way. See our SVG Primitives articles as some "small" inspiration using static raster images and dynamic SVG components to create outstanding content presentation, possibly with interactivity at previously unattainable file package sizes.

   

Posted by Richard Pipe