How to insert images almost anywhere
⚠️ Are you seeing a broken image icon?
Image links should be publicly accessible and served over HTTPS (and not HTTP)*. Also, if you use images that you haven't created and are not under an open license, make sure to attribute the photographer/creator.
*Datawrapper visualizations are loaded over a secure HTTPS connection. Some browsers like Chrome blocks mixed content (insecure http:// subresources on https:// pages). To make sure your inserted image is displayed in all browsers, check that your content uses a secure HTTPS connection.
- Insert images to tooltips
- Insert images in tables
- Insert images to footnotes, titles, and descriptions
- Insert images in the iframe as background
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:
<img src="https://upload.wikimedia.org/wikipedia/commons/c/cb/Amsterdam_%28NL%29%2C_Anne-Frank-Huis_--_2015_--_7185.jpg" width="100%">
Replace the image address link with the URL for your image. Make sure to 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):
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
src– and the width of the image –
The source has to be an address. This could be an address of vacation pics on your computer. But then only you can see
Insert images in tables
To add images in Datawrapper tables, you cannot use HTML <img> tags. Instead, you can use markdown image link to do the same thing. Enter an
! followed by alt text (optional) wrapped in
() and image URL wrapped in
, like so:
Here's an example.
![Anne Frank's House](https://upload.wikimedia.org/wikipedia/commons/c/cb/Amsterdam_%28NL%29%2C_Anne-Frank-Huis_--_2015_--_7185.jpg)
Then, make sure that
- your URL starts with HTTPS and not HTTP
- your URL is publicly accessibly online
Parse markdown option is selected (image below)
Changing the image size
Markdown doesn't allow you to set a specific size, so to increase the size of the image, increase the font-size of the column from Step 3: Visualize:
Or, you could also wrap it in an HTML tag <span> and give it some style:
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>
Insert images in the iframe as background
There are a few things you can do to customize your iframe.
For example, you can change the background color of the visualization by adding a background-color to the style attribute in the embed code.
You can even set a custom background to the visualization by adding an image url in the iframe code:
<iframe title="Share of individuals using the internet, 2015" aria-label="Map" id="datawrapper-chart-TNscZ" src="https://datawrapper.dwcdn.net/TNscZ/4/" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none; background-image: url('https://images.unsplash.com/photo-1563291074-2bf8677ac0e5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=702&q=80');" height="510"></iframe>
image credit: Annie Spratt