Published Online April 2023

EPUB Export from InDesign — Image Management
James Gifford

---

EPUB Image Basics

Since EPUB is largely built on HTML/CSS document structure, the details of images for EPUB documents are much the same as images for any web use, but with a number of restrictions.

Image Format

• Image formats in EPUB can be JPEG, PNG or GIF, although the last should rarely if ever be used. Other formats (TIFF, WEBP, etc.) may be used in InDesign and converted in the export, but it is best to stay with these well-established standard formats within the layout to minimize conversion issues. (That is, if you're having trouble with a WEBP or BMP or even PNG image in this process… convert it to JPEG and try again.)
• All images should be RGB or grayscale color format. Avoid CMYK and Indexed Color.
• Image resolution should be at least 144 pixels per expected display inch (the nominal PPI of Kindle and most standalone readers). Smaller images (in pixel dimensions) may be used, but will be greatly reduced in display quality.
  
  Generally speaking, images should have an effective (layout) resolution of 150 PPI for general EPUB use, or 300 PPI to conform to Kindle's quality requirements or when higher-quality images are desired. Multiples of these pixel resolutions will help ensure that exported images are of adequate quality, but don't go overboard with multiples—2X is plenty. Larger images simply take up file space and slow all work and export time.
• InDesign, EPUB and most readers also support SVG images, but there are many issues with getting a successful result from that format. We'll skip the topic here.

Image Layout & Placement

Within InDesign, all images should be placed simply. While it is possible to create a complex layout for print and still successfully export it to EPUB, it is recommended for either EPUB-only or dual-format documents to keep image positioning basic, generally in between paragraphs or other images.

• Most layout in the InDesign document is lost during EPUB export. Unless it's a dual-format doc, use simple, linear layout for EPUB. Don't fuss a lot over things like image positioning, spacing, etc.
• All images in a document intended for EPUB export must be anchored! This is the most basic and common error made in laying out InDesign documents for EPUB. The text must be in one continuous flow (not separate stories and very much not separate text frames), and every image or other insert must be anchored to an appropriate point within that text. Un-anchored images will either fail to appear in the EPUB, or, more commonly, will “fall to the bottom” after all other content.
• Most images should be given their own horizontal space, between others or paragraphs of text. Complex layouts with images beside each other, overlapping or with text wrapping around them should be avoided. Use InDesign's “Jump Object” text wrap setting, with some comfortable amount of top and bottom spacing assigned in the Text Wrap pane. This will most closely resemble the EPUB output.
• Very small images may be placed for text wrap-around, but they should be no more than about one inch across, or one-third of the expected screen display width. Larger images will often create messy or ‘broken’ layouts on smaller or inflexible EPUB readers. Such images can be placed with actual text wrapping around them in the InDesign layout, but for EPUB-only documents, it is still simpler to place these images in their own horizontal space. The actual positioning and wrap is set separately in the export process and is not defined by the ID document's layout.
• Captions should be managed as a following paragraph with appropriate spacing and size, immediately after the image. Do not try to attach, group or combine images and caption text boxes, and do not use InDesign's Caption feature. Everything in a successful image+caption layout lies in a properly exported image followed by a properly formatted paragraph.

EPUB Images: Global Export Settings

Images in an InDesign document can be managed for EPUB export in two ways: via the Object and Conversion Settings menus in the Export dialog, or via individual export settings that override the global ones.

The export menu is global and applies to all images in a document, while the individual settings apply only to the image for which they are set. It is up to the designer to choose one optimized global setting, all individual settings, or a combination in which some number of the document's images are exported using the global settings while a few are managed with overriding individual settings.

In general, the last is to be preferred for simplicity if the first (a single global setting) does not produce optimum results. That is, use one global option if you can, and all individual settings if you must, but try to use global for the bulk of images and specific settings only for those that absolutely need it for best results. Managing more than a few images in a document with individual settings can get confusing.

The global export options, which are a subset of those available in the more comprehensive individual settings, appear on two panes of the Export menu: Object and Conversion Settings.

EPUB Export Options: Object

The Object pane of the Export menu holds most of the settings for global image management. These settings will apply to all images, of all types, except those for which an individual export setting has been defined. (For all of the global options to apply, each image's individual settings must be unchecked or set to “Default.”)

Image Export Mode

The first two checkbox items on this menu represent a very convoluted and opaque system for controlling exactly how images are exported to EPUB. They allow for three export alternatives:

• If neither box is checked, each image in the source document wil be processed according to the settings in the following CSS section and the Conversion Settings menu. (This usually means the image will be rescaled to a particular size and PPI resolution, and perhaps converted to a standardized format.) Only the image itself will be passed forward to the image file embedded in the EPUB result.
• If the Preserve Appearance… box is checked, most complex layout aspects for each image will be preserved from the InDesign document. Borders, drop shadows, text overlays and markers and even effects such as embossing will (usually) be included, and rasterized into the exported image. That is, instead of just the image as it's placed in InDesign, the export file will resemble a screen shot or printed result of all image and layout components. The image will be processed according to the other settings for size and resolution.
• If the Use Existing Image… box is checked, InDesign will ignore all other image processing settings, and pass the original image file through to the exported EPUB. It will not be rescaled, converted or include any of the associated layout information.
• The two checkboxes are exclusive; checking one will uncheck the other.

The individual export option settings manage the features related to these two settings in a more granular, controllable way, although not with any more inherent clarity as to what each setting and option actually does.

CSS Settings

“CSS” is a confusing group heading here, especially as InDesign export maintains quite a distance from direct control of CSS formatting for EPUB export. But these options are, in general, aspects controlled by CSS, so:

• CSS Size — Probably the single most critical setting in the whole spread. This setting determines exactly how InDesign will place and format images, mostly in terms of size and scale. The global menu only offers two options: Fixed and Relative to Text Flow. Both will be described in detail in the Individual Export section below; in a nutshell, Fixed exports a smaller, fixed-size image and Relative… exports a larger image that will scale with the reader display size.
• Layout — This option will align, as much as possible, all images to the Left, Center or Right. My recommendation is to always align images to the center of the reader display. Without text wrap, which is tricky in EPUB, images to one side always look clumsy to me. Your call, though.
• Space Before/After — This setting defines how much space, in pixels, will be inserted before and after each image. I suggest 10 and 10 as a starting point; a setting such as 20 and 5, when following captions are used, may provide better balance. Experiment. You will want at least some spacing in most cases.
• Insert Page Break — If checked, this option will insert a virtual page break after each image. Use selectively; I have not found many cases where I wanted a page break after every image.

All of these options may be overridden at the individual export level, some with more options or scope.

• SVG Options — We're ignoring SVG images in this article. Note that the option grays out, inaccessible, if Preserve Settings is checked. Override settings are available in the individual export options.
• Ignore Object Export Settings — A lead-in to individual export settings. If checked, any individual export settings on any images will be ignored, and the global export options used instead. Useful for A/B testing of complex document layouts.

EPUB Export Options: Conversion Settings

The Conversion Settings pane of the Export menu holds a few important general export options, all of which can be overridden by individual export settings.

If the Use Existing Image… box above is checked, these settings will be ignored and the original image file (size and format) will be passed to the exported EPUB file.

• Format — InDesign offers four image format options for EPUB export: Automatic, JPEG, PNG and GIF.
• Automatic converts all allowable InDesign image types (including JPEG, PNG, TIF, WEBP and BMP) to PNG format. GIF files are not modified.
• Despite this inherent format preference, I strongly recommend always using the JPEG setting, so that all images in the EPUB document are passed through in or converted to that format. It typically produces the smallest image file sizes and allows the most control over image quality.
• Use Automatic, or PNG, only if you are thoroughly familiar with the differences and advantages of each of those two formats. It can preserve detail but at the cost of larger image files and resulting EPUB file size.
• Avoid GIF completely in modern digital documents. Among other things, it is not converted or resampled on export, even if JPEG or PNG is selected, and other than for icon-sized elements, it tends to have comparatively large image file sizes.
• Resolution — There are only two practical resolution options for most EPUB needs. 150 PPI is more than adequate for nearly all readers and document images, and will help reduce file size to a significant degree if the document contains many or large images. 300 PPI should only be used when image quality is paramount, it is verified that the readers in use will actually display a higher-quality image as a result, and/or the final destination is an Amazon Kindle book; Amazon has strict quality standards that mandate 300 PPI images. (A mandate I question, but there you have it.) Any other setting, such as 75 PPI, should be reserved for documents such as reports where image quality is not critical and yet more file size reduction is advantageous.
• JPEG Options/Format Method — Always select Baseline for EPUB export. The Progressive method is an obsolete format from the very early days of the web, when slow net speeds made slowly building an image an appropriate option. It should never be used, for anything, any more.
• JPEG Options/Image Quality — Another tradeoff setting. Medium quality will be more than acceptable on nearly all EPUB readers. Selecting High quality may have advantages for books with large images where extra display quality will be apparent, and can be a way to balance 150 PPI export resolution with somewhat higher end quality. Experiment and compare both visual results and file sizes. (It is always a good thing to reduce EPUB file sizes when possible.) As a rule of thumb, start with Medium; go to High only if the change represents real end improvement; never use Low or Maximum settings. (Low will produce poor quality images; Maximum will do little more than bloat the file size without noticeable image improvement.)

GIF options are irrelevant, since I strongly recommend not using GIF images in EPUBs; there are no selectable PNG options, should you choose to use that format over JPEG.

Again, all these settings will apply to all images in a single EPUB export. That may produce fine results and need no further adjustment, and for simplicity I encourage all designers to work first to this global setting, ringing all necessary changes to get the best results. Move on to individual image export settings only if one or more images refuses to come through as desired, with adequate quality or in a desired layout form.

EPUB Images: Individual Export Settings

Export to EPUB strips away nearly all of the “fancy” layout settings and options that are possible in InDesign documents for print. It is in the often-overlooked individual image export settings menu that designers regain something like the range of layout control that is integral to print layouts.

The individual settings menu for images is quite stealthy. Select the image for which you wish to make settings, right-click on it, and select Object Export Settings. (Note that this process is a bit fussy: it's important to select the image first, or a text frame or other layout element might be selected with the right-click.)

Within that dialog, select the EPUB and HTML tab.

• epub:type — Leave this field empty unless you thoroughly understand its purpose in EPUB structural management. It is rarely necessary in InDesign export.
• Preserve Appearance… — This is an advanced version of the Export Mode checkboxes in the global export options. Its combinations and settings are quite complex, so we'll give it its own section following.
• Custom Layout — This will override the simple ‘left-right-center’ options of the global export menu. We'll cover the details of this below, as well.
• Size — And here we have it, what may be the most important reason to use individual object export options. Let's just jump right into that:

Image Export Sizing

Image sizing in EPUB exports is controlled by a number of factors, not all of which are predictable or under the designer's control. Depending on what export sizing method is selected, the following factors may combine to control the actual display size of the image on a reader screen:

• The size of the image in the InDesign layout, especially its width. (Width is overwhelmingly the controlling size value for many elements of EPUB export and display.)
• The width of the text frame, from left to right margin.
• The size of the document's base font. (Normally, whatever is used for body text, but both the export process and readers are curiously opaque about how the ‘base font’ is selected among many styles. Its size is another extremely influential value in EPUB formatting.)
• The export sizing option (and sometimes values) chosen.
• The individual reader's characteristics, including its effective PPI and actual display PPI. (Most readers assume 144 DPI and display something very close to that value, but many, especially software readers on a variety of systems, can vary some 20% in displaying that “effective inch.”)

That last is the main reason trying to find rigor in this whole image management process is so difficult: besides varying implementations of the same ideas and standards, almost every reader has its own notions of how to render EPUB documents. These variations mean absolute statements about sizing and display are all but impossible.

Interestingly, factors that have nothing to do with the final rendered size of images in EPUB documents include:

• The size of the page in the InDesign layout (width or height). (Only the text frame width really matters.)
• The actual pixel dimensions of the image. While the pixel size of an image and its effective PPI in the InDesign layout and at export sizes determine the image quality, a very small image file can be exported at a much larger display size; the EPUB document will show the image at that size, but it will likely be very blurry. It's up to the designer to make sure the image file itself has enough resolution.

Export Size Options

InDesign has six different image EPUB export size options. Two are available from both the global and individual export menus, with four more only in the individual setup:

• Fixed — Both global and individual export allow this option, which will export the image at a fixed ratio of about two layout inches to one screen inch (of about 144 PPI). In general, it produces small images that do not vary with screen size or orientation.
• Relative to Text Flow — Both global and individual export also allow this option, which scales the image based on a ratio between its layout width and the width of the text flow (from left to right margin). The ratio is proportional, so that a 2-inch image with 6-inch layout margins will be one-third the size of a 2-inch image in 2-inch layout margins. This relationship holds even though the display document margins, set by the reader and usually about 95% of screen width, will be the same for both.
• Relative to Text Size — Individual images can be set to scale using this option, which is relative to the base document font size. The results are peculiarly inverse, though, as EPUB readers tend to scale the base document font size to a nominal 12pt. If the layout document base font is 12pt, the image will be exported in about a 1:1 ratio. If the layout document font is 6pt, the reader will rescale it to 12pt (or so), and double the size of the displayed image. If the document font were 24pt, again the text would be scaled to a nominal 12pt and the image would be displayed at about half size. Yes, that's very confusing, especially as it is not always clear how readers choose which font style is the intended base font. I recommend never using this scaling option; I can't even think of where it would be useful.
• Custom Width — This very sensible individual export option is much like Fixed, but allows you to specify the export width of the image. Export using a fixed value (inches, mm, etc.) tends to be fairly accurate, allowing for reader scaling and display variance. A percentage value can also be used, which will scale it to the reader's margin width — a scaling of 50% will mean the image is usually about half the display width, but readers with variable layouts often impose other ‘virtual page’ and ‘virtual column’ limits that can make the display size less rigid.
• Custom Height — A rare case where height is considered in reflowable EPUB structure, this is the same as Custom Width except that a height value can be specified. A fixed value will usually be honored, within slack, but a percentage value… appears to be relative to the display margin width, a more predictable value in a reader scheme that does not really have page height. (There is only one page in a reflowable EPUB, broken into reader pages only for convenience.) Because of the uncertanties, use this option over Custom Width only when you have very specific reason to do so, and thoroughly test the results.
• None — No, this doesn't mean the image has no size, it means InDesign exports it with no size information attached. As with web browsers and images that are not given specified height and width, the result is likely to be an image as large as the reader can display it, usually limited by the first pair of margins it touches. That is, a wide image will likely be limited by the left and right margins, with space for content above and below; a tall image will be limited by the top and bottom images, leaving space to one side or the other. While the behavior can be unpredictable, this is the size export option to use when you need something like a full-page image. (And no, unfortunately, there is no way to get a truly full-page, full-screen image on most readers.)

Image Scaling Example

The following illustration and chart show how the various export settings affect the image size. In this example, the image itself was laid in at 3 inches in width, and the page content margins were 4.5 inches (6 inches minus margins of 1 and 0.5 inches). The base font size was 12pt. Although it's fairly irrelevant for this exercise, the image itself was 900 x 1200 pixels, with a nominal 300 PPI resolution.

The sample display was done on Kindle Previewer, partly because of my focus on InDesign to Kindle via EPUB, and partly because it gave the most consistent results. Some notes about experiments on other EPUB readers follow, for the curious and strong of heart.

Size	Export Option & Value	Display Width, In.
A	Custom Width: 1 inch	1.0
B	Fixed	1.22
C	Fixed + CSS 2X	1.99
D	Custom Height: 3 inches	2.03
E	Custom Width: 50%	2.39
F	Relative to Text Size	2.57
—	ORIGINAL	3.0
G	Relative to Text Flow	3.17
H	None	4.81 (> margins)

 

This illustration and the numbers that follow are meant to be a concise guide to how each size export option affects the outcome, but it's only fair to note — after the many caveats already — that this a fairly idealized summary based on some light cooking of the results. Besides limiting it to the somewhat off-mainstream Kindle Previewer, the display on my screen was about 10% oversized, so I applied a fudge factor to the measurements based on correcting the 1-inch version (A) to an exact figure. All other measurements are based on that factoring.

But this example is still a clear and relevant example of which size export option does what, out on the reader screen. Most entries should be self-explanatory, but three need some added notes:

• A is corrected to exactly one inch from screen measurements, and used as the factor basis for all the others.
• C uses the Fixed export option, but applies a 2X scaling factor in CSS code simply to show that it can be done, albeit with nonlinear results. This is covered in detail in the published guide, but for those savvy in CSS, it uses transform:scale(2,2); to nominally double the end result. (And while values from 1 to 2 have a linear effect, I have no explanation for the otherwise scaled value from what should be about 2.4 inches.)
• H uses None, which results in an image actually wider than either the document or Kindle margins (4.81 inches, across 4.5 inch margins). None is worth experimenting with, along with other InDesign and CSS formatting, to get truly large-format illustrations into EPUB.

Some Notes on Other EPUB Readers

Just to give some body to the many comments about how variable and unpredictable this process can be, across multiple EPUB readers, here are some results discovered in parallel with the above data using Kindle Previewer.

• Calibre — The Calibre EPUB reader is not a perfect standards-compliant reader, but it's very good in most ways, so I frequently use it to proof EPUB development. But when an image was exported using Text Size, all variations in resulting image size were quashed. It showed the same size image regardless of the base font size. In Text Flow, it showed a similar progressoin of sizes related to varying margin widths, but with a factor of about 1.15 instead of Kindle Previewer's 0.89.
• Thorium — the Thorium EPUB reader is perhaps the most rigidly standards-based app available, but it has a few glitches that keep it from being the perfect proofing tool. In Thorium, though, the Text Size exports remained the same across font variations, as with Calibre... but whereas Calibre sized the image at about 3 inches, Thorium decided it had to be 7.5 inches.
• EPUBreader — a very reliable if basic reader plug-in for Chrome and Firefox, EPUBreader is my go-to tool for fast, repetitive checks of this kind of experimentation. It's not quite reliable enough to be a standard, but it's a fast way to check successive changes without the slow process of having to load it into a library, as with Thorium and Calibre. Anyway, EPUBreader's behavior with Text Size export was variable with the browser window size but not predictable; its behavior with Text Flow was close but not identical to Calibre.

Let me put it this way: the above is a thumbnail view of hundreds of spreadsheet numbers, and is as close as I can come to putting any rigor on the topic. Not one of these four otherwise fairly standard readers gave close, much less identical results on dozens of test files. So keep an open mind and something calming nearby as you experiment away!

Individual Export: Image Format Options

Continuing from above, this block of features under (individual) Object Export Options allow some sophisticated fine-tuning of each image. This is mostly the same as the global options, but can be used to override one or more images (for instance, to print a very large image at a lower net resolution, to save file size). It also has a slightly expanded set of image-handling operations.

• Preserve Appearance… — This is a more complex combination of the two checkbox options in the global export menu:
• Default — Allows the global export setting to control this parameter.
• Use Existing Image… — Passes the original image content and format through to the EPUB, without processing or modification. (Note that the image file is rewritten, with some size change, but the image data is preserved.)
• Rasterize Content — Processes the image more or less independently of any InDesign layout adjustment, and exports the image contents unmodified. This is the default setting for global export. Complex InDesign graphics may export incompletely or with layout faults, and may need the Rasterize Container option instead.
• Rasterize Container — Processes the image to the specified export parameters with all or most InDesign layout elements (cropping, borders, etc.) intact. This is the option to use for grouped graphics, such as photos with marker overlays or type. It turns everything “in the box” into one raster graphic, for simplicity and reliable display.
• Format — As above, I recommend using JPEG for all EPUB images; PNG is an acceptable alternative. Avoid using GIF.
• Resolution — As above, 150 or 300 PPI. This is a place to adjust this global value for one specific to a single illustration: higher for better quality, or lower to save file size.
• Quality — As above, Medium (for most) or High (for select images). Avoid using the other settings.
• Method — As above, always Baseline. Avoid using the obsolete Progressive setting.

The Palette setting is enabled only for GIF; some settings are disabled for PNG.

Individual Export: Custom Layout

Again continuing from above, the features under Custom Layout allow an expanded range of settings controlling how the image is placed and positioned.

If Custom Layout is checked, there are three options for the basic image layout:

• Alignment and Spacing — In somewhat different presentation from the global export menu, this option enables aligning the image to the left, right or center and specification of top and bottom spacing. It is probably best used to adjust a few images from a global setting of these parameters. The option to insert a page break is expanded from the global option's “page break after image” to a choice of before, after or both.
• Float Left / Float Right — These two options do exactly as their name implies: float the image to the left or right margin, and allow text to flow or wrap around the other side. This behavior is independent of any layout settings. (That is, text wrapped in InDesign will normally not wrap in EPUB; text will wrap around a ‘floated’ image even if it bypasses the image in the source layout.)
  
  This implementation makes a little more sense if you are familiar with web page layout. Floating should be used only with relatively small images, ones that will be no more than about one-third screen width. Wider images, even those about half screen width, will often produce very awkward, ugly text wrap and layout. This is an option that gets much more useful, flexible and attractive when combined with CSS formatting adjustments.

---

 

And yes, the differing terminology and functions between the global and individual menus annoys me, too. They seem to have been developed by different UI teams, and really need some cleanup of the terms, grouping and feature sets. Combining InDesign-level concepts and options with more “raw” ones, and CSS notions, as done in various mixes here, is what makes these powerful features harder to understand and use than they should be.

But now, it can be hoped, you're a lot more up to speed on how to manage images in EPUB export!

---