How to add picture before a title in HTML exported by OrgMode

Question

I am writing an article in org mode to be exported to HTML for being published on the web. By looking at the documentation, I have not been able to find a way to insert an image before the title of the article.

So for instance, I would like my page to look like this (the black border indicates the computer screen)

How do I do this? Do I add some header information? Currently my header in the org file looks like this.

#+TITLE: Hello World 
#+AUTHOR: A.U.Thor
#+EMAIL:  hello.world@NOSPAM.outlook.com

#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="style.css" />
#+OPTIONS: num:nil

Maybe the solution to this is to use CSS, by specifying that a certain figure element comes before the title? I am not very good at CSS but this is my best guess. Maybe the ORG guys have already developed some native (and easily remembered) syntax for this?

Answer 1

Add file:some-directory/image1.png into #+TITLE:

I use this technique for exporting to HTML and for rendering org-mode pages in GitLab.

e.g.

#+TITLE: file:some-directory/image1.png                    My Long Title Preceded by Many Spaces

which exports to html

<title><img src="some-directory/image1.png" alt="image1.png">                    My Long Title Preceded by Many Spaces</title>

Thanks for asking your question!

---

This answer was validated using:
emacs version: GNU Emacs 25.2.1
org-version: 9.1.2

Answer 2

In addition to the answer of Melioratus which I accepted, I also noticed that I can embed native HTML code in the title via the inline HTML mechanism of org mode.

So for instance, this also works and allows me to add extra attributes like width and height.

#+TITLE:  @@html:<img src="file:///home/pictures/bird.svg" alt="" / width="150px">@@  Hello World

This is more flexible but much cruftier than the neat syntax suggested by Melioratus that should work for most cases.