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 srcset="/images/mobaxterm/mobaxterm.webp" type="image/webp" />
    <source srcset="/images/mobaxterm/mobaxterm.jxr" type="image/jxr" />
    <source srcset="/images/mobaxterm/mobaxterm.avif" type="image/avif" />
    <img src="/images/mobaxterm/mobaxterm.jpg" type="image/jpeg" alt="MobaXterm" loading="lazy" />
</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, LazyLoading durch loading=“lazy” wird auch auf den Source Tags angewandt und jedes Bild bekommt sein type="" mit sodass der Browser weiß, was es ist. Ich könnte auch noch Abmessungen und Ausrichtung angeben.

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