Integrating image files [i] [j]

Images have been of great importance in our culture and communication for thousands of years. They serve various purposes such as to preserve views of the world around us, as a form of artistic expression and to illustrate ideas. Of course you can integrate images into a webpage made with Aneamal, too.

How to

Start a block with an [i] or [j] file token to integrate an image into your webpage:

[i]
Your image is integrated into the webpage unaltered with this file token. It is recommended for vector graphics, efficiently encoded diagrams, small images, animated GIFs and files that must not be reprocessed for technical reasons or due to licensing terms. Image files hosted remotely can only be linked with this file token.
[j]
A resized preview of your image is generated automatically, if you use this file token. The preview gets integrated into the webpage and links to your original image file. This is recommended for big raster graphics like photographs and scans of paintings. Generating previews takes a little time during the first page load. But they are saved on the server and delivered quickly from then on, making your page load fast and saving bandwidth. The preview dimensions can be changed in a pixels metadata declaration.

Images are linked files, so the file token of your choice must be followed by a link arrow -> and the address of the image file. See the examples below.

An optional second link after the first one sends readers of your webpage who click on your image to the latter address. You can also attach a hint to the address.

Mind that some visitors of your webpage can not see your images, for example due to a visual impairment or because your visitor is just a text-processing computer program such as a search engine’s crawler. So there is almost always a good reason to provide a description for meaningful images in your page.

A caption can be placed below the image for everyone to read. But you can also add text that is only served to those who do not see the image, called a clue in Aneamal. It is added after a colon inside the file token. Make clues expressive, but keep them short. Do not use a thousand words to summarize an image.

Examples

The first example integrates a TV test pattern file directly. The [i] file token was chosen so that no resized preview is generated automatically. This is important here, because the exact position of lines and unaltered contrasts are crucial to evaluate a screen with this test pattern:

[i:color TV test pattern]->/stuff/PM5544.png
television test pattern

The second example integrates a vector graphics file. Imagine this image to be purely decorative without relevance for the content discussed in the text. Such images do not need to be explained, not even mentioned to visually impaired users. Therefore its clue is not just missing, but explicitly empty:

[i:]->/stuff/pentagram.svg

The third example links to a photo with the [j] file token. The image has both a clue and a caption. The two descriptions complement each other: the clue describes the visual content of the image for those who can not see while the caption adds context that is helpful for sighted and blind readers alike.

[j:A dark dog on a leash]->/stuff/cave-canem.jpg
Floor mosaic from ancient Pompeii
A dark dog on a leash
Floor mosaic from ancient Pompeii

A click on the preview in the previous example leads to the full-size photo. This is different in the following example with its two links. The first link points to the image file from which the preview gets generated automatically and the second link points to where a click on the image shall lead:

[j]->/stuff/M17.jpg->https://www.eso.org/public/images/eso1201a/
Detail of the Omega Nebula
=-Image by ESO, CC BY 4.0-=
Detail of the Omega Nebula
Image by ESO, CC BY 4.0

For developers

When Aneamal is turned into a webpage, image files are integrated with an HTML img element with a src attribute that contains the address of the generated preview image for images integrated with [j] and the address of the original image for images integrated with [i]. The clue is added in an alt attribute, if available. The Aneamal Translator also tries to determine the width and height of the image file in pixels and adds respective attributes to the HTML img element, if it can.

Images are always wrapped in an HTML figure element. The first example is translated as follows:

<figure>
<img src='/stuff/PM5544.png' width='768' height='576' alt='color TV test pattern'>
</figure>

The HTML img element may be wrapped in an HTML a element that creates a hyperlink to the original image or another given destination. An optional caption is turned into a figcaption element inside the figure element. The third and fourth examples become:

<figure>
<a href='/stuff/cave-canem.jpg'><img src='/aneamal/public/jpeg/c8/3270a83dbb901d58c8ebd98006c58.jpg' width='640' height='640' alt='A dark dog on a leash' loading='lazy'></a>
<figcaption>Floor mosaic from ancient Pompeii</figcaption>
</figure>
<figure>
<a href='https://www.eso.org/public/images/eso1201a/'><img src='/aneamal/public/jpeg/1d/9074be5fb3e79423b83dd01b6912a.jpg' width='621' height='640' loading='lazy'></a>
<figcaption>Detail of the Omega Nebula<br><small>Image by ESO, CC BY 4.0</small></figcaption>
</figure>

Further reading