Bildformate (JPG, PNG, SVG, GIF, WebP, AVIF)

SVGs für Logos und Icons
WebP oder AVIF für Fotos mit oder ohne Transparenzen, Abbildungen und Animationen
JPGs für fotorealistische Motive, falls WebP oder Avif nicht verwendet werden soll
PNGs nur wenn Transparenz benötigt wird und WebP oder Avif nicht verwendet werden soll
GIFs für Animationen, wenn WebP oder Avif nicht verwendet werden soll

Verwende für Logos und Icons das Format SVG. Es ist beliebig groß skalierbar, ohne an Qualität zu verlieren und die Dateigröße ist dabei sehr klein.
Für Fotos oder Abbildungen mit fotorealistischem Motiv kannst du JPGs verwenden.
PNG sollte nur für Bilder mit transparentem Hintergrund verwendet werden, da es größer ist als ein JPG. Vorzuziehen sind diesen beiden Formaten allerdings die moderneren Formate WebP oder AVIF, mit denen sich auch Transparenzen und Animationen darstellen lassen. Bei sehr hoher Komprimierung wird eine bessere Bildqualität pro Datenmenge als JPGs, PNGs und GIFs erreicht. Wenn du nur ein JPG oder PNG zur Verfügung hast, kannst du es mit einem Online Converter oder einem Plugin in WebP oder AVIF umwandeln.
AVIF bietet im Unterschied zu WebP eine bessere Kompression und höhere Bildqualität, wird jedoch (noch) nicht von allen Browsern unterstützt.

Tipp: Falls du einen einfarbigen Hintergrund oder einen Farbverlauf verwenden möchtest, nutze CSS und kein Bild. Das ist viel performanter und bietet mehr Flexibilität bei Farben und Ausrichtung.

Die Wahl des Formats und somit der Dateigröße beeinflusst die Ladezeit enorm.