<!-- Standard -->
<div class="avatar">
  <div class="avatar__image">
    <div class="image loading" style="padding-top: 100%;">
      <noscript>
        <img class="image__fallback" srcset="../images/dummy-images/90x90@2x.jpg 2x, ../images/dummy-images/90x90.jpg 1x" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." height="90" src="/images/dummy-images/90x90.jpg"
          width="90" />
      </noscript>
      <img class="image__img js-lazyload" data-src="../images/dummy-images/90x90.jpg" data-srcset="../images/dummy-images/90x90@2x.jpg 2x, ../images/dummy-images/90x90.jpg 1x" srcset="../images/dummy-images/90x90@2x.jpg 2x, ../images/dummy-images/90x90.jpg 1x"
        width="90" height="90" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." />
    </div>
  </div>
  <button class="tooltip js-tooltip avatar__copyright" title="© Vorname Nachname, 2008">©</button>
</div>

{
  "image": {
    "copyright": null,
    "width": 90,
    "height": 90,
    "src": "/images/dummy-images/90x90.jpg",
    "src2x": "/images/dummy-images/90x90@2x.jpg"
  },
  "copyright": {
    "text": "©",
    "tooltip": "© Vorname Nachname, 2008"
  }
}

<!-- Platzhalter Frau -->
<div class="avatar">
  <div class="avatar__image">
    <div class="image loading" style="padding-top: 100%;">
      <noscript>
        <img class="image__fallback" alt="Weibliche Person" height="90" src="/images/avatars/woman.svg" width="90" />
      </noscript>
      <img class="image__img js-lazyload" data-src="../images/avatars/woman.svg" width="90" height="90" alt="Weibliche Person" />
    </div>
  </div>
</div>

{
  "image": {
    "copyright": null,
    "width": 90,
    "height": 90,
    "src": "/images/avatars/woman.svg",
    "src2x": null,
    "alt": "Weibliche Person"
  }
}