Skip to main content
\( \newcommand{\lt}{<} \newcommand{\gt}{>} \newcommand{\amp}{&} \)

Section3.6Images

You can include an image via the <image> tag. You can use the @source attribute to provide a filename, likely prefixed by a relative path, that points at an image file. It is your responsibility to locate that file properly relative to your output, and that the file format is compatible. So, for example, suppose your source contained <image source="images/butterflies.jpg" />. Then you would want to have a directory named images below wherever you process your output, or wherever you place your HTML output on a web server. The @width attribute can be used to control the size of the image. Widths are expressed as a percentage of the available width, such as width="60%".

You may want to wrap your image in a <figure> to have it centered, and to have some vertical separation above and below. A <figure> must also have a <caption>, and the figure will be numbered.

If you want to place an anonymous image (no caption, no number), then you must wrap it in a <sidebyside>. Note also that the <sidebyside> tag provides some very flexible options for placing several images (Section 3.15) together, or combining figures with subcaptions.

If you wish to construct technical diagrams, with editable source, and perhaps including the use of macros, PreTeXt provides support for graphics languages like PGF, TikZ, and Asymptote, in addition to using Sage code to describe a plot or image. In most cases output can be obtained as smoothly-scalable SVG images, in addition to other formats like PDF or PNG. Making all this happen is one of the more technical aspects of PreTeXt, so we save the discussion for one of the topics, <<topic-image-languages>>.