The problem with placing images for a print document rears its ugly head when it comes time to export the document as HTML. Two main issues need to be considered.

1. The image is within its own free-standing container. In this instance its position within the HTML is dictated by its physical position on the page (in top-to-bottom, left-to-right order) or by its position within the Articles panel.

2. The image will be part of a text flow. The image position is dictated by its anchor location in the text.

FreeStanding CotainerThis is the method used most commonly for placing an image on the page. The user creates a container, chooses Place from the File menu and navigates to the image file. The image container can then be dragged to any position on the page and will cause text below it to wrap if assigned an appropriate text wrap mode. Where this image will appear on the page when exported to HTML is determined by the Content Order selected in the General pane of the HTML Export Options dialog.

Anchored Container– The image is anchored to the text and flows with the text.

Note: All discussions involving the HTML Export Options dialog assume Settings Apply to Anchored Objects is selected in the Image panel.

HTML DOCUMENT EXPORT OPTIONS

Based on Page Layout – If an image is placed vertically between non-linked text frames, the image in the HTML export will end up, as expected, between the two text flows. On the other hand, if the text frames are linked, or the image superimposes a text frame with its top coordinate below that of the text frame, the image will end up below the text flow. 

Same as Articles Panel – The Articles panel gives designers the option of assigning names and placement order to all page elements. With Same as Articles Panel selected, any page element not included in the Articles panel will not be exported to the HTML. The is the best way to filter out page elements that you do not want to be exported.

Same as XML Structure – If you used XML to build your page, the XML structure is honored when using this option. 

ANCHORED CONTAINERS

When you want an image to be part of a text flow, inline or between paragraphs, you must anchor the image within the text. How the image is anchored makes a big difference in how the HTML is structured. 

Inline or Above Line Position – If anchored inline, the image becomes part of a span tag inside of the paragraph tag for its associated paragraph.

<p class="Text"><span><img class="frame-1" src=[link here] alt=[filename here] /></span>
Text here.</p>

This is because InDesign treats each inline frame as a single text character. As part of the text, it inherits the same indents and leading as its associated paragraph. Alignment and Spacing options selected for the Image in HTML Export Options are simply ignored.

Custom Position – If a placed image is anchored using Custom for the Position option, the HTML output gives the image its own div inside the div for the text flow. 

<div class="Basic-Text-Frame">
	<div class="frame-2">
	<img class="frame-1" src=[link here] alt=[filename here] />
	</div>
</div>

Notice that the styling for this anchored image is targeted to two CSS styles: the div as well as an img class. It may be well to note that all anchored images not overridden with Object Export Option settings will share the same div selector. Also, images having the same height and width (or width percentage) will share the same image class selector. 

img.frame-1 {
	height:108px;
	width:72px;
}
div.frame-2 {
	margin:6px auto 0px auto;
	text-align:center;
}

Note the use of the auto margin setting above. This adds any remaining horizontal space to the margin. When both the right and left are set to auto, the remaining space is divided equally between the two margins. Remember that when using four values for margin, they are in clockwise order starting from top (top, right, bottom, left).

IMAGE EXPORT OPTIONS

Fixed Size – The CSS created for anchored objects (inline or custom) is determined by the Image Size option chosen as part of the export. If Fixed is selected for Image Size, the height and width of the original image is used. 

img.frame-1 {
	height:108px;
	width:72px;
}

Relative to Page – If selected, the size of an anchored image is expressed as a percentage of the original image to its parent. For this reason, the CSS width value for an image anchored using Custom may yield a smaller percentage size than a corresponding inline image.

img.frame-1 {
	width:11%;
}

Preserve Appearance from Layout – The Option to Preserve Appearance from Layout affects anchored images with Custom positioning. With this option checked, the exported image retains the same crop as its original. Without this option, the entire original image will fit within the constraint set by Image Size (Fixed or Relative to Page). If the image is resized or cropped disproportionate to the original, the end result will be an anamorphic (distorted) image. 

ANCHORED IMAGE ISSUES

As of version CS5.5, InDesign provides users an easy way to anchor a placed image. A small blue anchor box (anchor indicator) becomes part of the image’s container when selected. Dragging this icon to a position within the text automatically anchors the image to the text. When anchored, the icon changes to a small anchor. By default, the image is anchored using custom positioning. If you hold down the shift key while dragging the icon, the image is anchored inline. Add the Option key (with or without the shift key) to automatically open the Anchored Object Options dialog while establishing the anchor.

When the anchor indicator is placed inline (shift key held down), the image moves from its original position on the page to the inline position. When the anchor indicator is placed as custom (without the shift key), the image retains its original position on the page but assumes its anchored position when the page is exported to HTML. If you want your print document to have images in one location (possibly at the bottom or in a sidebar of the page) but placed within the HTML text flow, use Custom positioning. This works great when the image is placed outside of the text flow, but raises an issue if physically placed inside as with a text wrap.

Custom Positioning With Text Wrap – The minute you custom position an anchored image with text wrap over a text frame, strange things happen: The first line of text drops behind (or over) the image. This does not affect how the HTML is exported. On the other hand, if you want to use the same document for other output , this will not be what you want. The answer is to anchor the image to an empty paragraph above the target paragraph and use Custom positioning with a negative Y Offset value. Additionally, if the empty paragraph is styled with a different paragraph style, this style can be used to control first line spacing, justification, and leading for the image. This way you can have the best of both worlds.