HTML Images

There are two different methods for including images on a sheet, and one of them – probably the most common – uses CSS not HTML, so this article is going to be brief and incomplete.

The img HTML element is structured like this:

<img src="url" alt="alternatetext">Code language: HTML, XML (xml)

You need to supply an URL or web address where the image is hosted, and the alt is displayed if the image isn’t found. So for instance address of an image on the Roll20 repo:

<img src=
"https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/ADnD_1E/images/logo.png"
 alt="logo">Code language: HTML, XML (xml)

produces this:

Height and Width

The image is produced at its native size. You can change the size, by entering a different width in pixels, like so:

<img src=
"https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/ADnD_1E/images/logo.png"
 alt="logo" width="150">Code language: HTML, XML (xml)

When you give a width, the image is set at that width, and height is scaled proportionately. The image will not be stretched or squashed.

Important: you’ll likely read on other sites that width or height can be supplied, and they can be in pixels or a percentage. But on roll20, only width in pixels works.

Avatar and Token Images

A recent feature, you can in theory include the Avatar and Token images on a character sheet.

<img name="attr_character_avatar">
<img name="attr_character_token">Code language: HTML, XML (xml)

I say in theory because they don’t show up in my testing. I suspect it’s like optgroup (see Inputs and Attributes), and they don’t show up in custom games but do show up in published sheets (those you have posted to the Roll20 Github). So you won’t be able to see the images until you publish the sheet.

CSS Images

There’s another way to add images to a sheet that is much more powerful and flexible. That will be covered in the CSS Guide.

Series Navigation