Home | Hide TOC | Add to Favorites

updated: 2008-04-25

---

Contents

---

Image support and display
Image alignment
Adapting images to various screen resolutions
Cover pages
Image quality guidelines
  RULE #1: high-resolution JPEGs for photos (600x800 pixels and above)
  RULE #2: avoid rendering text blocks as images
  RULE #3: carefult about the quality of text in images
  RULE #4: hard limit on the size of a text block rendered as an image (500x600 pixels max, text size, i.e. height of an "a" 6 pixels min)

---

Image support and display

Reading devices can adapt images to the display size and color depth of a specific device. The ebook designer should only strive to provide the highest-quality images for his books, and let the Mobipocket Reader display them optimally on each device.

For large images, The Mobipocket Reader includes an image viewer that lets users scroll and zoom the image and benefit from its full resolution.

Mobipocket Creator will automatically resize / recompress images that take too much space so you do not have to worry about over-burdening your book with high-resolution pictures. The limit is 63KB (63x1024 bytes). Images above that size are resized or recompressed. With the JPEG format, this lets you use images of 600x800 pixels and above. If you need to finely control the resizing / recompressing of your pictures, use an image editing software to bring the size of the image below 63K in GIF or JPEG format before using it in your publication. It will be stored in the book without any modification.

Mobipocket Reader does not support vector graphics. You will have to convert your vector graphics into raster graphics (GIF).

To add an image in the flow of the HTML, simply use the standard HTML syntax : 

<img src="myimage.gif" />

align, border, width and height attributes are all supported. width & height attributes can be used to implement a "thumbnail" version of an image. However, contrary to web rowser rendering, specifying an width / height larger than the actual image will not have any effect (images are not scaled up).

When the user clicks on a picture that has been resized to fit the screen, the picture opens in the Image Viewer. If you create an HTML hyperlink pointing to the image file directly the image viewer will be launched by clicking on the hyperlink.

Image alignment

The align attribute can be used on image to specify its vertical alignment in the current line or relatively to the text of the line.

Baseline and bottom produce the same result.

Example:

Adapting images to various screen resolutions

The IMG tag in Mobipocket publications supports up to three source attributes for various resolutions: src, losrc and hisrc. This makes it possible to optimize the same ebook for various devices. The image to be displayed is dynamically selected by the Reader according to the resolution of the screen on the actual device. This feature is useful for bullets or icons and also for words rendered as images. It is of no use for photographs because the Mobipocket Reader can already scale them correctly to the screen size.

Example:

Cover Pages

A cover should NOT be an HTML page with an image in it. The Mobipocket file format can store an image as the logical cover of a book. Please read the Cover Page article for more information.

Image quality guidelines

RULE #1: For photo-like images: use color images in JPEG format with a maximum of resolution (800x600 pixels and beyond). Here is an example of a photograph that can appear in an ebook (size: 960x669 pixels, 62KB)

RULE #2: try to avoid images with text inside as much as possible. Render framed paragraphs in HTML, not as images. Reformat very large tables to make them reflowable. Read the Table support article for more tips on how to handle large tables and complex layout. Here is an example of what should definitely NOT be rendered as an image. Use HTML for this type of layout:

RULE #3: if you have to produce images with text inside (graphics, mathematical equations, tables), make sure they are of good quality. Text in images tends to degrade very quickly when an image is resized and/or compressed. Use the GIF format for images with text because JPEG compression introduces compression artifacts. Decrease the color depth of your GIFs to achieve better compression and get the file size below the 63KB limit, otherwise Mobipocket Creator will recompress the image and the result, on a text image, will be a loss of quality. Here are a few examples of good and bad text-based images.

The original table in HTML (the best) Fruit #/week Sales Remarks Sales Apple 4 $ 250,000 Sold well $ 250,000 Peach 2 $ 150,000 $ 150,000 Banana 5 $ 670,000 $ 670,000 Pear 3 $ 560,000 Need more marketing $ 560,000 Plum 2 $ 432,000 $ 432,000 Walnut 1 $ 35,000 $ 35,000 Pineapple 15 $14,000 Prospective sales $14,000 Grapefruit 5 $1,345,000 $1,345,000 Hazelnut 3 $ 25,000 $ 25,000 Total 16 $3,679,000   $3,679,000

Text content rendered as a perfect image (GIF format, size 8KB, 317x233 pixels). Use GIF for text-based images. Use JPEG for photographs.

Text content rendered as a JPEG image (size 16KB, 317x233 pixels): legible but blurry because of JPEG compression. GIF is better.

BAD quality: image is blurry because of resizing and JPEG compression. The text is not legible.

RULE #4: An image with text in it should not be significantly larger than a screen. User experience degrades rapidly when the user has to scroll through a large image to read the text in it. The rule is that a picture with text inside should NOT be larger than 500x600 pixels and should not contain text with a body size (height of an “a”) of less than 6 pixels. This effectively limits the size of tables rendered as pictures. Larger tables should be reformatted. See the Table support article for more information.

Here is an image with text at the maximum allowed size for this kind of image (500x600 pixels). Text body size (height of an "a") is 7 pixels in this image.