How to insert images almost anywhere

In Datawrapper, you can use HTML to insert images to footnotes, titles, descriptions (with the <b> tag and a background url) and to tooltips (with the <img> tag).  If you use images that you haven't created and are not under an open license, make sure to attribute the photographer.

Insert images to tooltips

To add images to tooltips, we use the HTML <img> tag. Copy and paste the following code to the tooltip text field. Make sure to replace the image address and keep  <strong>width="100%"</strong>. This will make the image as wide as the tooltip allows. (Otherwise, your image becomes super big; bigger than the tooltip):

<img src="https://upload.wikimedia.org/wikipedia/commons/c/cb/Amsterdam_%28NL%29%2C_Anne-Frank-Huis_--_2015_--_7185.jpg" width="100%">

If you’ve never seen this before, here’s a short explanation:  <img> is an individual element in HTML. It shouts out to everyone who wants to hear it (e.g. your browser) that we want to use an image. In   this   <img>   element  , we define two things: The source of the image –src– and the width of the image –width. 

The source has to be an address. That could be an address of vacation pics on your computer. But then only you could see   them, s ince only you can access the images on your computer. That’s not terribly convenient. So when creating a tooltip, link to an image that already exist on the web. For example, you can use the image search machine pxhere  ,  since all of their images are under a license that doesn’t require you to attribute the photographer. 

Insert images to footnotes, titles, and descriptions

To insert images e.g. in the footnotes we can't directly use the <img> tag. Instead, we use the <b> tag and give it a background image: 

<b style="float:left; margin: 5px; width: 50px; height: 30px; background: url(https://media.giphy.com/media/sIIhZliB2McAo/giphy.gif); background-size: 50px 30px;"></b>