Home  Beta programs 
  Welcome to Mobipocket Developer Center
powered by FreeFind

Creating Content

Getting Started
What is the Mobipocket file formatHow do I create a Mobipocket eBookStandard eBooksAdvanced eBooks
eBook features
Cross-platform feature supportImage supportTable supportCover PageParagraph rendering and hyphenationHyperlinksGuide itemsFramesIndexes and DictionariesSectionsAuthoring tips
Extended eBook features
DatabasesSQL queriesJavascriptHTML forms
Reference
Open-eBook HTML tagsSupported HTML entitiesHTML form tagsMobipocket custom tagsOPF x-metadata tagsMobipocket URLsMobipocket Document Object Model (DOM)Mobipocket Active Server Pages (ASP)Mobipocket Active Data Objects (ADO)Mobipocket Javascript Objects
Medical
Drug interaction module
Advanced topics
Setting margins
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.

align attribute effect
top Place the top of the image at the top of the current line
texttop Place the top the image at the top of the text in the current line
absmiddle Vertically center the image in the current line
middle Vertically center the image in the middle of the text of the current line
absbottom Place the bottom of the image at the bottom of the current line
bottom Place the bottom of the image on the baseline of the text in the current line
baseline Place the bottom of the image on the baseline of the text in the current line
left Not supported
right Not supported

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.

attribute screen smallest size (width or height) example devices
losrc <= 239 pixels Low rez 160x160 Palm devices (PalmVx, Treo 600, Zire)
Smartphones (Nokia 3650, Sony Ericson P800/900, Microsoft smartphones)
src >= 240 pixels (handhelds) Pocket PC, Hi rez Palm devices (Sony Clie, Tungsten, Zire 71)
hirsc >=480 Desktop PC, UMPC

Example:

<img hisrc="button_for480x640.gif" src="button_for220x300.gif" losrc="button_for140x140.gif"/>

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.

Copyright 2000-2007 Mobipocket.com