Beim herumprobieren mit dem einbinden von Bildern in Hugo habe ich bisher immer die Standard Markdown Funktion verwendet.

![Mobaxterm](/images/mobaxterm/mobaxterm.jpg)

Ich fand diese Option immer ziemlich unzureichend. Du kannst wenig bis keine Optionen setzen die du eigentlich setzen will. Auch das Standart IMG Tag war “mehh”.

Man liest nur wenig vom PICTURE Tag, besonders in der Hugo - Dokumentation, aber ich finde es Ideal zum Einsatz in Hugo

<picture>
    <source type="image/webp" srcset="https://www.thalliman.com/images/kuma/accgroup.webp"  />
    <source type="image/jxr" srcset="https://www.thalliman.com/images/kuma/accgroup.jxr"  />
    <source type="image/avif" srcset="https://www.thalliman.com/images/kuma/accgroup.avif"  />
    <source type="image/png" srcset="https://www.thalliman.com/images/kuma/accgroup.png"  />
    <img type="image/jpeg" src="https://www.thalliman.com/images/kuma/accgroup.jpg" alt="MobaXterm" decoding="async" loading="lazy" fetchpriority="high" />
</picture>

Die SOURCE Tags werden nacheinander abgearbeitet und jeder Browser kann sich quasi nehmen, was er will. Weiters werden die Optionen vom IMG Tag im PICTURE Tag hoch vererbt, dh. alt=“Mobaxterm” wird auch auf die SOURCE Tags angewendet. Deine gute Daumenregel ist, bei allen sichtbaren Bildern decoding=“async” und fetchpriority=“high” zu setzen. So bekommen die am Anfang sichtbaren Bilder mehr Priorität und werden dazu noch parallel zu anderen Dingen geladen. Alles was nicht sichtbar ist, z.b. Bilder zu denen erst gescrollt werden muss, kann man mit loading=“lazy” versehen. So spart man sich einerseits Traffic und gewisse Bilder werden erst geladen wenn man in die Nähe davon ist.

Jeder Browser bekommt das, was er gerne hat und als Fallback gibt es JPEG. Nur Safari bediene ich nicht spezifisch, da kein Programm das ich verwende JP2 kann,

Das PICTURE Tag erfüllt alle Anforderungen. Selbst wenn man es in Markdown nicht deklarieren kann, sollte das im Hintergrund automatisch passieren. HTML 5 existiert schon eine Weile, es ist mir schleierhaft, warum das so wenig genutzt wird.

Da HTML5 in Markdown per Default nicht unterstützt wird, muss folgende Option in der hugo.yaml gesetzt werden. Da man aber aus mehreren Gründen sowieso HTML braucht, macht mir persönlich nichts aus.

markup:
  goldmark:
    renderer:
      unsafe: true

Erwähnt sei hier aber der Fakt, das bei Mehrsprachigen Seiten wie ich sie betreibe, diese Option nicht einfach nur in die hugo.yaml geschrieben werden darf, sondern jeweils in der Sprachkonfigurations - Sektion für jede Sprache geschrieben werden muss. Dies steht nämlich in so gut wie keiner Internetquelle beschrieben und auch Hugo selbst gibt dir darüber nicht Bescheid. Steht sie nicht in der Sprachsektion, wird sie schlichtweg ignoriert und dann fragt man sich, warum Hugo so konsequent das Pictures - Tag ignoriert. Hugo sieht diese Option dann als nicht gesetzt an und ignoriert natürlicherweise dann HTML-Code, weswegen das Picture Tag dann nicht gerendert wird.