In general, ePublisher automatically transforms images from your source document to an optimized version for online distribution. However, if necessary, you can manually modify individual images or groups of images by applying a graphic style to the specific image or images you want to control. For example, you can define how images are resized, the maximum height and width for images, and the format for those images.

ePublisher supports several image formats and rasterizes all other formats:

You can use passthrough conditions and coding to include any type of file within your final output, such as Flash .swf files. For example, you can create a paragraph style in your source documents that is not included in the print version of your documentation. You can apply a condition to this paragraph that has the passthrough setting selected in ePublisher. Then, this paragraph can provide the exact coding to include in your output. Be sure to include any referenced files in your Files folder of your project so ePublisher copies those files to your output location.

If ePublisher cannot use an original image in the output, or if ePublisher determines it needs to modify the image based on how it is included in the source document, ePublisher rasterizes the image using the options you define for your graphic styles in Style Designer. For example, you can define the dots per inch (DPI) and format for the final images. Rasterization of an image can cause the image to be blurry or distorted in the output.

For more information and specific considerations about your images, see Image Formats and Considerations in FrameMaker and Image Styles and Considerations in Word.

The Prototype style is the parent to all other styles. When you set a property for the Prototype graphic style, other styles inherit the value of that property. The Prototype graphic style allows you to quickly change a default property and apply that change to all graphic styles within your Stationery project.

All images are, by default, set to the Prototype style. If you need to modify any image properties, you can do so through the Prototype style. However, if you want to control a smaller set of images, even just one image, you need to assign a unique graphic style to those images.

Borders are lines that can be drawn around any or all of the four sides of an image. In terms of the CSS box model, increasing the padding for a graphic style increases the space between the image and the border.

Not all browsers display border styles the same way. For example, some browsers may not differentiate dotted lines from solid lines. The size and spacing of the dots in a dotted line may also be different between various browsers and operating systems.

ePublisher automatically transforms images in your source document into Web-ready formats. However, the size of your print image may not be appropriate for online delivery. ePublisher provides several ways to modify the size of your images for online delivery without affecting the original images.

If you know the exact dimensions you want to assign to an image, you can use the height and width properties of a graphic style. However, you are defining the dimensions of all images that use that graphic style. Unless you want all your images to be the same size, such as 150 pixels high and 275 pixels wide, this option is not the most effective way to modify the size of your images. For most situations, it is more efficient to define the maximum height and width for an image as opposed to assigning a fixed height and width. For more information, see Setting the Maximum Width and Height for Images and Modifying Image Size by Scale.

In most cases, you probably want to leave your images positioned as they are in your source documents. To visually enhance the layout and presentation of your online images, ePublisher allows you to set the position of any image according to CSS rules.

You can adjust the white space around images by adjusting the margin and the padding. In terms of the CSS box model, modifying the padding property adjusts the space inside the border area. For example, if you create a border or background color for an image and you increase the size of the padding, the border moves away from the image.

Modifying the margin properties adjusts the space outside the border area. For example, if you create a border or background color for an image and you increase the size of the margins around the image, the border remains the same distance from the image. However, the position of the image changes since there is more white space between the modified image and other elements on the page.

ePublisher allows you to automatically reduce the size of images in your online content to thumbnails, which are reduced versions of your images. Users can view the full-sized image by clicking on the thumbnail. If you set the width and height values for thumbnails, ePublisher automatically creates the thumbnails you need and links them to the full-sized images. If you do not set a width and height for thumbnails, ePublisher inserts the image itself in your output and does not use thumbnails.

Most images in your content vary in width and height. For your online content, you need to ensure that all your images fit within the display area. In most cases, you have a maximum width or height constraint. For example, although some of your images may only be 250 pixels wide, you want to make sure that none of your images are wider than 275 pixels.

ePublisher allows you to set maximum width and height values for the size of your images. By modifying the size of your images in this way, you ensure that the resized images retain their original aspect ratio.

If you are not concerned with actual width and height of an image, you can specify a scaling percentage to apply to all images with the selected graphic style. This option allows you to modify the size of all images associated with the graphic style in relation to their original sizes. Modifying images in this way retains the original aspect ratio of each image.

If the resolution of the images in your source documents is set for print, such as a resolution of 300 dots per inch (dpi) or higher, you may want to reduce the image resolution for online delivery. High dpi images create larger files that require more time to download. In addition, most monitors display a resolution of 96 dpi, so higher resolutions do not increase the quality of the image displayed online.

Although transforming an image from 300 dpi to 96 dpi helps optimize your images for online delivery, the width and height of your images is also affected. Because a resolution of 300 dpi contains more dots per inch than a resolution of 96 dpi, when ePublisher transforms the image, the image will be roughly 68% smaller than the original image. For example, a 300 dpi image that is 100 x 100 pixels will be 32 x 32 pixels when transformed to a 96 dpi image.

To counter this effect, use the Scale % option in conjunction with the Render DPI option to control the size of your images. In the example of transforming a 300 dpi image to 96 dpi, set the Scale % option to 312, which then generates an image that has roughly the same dimensions as the original source image. You can also use the Scale % and Render DPI options together with the Maximum image height and Maximum image width options to make sure your images are correctly sized for online delivery.

The range of colors available through digital computer images is usually expressed in terms of bit depth. This expression refers to the number of bits of data carrying the color information. Common bit depth levels for images include 8-bit and 24-bit color. In general, more bits of data make more colors available. The Color bit depth option applies only to .gif and .png images. .jpg images always generate 32-bit images.

By default, if ePublisher needs to rasterize an image, it transforms the image in your source documents, regardless of what file format it is, to a Web-ready .jpg image. In some instances, you may want to use other image formats for online delivery. For example, .gif images can produce similar quality images as .jpg, but the file size is smaller. .gif images can also support transparent colors. You can also create .png images, which combine some of the better qualities of both .jpg and .gif.

If you select JPG in the Format options for a graphic style, you can specify the quality of the images. The quality level impacts both the visual aspects of your images and the size of the generated files. Higher-quality images require larger files, which require more time to download and display. The JPG Quality option does not affect .gif or .png images.

ePublisher allows you to transform your original color images into grayscale versions for online viewing. If you enable the Grayscale option, ePublisher removes the color saturation of the original images when those images are transformed with your online content. ePublisher displays the color versions of your images in the preview pane to generate the preview more quickly.

In some images, you may want to set a color to transparent. For example, if your source document has a white background, images with a white background appear as though they do not have a background. However, if your online content has a different color background, the background of these images appear as white areas. You can enable the transparency option in ePublisher to transform the white background into a transparent one. Only .gif and .png images support transparent colors.