DataURI

Instead of referring to an image included in an add-on, an image path may also contain the image directly as a Data URI (wikipedia). This can be useful for add-on icons in the PblWML (which may otherwise only contain core images) or for single-file scenarios.

Beyond these cases, Data URIs are less useful, as they are larger than the images themselves, and clutter up the files that include them.

Format

A Data URI appears as follows: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==

It can be split into the following sections: data image/png;base64 iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==

Schema

The data: part specifies that this is a Data URI.

Mime type

The image/png part specifies that this is a PNG image. Also supported is image/jpeg.

base64

Technically part of the mime type, this specifies that the image data is encoded using Base64.

Data

The random-looking characters following the comma are the actual image data.

Creating a Data URI

Wesnoth does not yet support generating a Data URI for you, but there are alternatives.

Websites

There are a large number of Data URI generator websites. Googling for data uri generator will find them.

You may be able to directly copy the Data URI with your browser, without going to some strange website. The following works in Firefox 60.1:

• open image.png directly with browser
• open Inspector (Tools > Web Developer > Inspector)
• mouse over the src=file://... data, then select Copy > Image Data-URL

You now have the Data URI in your clipboard

Manually

Creating a data URI by hand can be accomplished by taking your image, Base64-encoding it and formatting it as shown above.