Have feedback? Can't find your answer in our Help pages?
Image Guidelines - Reflowable
- Supported Image Input Formats
- Image Size and Quality Standards
- Image Dimensions for Responsive Layouts
- Use Color Images
- Photographs Should Be Optimized for High-Resolution Devices
- Use GIF or PNG for Line-Art and Text
- Image and Font Size Requirements for Line-Art and Text
- HTML vs. Images
- Positioning Image Captions
- Controlling Image Aspect Ratio
- Supported SVG Tags and Elements
Kindle devices and reading applications do not support TIFF, multi-frame GIFs, or any image with a transparency.
- KF8 supports GIF, BMP, JPEG, PNG, and Scalable Vector Graphics (SVG) images.
- Enhanced Typesetting supports GIF, JPEG, and PNG. Enhanced Typesetting does not support SVG images, but SVG rasterization is partially supported.
When using images for schemas, charts, tables, maps, or anything that includes text, pay special attention to the legibility of the final image.
Add images to the source using the standard HTML tag. If the image is meaningful to the content, use the alt attribute to provide text that conveys that meaning to customers who use assistive technology. The alt text should be less than 140 characters and should describe the image and its meaning. If the image is decorative and not meaningful to the content, or if the surrounding text on the page provides enough context for the image, set the alt attribute to null with alt ="" so that it can be ignored by assistive technology.
Important: Use RGB as the color profile when saving your files. Kindle does not support sRGB or CMYK.
Image Size and Quality Standards
Images must meet the minimum quality standard of 300 ppi for the intended display size. The minimum standard for a full-page image in a book after allowing for margins, running heads, page numbers, and captions is an image size of 4" x 6". At 300 ppi, this image must be a minimum of 1200 x 1800 pixels. The following terms will define specific use cases and provide examples of how to meet this standard.
- Important/Not Important Images. Images are considered important if they are meaningful to the content. Examples of important images include images with captions, maps, tables, equations, line art, illustrations, and photographs. All important images must meet the minimum 300 ppi standard.
Images are considered not important if they are only for decorative purposes or do not add value to the content. Examples of non-important images include the back covers, fleurons, logos, and social media icons.
- Cover Images. Cover images should always have a full page layout and be at least 1200 pixels in width or 1800 pixels in height.
- Block Images. Amazon recommends using high resolution images and the largest layout available. Amazon measures 300 ppi on a 4" x 6" canonical device (translating to 1200 pixels x 1800 pixels). To calculate the largest possible layout for an image, divide either the pixel width or height of the image by the 4" x 6" screen, i.e., 1200 (width) x 1800 (height). Providing the % width or % height of an image in the image tag is required to calculate how much of the screen the image should occupy. Refer to the following chart for the minimum pixel requirements to meet Amazon's 300 ppi requirement.
Image Layout Width or Height
Minimum Pixel Width Required
Minimum Pixel Height Required
Note: Amazon doesn't recommend laying out important images at less than 40%.
Examples of coding width and/or height for an image:
- Width or height can be provided directly in the image tag (see bold text).
<img src="happy.gif" alt="Happy face" style="width:70%">
- Width or height can be provided in the parent div tag (see bold text).
<img src="image4.png" />
Image Dimensions for Responsive LayoutsAmazon recommends that block and float images be styled using a percentage value for the width style attribute. This will ensure that images always occupy the same percentage of space on the screen irrespective of device resolution. Inline images should be sized in em units so that they scale in relation to the text around them when users adjust the font size of their reading system.
Use Color Images
For the best user experience across Kindle devices and applications, use color images whenever possible and relevant. If an image is a photograph, it should be formatted as a JPEG.
Even in marketplaces where only E-reader devices are currently available, use color images when possible for future compatibility.
Photographs Should Be Optimized for High-Resolution Devices
Photographs should use the JPEG format and be saved at high quality. Photographs should use the highest resolution available within the file size limit.
Photographs of less than 300 x 400 pixels will be scaled based on the device resolution and may become blurry as a result. To display a smaller image provide a larger image and use CSS to shrink to the desired size.
Amazon recommends that images display clearly at 2X magnification across devices. This means that if an image is intended to display at full width on device, its width should be captured at 3200 px (this is twice the width of our highest resolution device, the Kindle Fire HDX 8.9"). Smaller images can be resized accordingly.
If the photographs are in GIF format or are too small, converting them to JPEG or artificially increasing the size does not improve the quality. Go back to the original source to create a JPEG image with sufficient resolution.
Some images, such as historical photographs, may not be available at 300 ppi or greater. In these situations, provide the best image quality possible. Amazon strongly recommends images meet a minimum of 300 ppi. Any images below 72 ppi will cause the book to fail conversion.
Use GIF or PNG for Line-Art and Text
Line-art images are graphics drawn with a limited number of solid colors (such as images drawn by Adobe Illustrator, Microsoft Paint, or Microsoft Power-Point, including black-and-white drawings). Text, graphics, charts, and tables are examples of images that are line-art.
Line-art should be in GIF or PNG format. The JPEG algorithm tries to blend parts of the image together, and blurs the sharp edges of the line-art, causing the image (and any text it contains) to be blurry.
Text appearing in line-art images should be sharp and legible.
Optimize line-art GIFs before submitting them to KindleGen. Resizing or JPEG compression introduces blurriness or unwanted artifacts in line-art images, which is why Amazon insists on GIF or PNG file formats for line-art.
To optimize GIFs and PNGs and make them fit the image size limit, try the following tips:
- Try reducing the number of colors used. This can often be done without altering the quality of the image. Line-art images that appear to be black and white might actually be in color because of certain anti-aliasing algorithms. Here is an example (notice the shades of red and blue around the "A" in the left picture):
- Remove white margins around the image, if any exist. When cropping, consider how the image will look on devices set to white, sepia, mint, and black backgrounds.
- Resize the image, if necessary, but pay close attention to the legibility of text. (see details in the following section, Image and Font Size Requirements for Line-Art and Text).
Image and Font Size Requirements for Line-Art and Text
An image containing text should not be significantly larger than a Kindle screen. The Kindle E-reader devices offer the possibility to rotate an image to use more screen real estate. The Fire tablets and the Kindle for iPhone application allow zooming and panning.
- The MINIMUM size of text is 6 pixels for the height of a lowercase "a." The image itself will need to be larger than 6 pixels in height if there is any extra space above or below the "a." For an image that contains only a single line of text, such as the example below, the image should be at least 45 pixels in height so that it displays proportional to surrounding text content.
HTML vs. Images
Don't render large chunks of text as images. If text can be separated from the surrounding art it should not be an image. Instead, it should be HTML. Text-heavy images can shrink to fit the screen and become unreadable, while an HTML version would be paginated.
Positioning Image Captions
Amazon recommends placing a caption below the related image, so that the reader views the image before the caption. Place the caption in a separate <div> tag so that it displays below the image.
<img src="test.jpg" style="display:block" />
<div>This is a caption</div>
Controlling Image Aspect RatioTo preserve aspect ratio of images, width and height cannot both be set to a fixed percentage. Either width or height can be set to the fixed percentage (such as 100%), but then the other property should be set to "auto" to preserve the aspect ratio.
Supported SVG Tags and Elements
Enhanced Typesetting currently has minimal support for Scalable Vector Graphics (SVG).
- viewBox is mandatory and it must have four values (min x, min y, width, height). All four values must be integers and the first two values must be 0.
- Provide width and height in percentages (preferred) or integers.
- Provide meaningful alternative text with the <alt=> attribute on SVG images where appropriate.
- Block and inline SVGs are supported.
- Always use only <svg:> without namespaces for SVGs.
- <svg> with only one <image> tag as child is supported.
- <img> with .svg in href attribute is supported.
- Background image as .svg is supported. In this use case, Amazon only supports certain elements inside the SVG file: <svg>, <path>, <g>, <polyline>, <polygon>, <rect>, <line>, <circle>, <ellipse>, <radialGradient>, <linearGradient>, <stop>, feGaussianBlur, filter, <defs>, <clipPath>, <use>, title.
- <svg> with <text> is not supported.
- <svg> with preserveAspectRatio="slice" is not supported. If nothing is specified, default is taken automatically.
- If the transform attribute is used, it should include "translate(0 0)". Other complex transform attribute values are not supported.
- If the visibility attribute is used, it must have "visible" as the value. Otherwise, conversion fails.
- Use the <a> tag only within <rect> and with fill-opacity="0.0". The <a> will be removed.
- Open the HTML page with an SVG image in a browser. If it's not visible in the browser, then that SVG image is not supported in Enhanced Typesetting.
- eBooks with more than 25 SVG images are not supported in Enhanced Typesetting.