This one just screams <braille-string> Web Component

[Danny-Engelman]

In a Web Component you can scope all your CSS and JS so you don't have any global dependencies.
The user then loads just one JS file defining the Web Component, and does not have to use DIV or classnames

Just a quick proof of concept (not refactoring JS and CSS):

JSFiddle: https://jsfiddle.net/WebComponents/yv6scarL/

<link href="https://evoluteur.github.io/braille-tools/css/braille-big.css" rel="stylesheet" type="text/css">
<script src="https://evoluteur.github.io/braille-tools/braille-tools.js" type="text/javascript" charset="utf-8"></script>

<braille-string>Hello World!</braille-string>
<braille-string>I can write Web Components</braille-string>

<script>
  customElements.define("braille-string", class extends HTMLElement {
    connectedCallback() {
      const braille = char => Object.assign(document.createElement("div"), {
        className: `br br-${char}`
      })
      this.render = (txt) => this.replaceWith(...txt.split("").map(braille));
      setTimeout(() => this.render(this.innerHTML)); // wait till innerHTML is parsed
    }
  });
</script>

Note: Every Braille character is a six bit value, so a PNG with all characters is not required, create them 6 dots dynamically