13.9.9 Images in HTML export

The HTML export back-end has features to convert Org image links to HTML inline images and HTML clickable image links.

When the link in the Org file has no description, the HTML export back-end by default in-lines that image. For example: ‘[[file:myimg.jpg]]’ is in-lined, while ‘[[file:myimg.jpg][the image]]’ links to the text, ‘the image’. For more details, see the variable org-html-inline-images.

On the other hand, if the description part of the Org link is itself another link, such as ‘file:’ or ‘http:’ URL pointing to an image, the HTML export back-end in-lines this image and links to the main image. This Org syntax enables the back-end to link low-resolution thumbnail to the high-resolution version of the image, as shown in this example:

[[file:highres.jpg][file:thumb.jpg]]

To change attributes of in-lined images, use ‘#+ATTR_HTML’ lines in the Org file. This example shows realignment to right, and adds alt and title attributes in support of text viewers and modern web accessibility standards.

#+CAPTION: A black cat stalking a spider
#+ATTR_HTML: :alt cat/spider image :title Action! :align right
[[./img/a.jpg]]

The HTML export back-end copies the ‘http’ links from the Org file as-is.