Next / Previous / Contents / Shipman's homepage

11. Including graphic images

You can easily include images in a DocBook document. However, you may have to produce two different versions of some images so that they will look decent in both print and Web presentation.

11.1. Formal and informal figures

A formal figure is a graphic image presented with a title. For example, suppose your document's start page URL is “http://example.com/joy/index.html”. You scan a photo and call the result lanai.jpg. Here is how you would include that photo as a formal figure:

<figure>
  <title>Lanai from the air</title>
  <mediaobject>
    <imageobject>
      <imagedata fileref='http://example.com/joy/lanai.jpg'/>
    </imageobject>
  </mediaobject>
</figure>

Warning

References to relative path names in the fileref attribute will not work in the HTML rendering. There are two ways to make them work correctly.

  • You can add an xml:base attribute to your root article element. For the value of this attribute, use a URL that refers to the directory where your HTML rendering lives.

    For example, if your document's pages are all relative to the URL “http://example.com/joy/”, you would add this attribute to your root article element:

        xml:base='http://example.com/joy/'
    

    Once you have done this, any relative path names that occur in fileref attributes will work properly.

  • You may instead use an absolute URL as the fileref attribute. An absolute URL is one that starts with “http://...”.

An informal figure is just a figure without the title. To present the same graphic as an informal figure:

<informalfigure>
  <mediaobject>
    <imageobject>
      <imagedata fileref='http://example.com/joy/lanai.jpg'/>
    </imageobject>
  </mediaobject>
</informalfigure>

If you want to change the displayed size of the image, add an attributes scale='P' to the imagedata element, where P is the percentage size, e.g., 33 for one-third size.

Here is an example of a 500x100-pixel panel from Pokey the Penguin shown first at half size (scale='50'), then at one-quarter size (scale='25').