Smart Image Exporting from InDesign to HTML and EPUB

The standard image format when exporting HTML or EPUB from InDesign is PNG because the PNG file format supports transparency (and more colors than a GIF).

The Problem

In some cases (e.g., photographic images), PNG can produce larger files, especially if you choose the High Definition (HD) option when exporting from the in5 dialog.

So, what if you know your images don’t have transparency and you want them to be HD…but you also want to try and keep the file sizes smaller?

In that case, you can use the Object Export Options (found in the Object menu of InDesign) to add custom settings to any given image. Great so far.

But now, what if you have a lot of images? It can take a long time to open the Object Export Options for each one, navigate to the EPUB and HTML tab, and select from the drop down menus.

The Solution

You can create an Object Style (Window > Styles) that only applies Export Options. And you can even narrow that to just the image type and quality.

Note how every checkbox for attributes in the image below has a minus sign (-), except the EPUB and HTML options. This means the style will let the object itself control those “pass through” settings. So only the image export settings are applied.

hd_jpg_object_class

Now you can simply select the images in your layout that you’d like to render as HD JPEGs (or any other type that you’d like to create an Object Style for), and it’s one click to apply the Object Style.

If you’re targeting an EPUB, you’re set to export. If you’re exporting HTML5 with in5, just make sure you choose Use Object Export Settings from the Advanced section of the in5 dialog.

in5_image_object_export

Here’s an IDML file with the style already created that can you can use to import the style into your own documents.

Get updates from Ajar Productions

Sign up today and get the InDesign Split Text premium extension for free!

Unsubscribe at any time. Powered by ConvertKit

Join the Conversation

  1. Tom says:

    This is a very helpful tip, Justin, thanks! I’m curious as to why vector images are rasterized and why they can’t be exported as SVG? There must be a good reason as both in5 and Publish Online do this, but I can’t figure it out since SVG is pretty universal.

  2. Warren says:

    Very helpful article Justin. Thank you.

    Agree with Tom – that SVG would be a sweet option to have. Press Ready and print defualt PDFs generate / use the vector as is from the Indesign layout… wondering if In5 can. SVGs for most cases (not complex grads etc.) are more efficient in file size and offer transparent backgrounds over PNG.

    1. Justin says:

      Glad to hear it, Warren. 🙂

      in5 can export text fields as SVG, but the InDesign Object Export Options do not include SVG as an option.

      InDesign used to have a native export to SVG option (CS4, I think), but it was removed. If it were reintroduced, we could all take advantage of it.

      Since in5 already has some SVG capabilities, even if InDesign doesn’t add it, I might consider expanding in5’s SVG options. However, until InDesign adds that option to the Object Export Settings, it can’t be used with the technique in this article.

Leave a comment

Your email address will not be published. Required fields are marked *