Beide Lösungen – das <picture>-Tag und das <img>-Tag mit srcset – haben ihre eigenen Stärken und Schwächen, und welche besser ist, hängt davon ab, was genau du erreichen möchtest. Hier ein Vergleich der beiden Methoden, um dir bei der Entscheidung zu helfen:

1. <picture>-Tag

Das <picture>-Tag ist flexibler und ermöglicht dir die Umleitung auf völlig unterschiedliche Bilder je nach Bildschirmgröße, Pixeldichte oder anderen Kriterien wie Dateiformaten (z. B. WebP vs. JPEG).

Vorteile des <picture>-Tags:

• Verschiedene Mediabedingungen: Du kannst mit dem Attribut media sehr genaue Bedingungen festlegen (z. B. gleiche Bildgröße, aber für Hochformat und Querformat unterschiedliche Bilder).
• Formatwechsel: Es erlaubt, je nach Browserunterstützung unterschiedliche Bildformate wie WebP oder AVIF auszuliefern, was die Ladezeit und Optimierung verbessern kann.
• Größere Gestaltungsmöglichkeiten: Du kannst auch komplett andere Bilder einfügen, die sich nicht nur in der Größe unterscheiden, sondern z. B. auch im Bildausschnitt (z. B. völlige Umgestaltung für kleine Displays).

Nachteil des <picture>-Tags:

• Komplexität: Es erfordert mehr Code und kann für kleinere Anpassungen unnötig aufwendig erscheinen.
• Höhere Wartungskosten: Du musst sicherstellen, dass die verschiedenen Versionen der Bilder (Größen/Formate) gut gepflegt sind, was die Wartung erschwert.

Beispiel mit dem <picture>-Tag:

<picture>
  <source srcset="bild-desktop.webp" media="(min-width: 1024px)" type="image/webp">
  <source srcset="bild-tablet.webp" media="(min-width: 768px)" type="image/webp">
  <source srcset="bild-mobile.webp" media="(max-width: 767px)" type="image/webp">
  <img src="fallback-bild.jpg" alt="Beispielbild">
</picture>

• Wenn die Mindestbreite des Viewports 1024px beträgt, wird bild-desktop.webp geladen.
• Wenn die Breite zwischen 768px und 1023px liegt, wird bild-tablet.webp geladen.
• Für kleinere Viewports (bis 767px) wird bild-mobile.webp verwendet.
• Falls das Browserformat WebP nicht unterstützt wird, greift die <img>-Falle mit fallback-bild.jpg.

2. <img>-Tag mit srcset

Mit srcset bei <img> kannst du verschiedene Bildgrößen bereitstellen, die der Browser basierend auf der Bildschirmgröße, Auflösung (Pixeldichte) oder dem benötigten Detaillevel auswählt.

Vorteile des <img>-Tags mit srcset:

• Einfachheit: Der Code ist schlanker und leichter zu schreiben im Vergleich zum <picture>-Tag.
• Optimierung nach Pixeldichte: Ideal für Bereitstellung von hochauflösenden Bildern (z. B. Retina-Displays), indem du dem Browser je nach Pixeldichte die passende Auflösung auswählst.
• Breite Unterstützung: srcset wird von allen modernen Browsern unterstützt und ist speziell für die Optimierung der Bildgrößen in responsivem Design gedacht.

Nachteil des <img>-Tags mit srcset:

• Begrenzte Flexibilität: Es erlaubt keine Umleitung auf komplett verschiedene Bilder oder Bildformate. Die Bilder unterscheiden sich nur in Größe oder Detailstufe.
• Kein Formatwechsel: Es bleibt bei einem Bildformat, es sei denn, du mischst srcset mit <picture> (etwas komplizierter und weniger elegant).

Beispiel mit srcset am <img>-Tag:

<img 
  src="bild-640.jpg" 
  srcset="bild-320.jpg 320w, bild-640.jpg 640w, bild-1280.jpg 1280w" 
  sizes="(max-width: 600px) 320px, (max-width: 1200px) 640px, 1280px" 
  alt="Beispielbild">

• Der Browser analysiert die Bildschirmbreite und Pixeldichte und lädt das Bild, das den Kriterien am besten entspricht.
• srcset: Stellt drei Versionen bereit (320px, 640px und 1280px Breitbilder).
• sizes: Gibt an, wie breit das Bild im jeweiligen Display-Kontext sein soll, damit der Browser effizient das richtige Bild auswählen kann.

Wann solltest du was verwenden?

Meine Empfehlung

Nutze <img> mit srcset, wenn:

• Es nur darum geht, verschiedene Größen eines Bildes mit demselben Inhalt anzubieten.
• Du eine einfache und schlanke Bilderoptimierung implementieren möchtest, um die Ladezeit zu verbessern.
• Du keine unterschiedlichen Formate wie WebP oder JPEG gezielt ausliefern willst.

Beispiel-Situation:
Du hast ein Produktbild, das je nach Gerätebreite in verschiedenen Auflösungen geladen werden soll, aber der Bildinhalt bleibt gleich.

Nutze <picture>, wenn:

• Du unterschiedliche Bildversionen oder Bildformate anbieten möchtest (z. B. WebP-Version für unterstützende Browser und JPEG als Fallback).
• Unterschiedliche Geräte ganz verschiedene Inhalte oder Perspektiven sehen sollen (z. B. für Mobilgeräte eine kleinere, zugeschnittene Ansicht).
• Du Mediabedingungen wie media nutzen möchtest, um mehr Kontrolle über das Verhalten und die Darstellung der Bilder zu haben.

Beispiel-Situation:
Du möchtest auf kleinen Geräten eine zugeschnittene Version des Bildes oder auf modernen Browsern WebP-Bilder und auf älteren Browsern JPEG anzeigen.

Fazit

Für einfache Responsivität und Bildgrößenanpassung ist das <img>-Tag mit srcset völlig ausreichend und in den meisten Fällen zu bevorzugen, da es einfacher zu implementieren ist.
Für komplexe Szenarien wie Formatwechsel oder verschiedene Inhalte ist das <picture>-Tag die bessere Wahl, wenn du volle Kontrolle benötigst.