Du hast ein Bild.

Vielleicht ein Foto.

Ein Logo.

Einen Screenshot.

Eine Illustration.

Oder ein mit Bild-KI erzeugtes Titelbild.

Nun möchtest du es auf einer Website verwenden.

Beim Speichern erscheint plötzlich eine ganze Reihe möglicher Dateiformate:

JPG

PNG

WebP

AVIF

SVG

Und vielleicht zusätzlich:

GIF

TIFF

BMP

Das gleiche Motiv kann in einem Format 4 Megabyte groß sein und in einem anderen nur 300 Kilobyte.

Manche Formate unterstützen transparente Hintergründe.

Andere nicht.

Manche eignen sich hervorragend für Fotos.

Andere für Logos.

Einige speichern jedes Pixel.

Andere speichern mathematische Formen.

Deshalb ist die Frage:

Welches Bildformat ist das beste?

eigentlich falsch gestellt.

Die bessere Frage lautet:

Welches Format passt zu diesem Bild und seinem Einsatzzweck?

Ein Bildformat ist eine Art, Bildinformationen zu speichern

Ein digitales Bild muss irgendwie als Datei abgelegt werden.

Dafür braucht es Regeln.

Zum Beispiel:

Wie werden Farben gespeichert?

Wie werden Pixel beschrieben?

Wird das Bild komprimiert?

Dürfen Informationen verworfen werden?

Gibt es Transparenz?

Können Metadaten gespeichert werden?

Das Dateiformat definiert diese Regeln.

Vereinfacht:

Bildinformation
↓
Dateiformat
↓
Datei

Beim Öffnen passiert der umgekehrte Vorgang:

Datei
↓
Decoder
↓
sichtbares Bild

Zwei grundlegend unterschiedliche Bildwelten

Bevor wir einzelne Formate betrachten, müssen wir eine wichtige Unterscheidung treffen:

Rastergrafiken

und:

Vektorgrafiken.

Fast alle typischen Websitebilder gehören zu einer dieser beiden Kategorien.

Was ist eine Rastergrafik?

Eine Rastergrafik besteht aus einzelnen Bildpunkten.

Den sogenannten:

Pixeln.

Vereinfacht:

■ ■ ■ ■ ■
■ ■ ■ ■ ■
■ ■ ■ ■ ■
■ ■ ■ ■ ■

Jedes Pixel besitzt eine bestimmte Farbe.

Ein Foto mit:

1920 × 1080 Pixel

besteht aus:

2.073.600 Pixeln

Jeder einzelne dieser Bildpunkte trägt zur sichtbaren Darstellung bei.

Typische Rasterformate

Dazu gehören unter anderem:

JPG

PNG

WebP

AVIF

und auch:

GIF

Diese Formate speichern pixelbasierte Bilder.

Fotos sind typische Rasterbilder

Ein Foto enthält:

unzählige Farbverläufe,

Licht,

Schatten,

Texturen,

kleine Details.

Dafür eignet sich ein Pixelraster hervorragend.

Foto
↓
Millionen Bildpunkte
↓
Rasterbild

Was passiert beim Vergrößern eines Rasterbildes?

Ein Bild besitzt beispielsweise:

400 × 300 Pixel

Nun wird es auf:

1600 × 1200 Pixel

hochgezogen.

Die ursprüngliche Datei enthält dadurch nicht plötzlich mehr reale Bildinformation.

Die vorhandenen Pixel müssen vergrößert beziehungsweise rechnerisch ergänzt werden.

Bei starker Vergrößerung können entstehen:

Unschärfe

Pixeligkeit

Artefakte

Die Auflösung eines Rasterbildes ist deshalb wichtig.

Was ist eine Vektorgrafik?

Eine Vektorgrafik speichert das Bild nicht primär als Pixelraster.

Stattdessen werden geometrische Informationen beschrieben.

Zum Beispiel:

Linie von A nach B

Kreis mit Radius X

Fläche mit Farbe Y

Kurve zwischen Punkten

Das Bild wird beim Anzeigen daraus berechnet.

Ein einfacher Kreis als Vektor

Konzeptionell:

Mittelpunkt
+
Radius
+
Farbe
↓
Kreis

Nicht:

Millionen gespeicherte Pixel

Das besitzt einen entscheidenden Vorteil.

Vektorgrafiken können praktisch beliebig skaliert werden

Ein Logo kann:

50 Pixel breit

oder:

2000 Pixel breit

dargestellt werden.

Die geometrische Beschreibung bleibt dieselbe.

klein
○

groß
         ○

Die Konturen bleiben sauber.

SVG ist das wichtigste Vektorformat im Web

SVG steht für:

Scalable Vector Graphics.

Also sinngemäß:

skalierbare Vektorgrafik.

Das Format eignet sich besonders für:

Logos,

Icons,

einfache Illustrationen,

Diagramme,

geometrische Grafiken.

Ein Foto ist dagegen normalerweise kein sinnvoller SVG-Anwendungsfall

Theoretisch lassen sich sehr komplexe Grafiken vektorisieren.

Ein normales Foto besteht aber aus so vielen feinen Farb- und Texturinformationen, dass Rasterformate dafür erheblich geeigneter sind.

Eine grobe Entscheidung lautet deshalb:

Foto
↓
Rasterformat

Logo / Icon / Geometrie
↓
häufig SVG

Was bedeutet Kompression?

Ein unkomprimiertes Bild kann sehr große Datenmengen erzeugen.

Nehmen wir vereinfacht ein RGB-Bild mit:

2000 × 1000 Pixel

Das sind:

2.000.000 Pixel

Wenn für jeden Pixel mehrere Farbwerte gespeichert werden müssen, entsteht schnell eine Datei mit mehreren Megabyte.

Für Websites wäre es ineffizient, solche Rohdaten immer vollständig zu übertragen.

Deshalb werden Bilder komprimiert.

Kompression versucht Daten effizienter darzustellen

Ein sehr vereinfachtes Beispiel:

Statt:

weiß
weiß
weiß
weiß
weiß
weiß
weiß
weiß

könnte eine Kompressionsmethode sinngemäß speichern:

8 × weiß

Reale Bildkompression ist natürlich wesentlich komplexer.

Das Grundprinzip bleibt:

gleiche beziehungsweise ähnliche Information
↓
effizienter speichern
↓
kleinere Datei

Zwei wichtige Kompressionsarten

Man unterscheidet besonders:

verlustfreie Kompression

und:

verlustbehaftete Kompression.

Was bedeutet verlustfrei?

Bei verlustfreier Kompression kann das ursprüngliche Bild aus der komprimierten Datei grundsätzlich wieder vollständig rekonstruiert werden.

Originaldaten
↓
verlustfreie Kompression
↓
kleinere Datei
↓
Dekodierung
↓
Originaldaten

Es gehen keine relevanten Bildinformationen verloren.

PNG ist ein typisches verlustfrei komprimierendes Webformat

Das macht PNG besonders interessant für Bilder mit:

scharfen Kanten,

Grafiken,

Screenshots,

Transparenz.

Dazu später mehr.

Was bedeutet verlustbehaftet?

Bei verlustbehafteter Kompression werden Informationen entfernt oder vereinfacht.

Das Verfahren versucht vor allem solche Unterschiede zu reduzieren, die visuell wenig auffallen.

Original
↓
Information vereinfachen
↓
kleinere Datei

Beim späteren Öffnen kann das exakte Original nicht mehr vollständig rekonstruiert werden.

Warum sollte man absichtlich Bildinformationen wegwerfen?

Weil die Dateigröße stark sinken kann.

Ein Foto enthält extrem viele kleine Details.

Nicht alle müssen exakt gespeichert werden, damit das Bild für einen Menschen praktisch gleich aussieht.

10 MB Original
↓
intelligente Kompression
↓
700 KB

kann visuell immer noch hervorragend aussehen.

Verlustbehaftet bedeutet nicht automatisch sichtbar schlecht

Das ist wichtig.

Eine gut eingestellte verlustbehaftete Kompression kann optisch kaum vom Ausgangsbild unterscheidbar sein.

Erst bei zu aggressiver Kompression treten deutliche Artefakte auf.

leichte Kompression
→ kaum sichtbar

mittlere Kompression
→ guter Kompromiss

extreme Kompression
→ sichtbare Schäden

Was sind Kompressionsartefakte?

Je nach Format und Bild können beispielsweise auftreten:

Blockstrukturen,

verwaschene Kanten,

Farbflächen,

Ringing um harte Kontraste,

Detailverlust.

Besonders sichtbar werden sie häufig:

an Schrift,

an scharfen Kanten,

bei sehr kleinen grafischen Elementen.

Deshalb benötigt nicht jedes Bild dieselbe Kompression

Ein Foto eines Waldes besitzt enorme natürliche Textur.

Ein Screenshot einer Benutzeroberfläche dagegen:

scharfe Schrift,

gerade Linien,

einfarbige Flächen.

Dasselbe Kompressionsverfahren kann auf beiden völlig unterschiedliche Ergebnisse liefern.

Was ist JPG?

JPG beziehungsweise JPEG gehört zu den ältesten und verbreitetsten Bildformaten für Fotografien im Web.

Die Abkürzung stammt von:

Joint Photographic Experts Group.

JPG ist besonders gut geeignet für:

Fotos

natürliche Bilder

Farbverläufe

komplexe Texturen

Warum funktioniert JPG bei Fotos so gut?

Fotos enthalten häufig:

viele ähnliche Farbübergänge

statt:

harte geometrische Kanten.

JPG kann solche Bildinformationen sehr effizient komprimieren.

Deshalb kann ein großes Foto relativ klein gespeichert werden.

JPG verwendet typischerweise verlustbehaftete Kompression

Das bedeutet:

Beim Speichern mit stärkerer Kompression gehen Bildinformationen verloren.

Viele Programme bieten dafür einen Qualitätsregler.

Zum Beispiel konzeptionell:

Qualität hoch
→ größere Datei

Qualität niedriger
→ kleinere Datei

Qualitätswert ist keine absolute Einheit

Ein Qualitätswert von:

80

in Programm A muss nicht exakt dasselbe bedeuten wie:

80

in Programm B.

Unterschiedliche Encoder können andere Strategien verwenden.

Deshalb sollte man Qualität visuell beurteilen.

JPG bei Fotos

Sehr geeignet:

Urlaubsfoto

Portrait

Landschaft

Produktfotografie

redaktionelles Foto

JPG bei Screenshots

Oft weniger ideal.

Ein Interface-Screenshot enthält:

Text

Linien

Icons

einfarbige Flächen

JPG kann um solche harten Kanten sichtbare Artefakte erzeugen.

JPG bei Logos

Normalerweise ebenfalls keine gute Wahl.

Ein Logo braucht häufig:

sehr saubere Kanten

und vielleicht:

Transparenz.

Dafür sind andere Formate geeigneter.

JPG unterstützt klassische Transparenz nicht

Ein JPG besitzt normalerweise keinen Alpha-Kanal für transparente Bildbereiche.

Ein Logo mit transparentem Hintergrund sollte daher typischerweise nicht als JPG gespeichert werden.

JPG bleibt trotzdem relevant

Moderne Formate können viele Bilder effizienter speichern.

JPG besitzt aber Vorteile:

sehr einfache Verarbeitung,

große Verbreitung,

hohe Kompatibilität mit bestehender Software.

Es ist deshalb weiterhin ein wichtiges Basisformat.

Was ist PNG?

PNG steht für:

Portable Network Graphics.

PNG wurde für verlustfreie Rastergrafiken entwickelt.

Besonders gut eignet es sich für:

Screenshots

Grafiken

Illustrationen mit klaren Flächen

Bilder mit Transparenz

PNG arbeitet verlustfrei

Das bedeutet:

Scharfe Bildinformationen bleiben erhalten.

Das ist besonders wichtig für:

Text,

UI-Screenshots,

Diagramme,

Pixelgrafiken.

Ein Screenshot als PNG

Zum Beispiel:

WordPress-Backend
+
Schrift
+
Buttons
+
Icons

bleibt sehr sauber.

Als stark komprimiertes JPG könnten rund um die Schrift Artefakte sichtbar werden.

PNG kann Transparenz speichern

Das ist eine seiner wichtigsten Eigenschaften.

Zum Beispiel:

Logo
↓
transparenter Hintergrund

So kann dasselbe Bild auf:

weißem,

grauem,

farbigem

Hintergrund verwendet werden.

Was ist ein Alpha-Kanal?

Neben:

Rot,

Grün,

Blau

kann ein Pixel zusätzlich Information über seine Deckkraft besitzen.

R
G
B
+
Alpha

Alpha beschreibt vereinfacht:

voll sichtbar
↔
teiltransparent
↔
unsichtbar

Dadurch sind auch weiche transparente Kanten möglich.

Das ist beispielsweise für Schatten wichtig

Eine freigestellte Grafik kann einen weichen Schatten besitzen.

Der Schatten ist nicht einfach:

sichtbar oder unsichtbar.

Er hat unterschiedliche Transparenzstufen.

PNG kann solche Informationen speichern.

PNG ist bei Fotos oft sehr groß

Ein hochauflösendes Foto als PNG kann erheblich mehr Speicher benötigen als ein gut komprimiertes Fotoformat.

Warum?

PNG versucht die Bildinformationen verlustfrei zu erhalten.

Bei komplexen Fotografien gibt es sehr viel Information.

Foto
+
verlustfrei
↓
große Datei

Für normale Websitefotos ist PNG deshalb häufig unnötig.

„PNG hat bessere Qualität“ ist keine ausreichende Begründung

Technisch erhält PNG die Rasterdaten verlustfrei.

Aber wenn ein JPG beziehungsweise modernes Fotoformat visuell identisch aussieht und nur ein Fünftel der Dateigröße benötigt, ist die größere PNG-Datei für die Website meist nicht sinnvoll.

Gute Faustregel

Fotografie
→ eher Fotoformat

Screenshot / Grafik / Transparenz
→ PNG kann sinnvoll sein

Aber inzwischen kommen moderne Formate hinzu.

Was ist WebP?

WebP ist ein für Webanwendungen entwickeltes Rasterbildformat.

Es kann sowohl:

verlustbehaftet

als auch:

verlustfrei

arbeiten.

Zusätzlich kann es Transparenz unterstützen.

Damit deckt es viele Anwendungsfälle ab, für die früher getrennt:

JPG

und:

PNG

verwendet wurden.

WebP kann für Fotos verwendet werden

Foto
↓
WebP lossy

Dabei kann eine gute Bildqualität bei kompakter Dateigröße erreicht werden.

WebP kann auch für Grafiken verwendet werden

Grafik
↓
WebP lossless

beziehungsweise mit geeigneter Kompression.

Damit ist das Format flexibler als klassisches JPG.

WebP unterstützt Transparenz

Deshalb kann es beispielsweise auch für:

freigestellte Bilder,

Grafiken,

bestimmte Logos

eingesetzt werden.

Wobei für echte Vektorlogos weiterhin SVG häufig geeigneter ist.

WebP ersetzt nicht automatisch jedes andere Format

Nur weil WebP moderner ist, bedeutet das nicht:

Alles als WebP speichern.

Ein SVG-Logo sollte nicht unnötig zu einem Rasterbild werden.

Für bestimmte Workflows kann PNG als verlustfreies Masterformat sinnvoll bleiben.

JPG kann aus Kompatibilitäts- oder Prozessgründen weiterhin verwendet werden.

Die Aufgabe bestimmt das Format.

Was ist AVIF?

AVIF ist ein modernes Bildformat, das auf Bildkompressionstechniken aus der AV1-Welt basiert.

Es wurde unter anderem mit dem Ziel entwickelt, Bilder effizient zu komprimieren.

Es kann sowohl für:

fotografische Inhalte

als auch:

weitere Rastergrafiken

eingesetzt werden.

AVIF kann sehr kleine Dateien ermöglichen

Gerade bei bestimmten fotografischen Bildern kann eine hohe visuelle Qualität bei relativ geringer Dateigröße erreicht werden.

Das macht AVIF für Webperformance interessant.

Moderne Kompression benötigt Rechenarbeit

Ein wichtiger Unterschied zwischen Formaten betrifft nicht nur die Dateigröße.

Auch:

Kodieren

und:

Dekodieren

brauchen Rechenleistung.

Bild
↓
Encoder
↓
komprimierte Datei

Ein moderneres Verfahren kann bei der Erstellung deutlich mehr Rechenzeit benötigen.

Für Websites ist langsameres Encoding oft kein großes Problem

Ein Bild wird vielleicht einmal optimiert.

Danach wird es:

tausendfach,

millionenfach

ausgeliefert.

einmal etwas länger komprimieren
↓
viele kleinere Downloads

kann ein sinnvoller Tausch sein.

In automatisierten Bildpipelines kann Encoding-Zeit trotzdem relevant werden

Wenn täglich:

zehntausende Bilder

in mehreren Größen

erzeugt werden, zählt auch die Verarbeitungsgeschwindigkeit.

Dann muss man abwägen:

Dateigröße
↔
Encoding-Zeit
↔
Qualität

AVIF und Transparenz

AVIF kann auch Transparenz unterstützen.

Damit ist es nicht ausschließlich ein Fotoformat.

Dennoch hängt die ideale Wahl immer vom konkreten Motiv und Workflow ab.

Nicht jedes Bild komprimiert sich im selben Format am besten

Ein Foto kann in AVIF hervorragend funktionieren.

Ein Screenshot möglicherweise in einem anderen Format effizienter.

Ein Logo weiterhin als SVG.

Deshalb sollte man nicht nach einem einzigen Sieger suchen.

Was ist SVG?

SVG steht für:

Scalable Vector Graphics.

Anders als:

JPG,

PNG,

WebP,

AVIF

ist SVG typischerweise kein klassisches Pixelbildformat.

Es beschreibt grafische Elemente vektorbasiert.

Ein SVG kann beispielsweise enthalten

Kreis

Linie

Pfad

Text

Farbfläche

Diese Elemente werden beim Anzeigen gezeichnet.

SVG eignet sich hervorragend für Logos

Ein Logo besteht häufig aus:

klaren Formen,

Flächen,

Schrift beziehungsweise Pfaden.

Logo als SVG
↓
klein
mittel
riesig
↓
immer scharfe Kanten

Das ist einer der größten Vorteile.

SVG eignet sich auch für Icons

Ein einfaches Suchsymbol:

⌕

muss nicht als:

64 × 64 Pixel PNG

gespeichert werden.

Ein Vektor kann unabhängig von der Ausgabegröße sauber dargestellt werden.

SVG kann bei einfachen Grafiken sehr klein sein

Beispiel:

ein Kreis mit zwei Linien.

Rastergrafik:

viele Pixel.

SVG:

einige geometrische Befehle.

wenige Formen
→ kompakte Beschreibung

Komplexe SVGs können dagegen groß werden

Eine sehr detaillierte Illustration mit:

tausenden Pfaden,

Effekten,

Masken

kann erheblich anwachsen.

Vektor bedeutet also nicht automatisch:

kleiner.

SVG kann mit CSS interagieren

Bestimmte SVG-Elemente können so aufgebaut sein, dass ihre Farben beziehungsweise Eigenschaften über Styles steuerbar sind.

Das eignet sich hervorragend für Iconsysteme.

Zum Beispiel:

Icon
↓
color-current
↓
übernimmt Textfarbe

Damit kann dasselbe Icon in verschiedenen Kontexten funktionieren.

SVG und Dark Mode

Ein entsprechend vorbereitetes Icon kann:

hell

oder:

dunkel

dargestellt werden, ohne separate Pixeldateien zu benötigen.

Das passt hervorragend zum Farbsystem aus Farben im Webdesign.

SVG ist nicht automatisch ungefährlich

SVG ist ein strukturiertes Dokumentformat und kann komplexere Inhalte enthalten als ein reines Pixelbild.

Deshalb sollten SVG-Dateien aus nicht vertrauenswürdigen Quellen nicht blind übernommen und auf einen Webserver gestellt werden.

CMS-Systeme behandeln SVG-Uploads aus Sicherheitsgründen teilweise anders als normale Rasterbilder.

SVG sollte bereinigt werden

Bei eigenen beziehungsweise freigegebenen Grafiken kann eine Optimierung beispielsweise entfernen:

unnötige Editorinformationen,

überflüssige Metadaten,

nicht benötigte Elemente.

Das kann Dateigröße und Sicherheit verbessern.

SVG für Fotos?

Normalerweise nein.

Ein fotografisches Motiv als SVG zu speichern wäre entweder:

unpraktisch komplex

oder es würde lediglich ein eingebettetes Rasterbild enthalten.

Dann verliert man den eigentlichen Vorteil.

SVG für Diagramme?

Häufig hervorragend.

Zum Beispiel:

Prozessdiagramm

Architekturdiagramm

einfache Statistikgrafik

Vektoren bleiben auch bei:

Zoom,

hoher Pixeldichte

scharf.

Text in SVG

Text kann technisch als Textobjekt oder als Vektorpfade enthalten sein.

Beides besitzt Vor- und Nachteile.

Bei Logos wird Schrift manchmal in Pfade umgewandelt, damit keine externe Schrift benötigt wird.

Bei Informationsgrafiken kann echter Text unter bestimmten Umständen sinnvoller sein.

Was ist GIF?

GIF gehört ebenfalls zu den klassischen Webformaten.

Heute ist es besonders bekannt für:

Animationen.

Frame 1
↓
Frame 2
↓
Frame 3
↓
...

GIF besitzt technische Einschränkungen

Unter anderem verfügt es nur über eine begrenzte Farbpalette pro Frame.

Für moderne Fotos und hochwertige Videos ist es daher ineffizient.

Animiertes GIF kann riesige Dateien erzeugen

Ein kurzer animierter Ausschnitt kann mehrere Megabyte benötigen.

Moderne Video- beziehungsweise Bildformate können bewegte Inhalte häufig deutlich effizienter speichern.

GIF bleibt für einfache kleine Animationen relevant

Zum Beispiel:

sehr einfache grafische Sequenzen.

Aber:

GIF
≠
automatisch beste Webanimation

Und TIFF?

TIFF ist ein leistungsfähiges Rasterformat, das beispielsweise in:

Fotografie,

Druck,

Archivierung,

Bildbearbeitung

verwendet wird.

Für die direkte normale Auslieferung auf Websites ist es meist ungeeignet.

TIFF kann ein Masterformat sein

Eine hochwertige Bildquelle könnte als:

TIFF

gespeichert werden.

Für die Website entstehen daraus:

WebP,

AVIF,

JPG

oder andere optimierte Varianten.

Das führt zu einem wichtigen Prinzip:

Masterdatei und Webdatei müssen nicht dasselbe sein

Sehr sinnvoll ist häufig:

hochwertiges Original
↓
Master
↓
Webvarianten

Zum Beispiel:

RAW / TIFF / PNG / Original
↓
Bildpipeline
↓
AVIF
WebP
JPG

Das Original bleibt erhalten.

Die Website bekommt optimierte Versionen.

Warum sollte das Original erhalten bleiben?

Weil Weboptimierung häufig Informationen entfernt.

Ein stark komprimiertes Bild lässt sich später nicht wieder in ein perfektes Original verwandeln.

Original
↓
Kompression
↓
Webdatei

Der Weg zurück:

Webdatei
↓
?
↓
Original

funktioniert nicht zuverlässig.

Deshalb nie nur die kleine Webdatei archivieren

Besonders wichtig bei:

eigener Fotografie,

Produktfotos,

KI-Masterbildern,

Grafikdesign.

Eine spätere Website könnte größere Auflösung benötigen.

Oder einen anderen Bildausschnitt.

Was bedeutet Auflösung?

Bei Rasterbildern:

Breite × Höhe

in Pixeln.

Zum Beispiel:

1920 × 1080

oder:

1200 × 800

Je mehr Pixel, desto mehr räumliche Bildinformation kann gespeichert werden.

Mehr Pixel bedeuten häufig größere Dateien

Nicht exakt proportional, weil Kompression eine Rolle spielt.

Aber grundsätzlich:

mehr Pixel
→ mehr Bildinformation
→ häufig größere Datei

Eine Website braucht nicht die Kameraauflösung

Eine Kamera erzeugt vielleicht:

6000 × 4000 Pixel

Das Bild wird auf der Website maximal:

900 Pixel

breit dargestellt.

Dann ist es meist unsinnig, jedem Besucher die komplette Originaldatei zu senden.

Deshalb zuerst passend skalieren

Eine sinnvolle Pipeline:

Original
↓
benötigte Darstellungsgrößen
↓
skalieren
↓
komprimieren
↓
Webvarianten

Nicht nur:

Original
↓
stark komprimieren

Bilddimension und Kompression sind unterschiedliche Dinge

Du kannst eine:

6000 × 4000

Datei stark komprimieren.

Oder:

1200 × 800

mit hoher Qualität speichern.

Für eine Website kann die zweite Variante kleiner und zugleich sichtbar besser sein.

Erst unnötige Pixel entfernen

Dann komprimieren.

Das ist häufig effizienter.

Responsive Bilder lösen das Problem mehrerer Anzeigegrößen

Aus einem Master entstehen beispielsweise:

480 px

768 px

1200 px

1600 px

Breite.

Der Browser kann abhängig vom Layout eine passende Variante verwenden.

Das haben wir unter Responsive Webdesign bereits angesprochen.

srcset als Prinzip

Vereinfacht:

Bild 480
Bild 768
Bild 1200
Bild 1600
↓
Browser
↓
wählt passende Größe

Dadurch muss ein Smartphone nicht dieselbe riesige Datei laden wie ein großer Desktopmonitor.

Auflösung und Format können kombiniert werden

Man könnte beispielsweise besitzen:

480.webp
960.webp
1440.webp

und zusätzlich:

480.avif
960.avif
1440.avif

Die Website kann abhängig von den unterstützten Möglichkeiten geeignete Ressourcen anbieten.

picture als konzeptionelles Werkzeug

HTML kann alternative Bildquellen anbieten.

Vereinfacht:

AVIF verfügbar?
↓
verwenden

sonst WebP?
↓
verwenden

sonst JPG

Damit lassen sich moderne Formate mit Fallbacks kombinieren.

Nicht jede Website braucht drei Formate für jedes Bild

Eine solche Pipeline erzeugt:

mehr Dateien,

mehr Speicher,

mehr Komplexität.

Man sollte prüfen, ob der reale Vorteil den Aufwand rechtfertigt.

Formatoptimierung ist ein Optimierungsproblem

Man balanciert:

Bildqualität

Dateigröße

Browserfähigkeit

CPU-Aufwand

Speicher

Workflow-Komplexität

Die kleinste theoretische Datei ist nicht automatisch die beste Lösung.

Was bedeutet Qualität?

Bei Bildern wird Qualität häufig über einen Encoderregler dargestellt.

Zum Beispiel:

Quality 90

Doch visuelle Qualität ist subjektiv und motivabhängig.

Hohe Qualitätsstufe kann ineffizient sein

Beispiel:

Quality 80
→ 250 KB

Quality 100
→ 1,2 MB

Wenn praktisch niemand einen sichtbaren Unterschied erkennt, sind die zusätzlichen Daten verschwendet.

Die exakten Größen variieren je nach Bild und Encoder.

Das Prinzip bleibt.

Die höchste Qualitätseinstellung ist selten automatisch sinnvoll

Viele Menschen denken:

100
=
beste professionelle Qualität

Für Webauslieferung kann das unnötig sein.

Gesucht wird normalerweise:

visuell ausreichend hochwertig
+
möglichst kompakt

Kompressionsqualität sollte am tatsächlichen Bild getestet werden

Ein Portrait.

Eine Landschaft.

Eine Architekturaufnahme.

Ein Screenshot.

Alle reagieren unterschiedlich.

Daher ist ein einziger Qualitätswert für jede Datei nicht immer optimal.

Automatisierung kann mit Presets arbeiten

Zum Beispiel:

photo
→ Preset A

screenshot
→ Preset B

illustration
→ Preset C

Das ist praktischer als jede Datei manuell zu optimieren.

Was ist Farbtiefe?

Farbtiefe beschreibt vereinfacht, wie viele unterschiedliche Farb- beziehungsweise Helligkeitsstufen gespeichert werden können.

Je mehr Information pro Farbkanal vorhanden ist, desto feiner können Abstufungen dargestellt werden.

Warum ist das relevant?

Bei sehr weichen Farbverläufen können geringe Farbabstufungen sichtbare Übergänge erzeugen.

Das nennt man häufig:

Banding.

Statt:

weich → weich → weich → weich

sieht man:

Stufe | Stufe | Stufe | Stufe

Für normale Webbilder reicht Standardfarbtiefe häufig aus

Professionelle Bildbearbeitung kann intern mit höherer Präzision arbeiten.

Die finale Webausgabe wird dann passend für die Zielumgebung exportiert.

Wieder:

Master und Webdatei können unterschiedliche Anforderungen besitzen.

HDR-Bilder

Moderne Displays und Formate können teilweise größere Helligkeits- und Farbbereiche darstellen.

Für normale Websiteworkflows sollte man jedoch bewusst entscheiden, ob HDR tatsächlich Teil des Designs ist.

Eine konsistente Darstellung über unterschiedliche Displays bleibt eine Herausforderung.

Farbprofile

Eine Bilddatei kann Informationen darüber enthalten, wie ihre Farbwerte interpretiert werden sollen.

Das ist besonders in professioneller Fotografie und Bildbearbeitung wichtig.

Für Webbilder sollte ein konsistenter Farbraum verwendet werden, der in der vorgesehenen Browserumgebung zuverlässig funktioniert.

Warum Farben sonst unterschiedlich aussehen können

Dasselbe Pixeltripel kann in unterschiedlichen Farbräumen nicht zwangsläufig identisch interpretiert werden.

Außerdem unterscheiden sich Displays.

Deshalb sind vollkommen identische Farben auf jedem Gerät praktisch nicht garantierbar.

Logos sollten trotzdem exakte Designwerte besitzen

Eine Markenfarbe sollte in:

SVG,

CSS,

Design Tokens

klar definiert sein.

Bei fotografischen Bildern und Illustrationen ist eine etwas größere visuelle Varianz normal.

Was bedeutet Transparenz?

Ein Bildbereich kann:

vollständig sichtbar,

teilweise transparent,

vollständig transparent

sein.

Das ist besonders wichtig für:

Logos,

freigestellte Produkte,

Icons,

Overlays.

Formate mit Transparenz

Typischerweise können unter anderem:

PNG

WebP

AVIF

SVG

Transparenz beziehungsweise entsprechende Alpha-Informationen unterstützen.

Klassisches JPG dagegen nicht.

Transparente Bilder können größer sein

Besonders wenn:

große Abmessungen,

komplexe Kanten,

viele Details

gespeichert werden.

Ein freigestelltes Produkt sollte deshalb trotzdem passend skaliert und komprimiert werden.

Was ist besser: transparentes PNG oder WebP?

Es gibt keine universelle Antwort.

Bei einem komplexen freigestellten Foto kann modernes WebP erheblich kompakter sein.

Bei einer einfachen Grafik kann PNG bereits sehr effizient sein.

Bei einem Logo kann SVG besser sein als beide.

Motiv zuerst, Format danach

Das ist einer der wichtigsten Grundsätze:

Was ist das Bild?
↓
Welche Eigenschaften braucht es?
↓
Format wählen

Nicht:

Wir verwenden grundsätzlich PNG.

Das richtige Format für ein Foto

Typischerweise:

WebP / AVIF / JPG

abhängig von:

Pipeline,

Kompatibilität,

Qualitätsziel.

PNG ist normalerweise nicht die erste Wahl für ein normales großes Foto.

Das richtige Format für ein Logo

Wenn es als Vektor vorliegt:

SVG

ist häufig ideal.

Wenn Raster notwendig ist und Transparenz gebraucht wird:

PNG / WebP

können Alternativen sein.

Das richtige Format für einen Screenshot

Häufig eignen sich:

PNG

oder ein modernes Rasterformat mit geeigneten Einstellungen.

Besonders wichtig:

Text und feine UI-Kanten müssen sauber bleiben.

Das richtige Format für eine Illustration

Kommt auf den Stil an.

Geometrische Vektorgrafik:

SVG

komplexe gerenderte beziehungsweise gemalte Illustration:

WebP / AVIF / PNG

abhängig von:

Transparenz,

Details,

Kompression.

Das richtige Format für KI-Bilder

KI-generierte Bilder sind in vielen Fällen klassische Rasterbilder.

Ein typischer Workflow:

KI-Original
↓
Master speichern
↓
Webformat erzeugen
↓
responsive Varianten

Für fotografische oder malerische KI-Bilder können moderne verlustbehaftete Formate sehr gut geeignet sein.

Generierte Master nicht unnötig früh zerstören

Wenn ein Bildmodell ein PNG liefert:

nicht unbedingt sofort:

kleines stark komprimiertes JPG

als einzige Version behalten.

Besser:

Original / Master
↓
Archiv

und separate Webausgabe.

Das ist für spätere Inpainting-Arbeiten wichtig

Vielleicht muss später ein kleiner Bereich korrigiert werden.

Mit Inpainting arbeitet man lieber mit einer hochwertigen Ausgangsversion als mit einem bereits stark komprimierten Bild voller Artefakte.

Image-to-Image ebenso

Bei Image-to-Image kann schlechte Ausgangsqualität den nächsten Verarbeitungsschritt beeinflussen.

Versionierung ist deshalb auch bei Bildformaten sinnvoll.

Ein Asset kann mehrere Repräsentationen besitzen

Zum Beispiel:

asset_4711
├── master.png
├── web-480.avif
├── web-960.avif
├── web-1440.avif
├── fallback-960.webp
└── social-1200.jpg

Nicht jede Website braucht so viele Varianten.

Das Modell zeigt aber:

Ein Motiv ist nicht dasselbe wie eine Datei.

Asset und Representation

Konzeptionell:

Motiv
↓
Asset
↓
mehrere Dateien

Die verschiedenen Dateien dienen unterschiedlichen Zwecken.

Das ist für ein Medienmanagementsystem sehr nützlich

Statt:

bild-neu-final-klein2.webp

existiert:

asset_id = 4711

mit verschiedenen Repräsentationen.

WordPress folgt bereits teilweise diesem Prinzip

Wenn ein Rasterbild hochgeladen wird, können abhängig von Konfiguration, Theme und Serverumgebung verschiedene Größen erzeugt werden.

Dadurch kann dasselbe Medienasset in unterschiedlichen Layoutgrößen verwendet werden.

Welche Formate und zusätzlichen Konvertierungen automatisch verfügbar sind, hängt von der jeweiligen WordPress- und Serverkonfiguration ab.

Originale und abgeleitete Größen

Konzeptionell:

Upload
↓
Original
↓
Thumbnail
Medium
Large
weitere Themegrößen

Das erleichtert responsive Bildauslieferung.

Zu viele Bildgrößen haben allerdings einen Preis

Jedes hochgeladene Bild kann mehrere Dateien erzeugen.

Bei:

100.000 Bildern

und:

zehn Varianten

entsteht eine erhebliche Menge an Dateien.

Nur benötigte Größen generieren

Ein Theme sollte nicht ohne Grund zwanzig verschiedene Bildgrößen registrieren.

Andererseits fehlen bei zu wenigen Größen passende Varianten.

Es geht um Balance.

WordPress-Theme beeinflusst benötigte Bildgrößen

Ein Theme besitzt vielleicht:

Artikelbild groß

Card 3-Spalten

Card 4-Spalten

Thumbnail

Daraus lassen sich sinnvolle Zielgrößen ableiten.

Bildgrößen sollten aus dem Designsystem kommen

Nicht:

jede Seite erfindet eigene Maße.

Besser:

hero-large

card-medium

thumbnail-small

als wiederkehrende Rollen.

Design Token für Bildgrößen?

Nicht zwingend als klassischer Token.

Aber ein Media-System kann benannte Presets besitzen:

hero

article

card

avatar

thumbnail

Daraus werden:

Abmessungen,

Seitenverhältnis,

Qualitätsregeln

abgeleitet.

Seitenverhältnis ist etwas anderes als Auflösung

Ein Bild:

1600 × 900

und:

3200 × 1800

besitzen beide:

16:9

Das Seitenverhältnis beschreibt die Form.

Die Auflösung die Pixelmenge.

Websites sollten Seitenverhältnisse systematisieren

Zum Beispiel:

Hero
→ 16:9

Article Card
→ 3:2

Portrait
→ 4:5

Avatar
→ 1:1

Dadurch entstehen konsistentere Layouts.

Ein Bild kann für mehrere Ratios unterschiedliche Crops brauchen

Original:

3:2

Website Hero:

16:9

Mobile Hero:

4:5

Ein einziges automatisches Zentrumscropping kann wichtige Bildbereiche abschneiden.

Art Direction

Deshalb können verschiedene Bildvarianten bewusst unterschiedliche Ausschnitte verwenden.

Desktop
→ breite Komposition

Mobil
→ engerer vertikaler Ausschnitt

Das haben wir bereits unter Responsive Webdesign kennengelernt.

Format und Crop sind getrennte Entscheidungen

Beispiel:

Hero Desktop
→ 16:9 AVIF

Hero Mobile
→ 4:5 AVIF

Das Format bleibt gleich.

Der Bildausschnitt verändert sich.

Metadaten

Bilddateien können zusätzliche Informationen enthalten.

Zum Beispiel:

Kamera

Objektiv

Aufnahmedatum

GPS

Beschreibung

Copyrightinformation

Nicht jedes Format und jeder Workflow speichert dieselben Metadaten.

EXIF

Bei Fotos begegnet häufig der Begriff:

EXIF.

Darin können Aufnahmeinformationen gespeichert sein.

Zum Beispiel:

Belichtungszeit,

ISO,

Kamera,

Datum.

Unter Umständen auch Standortdaten.

GPS-Metadaten können sensibel sein

Ein privates Foto wird auf einer Website veröffentlicht.

Im Bild stecken möglicherweise Koordinaten des Aufnahmeorts.

Deshalb sollte ein Webworkflow bewusst entscheiden:

Welche Metadaten bleiben erhalten?

Welche werden entfernt?

Metadaten erhöhen außerdem Dateigröße

Bei normalen Webbildern braucht der Browser viele dieser Informationen nicht.

Deshalb entfernen Optimierungstools häufig unnötige Metadaten.

Nicht alle Metadaten sind unnötig

Copyrightinformationen oder Farbprofile können je nach Workflow sinnvoll sein.

Die Regel sollte nicht lauten:

immer alles entfernen

sondern:

nur behalten,
was gebraucht wird

Datenschutz und Bilddateien

Besonders bei:

privaten Fotos,

Mitarbeiterbildern,

Aufnahmen aus Wohnräumen

sollten Metadaten bewusst geprüft werden.

Das Bild selbst kann anonym wirken, während seine Metadaten zusätzliche Informationen preisgeben.

Dateiendung und tatsächliches Format

Eine Datei heißt:

bild.jpg

Das sollte ein tatsächliches JPG sein.

Nur die Endung umzubenennen:

bild.png
→
bild.webp

konvertiert die Datei nicht.

Konvertierung bedeutet neu kodieren

PNG-Daten
↓
Decoder
↓
Bild
↓
WebP-Encoder
↓
WebP-Datei

Erst dadurch entsteht tatsächlich ein anderes Format.

Mehrfach verlustbehaftet komprimieren vermeiden

Ein JPG wird geöffnet.

Neu als JPG gespeichert.

Dann wieder bearbeitet.

Wieder als JPG gespeichert.

Bei jedem verlustbehafteten Speichervorgang können weitere Artefakte entstehen.

Original
↓
JPG
↓
JPG
↓
JPG

ist schlechter als:

Master
↓
finales JPG

Deshalb immer vom Master ableiten

Wenn eine neue Webgröße benötigt wird:

Master
↓
neue Ableitung

nicht:

bereits kleine Webdatei
↓
noch kleinere Webdatei

So bleibt die Qualität besser.

Dasselbe gilt für moderne Formate

Nicht:

JPG
↓
WebP
↓
AVIF

wenn der hochwertige Master verfügbar ist.

Besser:

Master
├── JPG
├── WebP
└── AVIF

Verlustfreie Konvertierung macht verlorene Details nicht zurück

Ein stark komprimiertes JPG wird als PNG gespeichert.

Nun ist die neue Speicherung zwar verlustfrei.

Aber:

die alten JPG-Artefakte bleiben.

schlechtes JPG
↓
PNG
↓
schlechtes Bild ohne weitere Verluste

PNG kann verlorene Information nicht wiederherstellen.

Upscaling ist ebenfalls etwas anderes

Eine KI kann fehlende Details plausibel ergänzen.

Aber sie rekonstruiert nicht zwingend exakt die ursprünglichen Bildinformationen.

Für Archivierung bleibt daher das echte Original wichtig.

Dateigröße messen statt vermuten

Es gibt viele Faustregeln.

Die reale Frage lautet:

Wie groß ist dieses konkrete Bild in:

JPG,

WebP,

AVIF

bei akzeptabler Qualität?

Das lässt sich messen.

A/B-Vergleich auf Dateiebene

Zum Beispiel:

Foto A

JPG   → 410 KB
WebP  → 290 KB
AVIF  → 210 KB

bei visuell vergleichbarer Qualität.

Bei einem anderen Bild können die Verhältnisse anders ausfallen.

Nicht nur Dateigröße vergleichen

Zusätzlich:

sichtbare Qualität

Encoding-Zeit

Kompatibilität

Verarbeitung im CMS

Ein um fünf Kilobyte kleineres Format rechtfertigt keine komplizierte Infrastruktur.

Automatische Qualitätskontrolle

Eine Bildpipeline kann technische Dinge automatisch prüfen.

Zum Beispiel:

Abmessungen korrekt?

Dateigröße unter Grenze?

Format korrekt?

Datei lesbar?

Alpha vorhanden?

Visuelle Qualität ist schwieriger automatisch zu bewerten

Ein Algorithmus kann Unterschiede messen.

Aber:

ein minimaler mathematischer Unterschied muss nicht sichtbar sein.

Und ein kleiner Unterschied an einem Gesicht kann sehr relevant sein.

Deshalb eignen sich Referenzbilder und Stichproben

Bei einer automatischen Pipeline kann man:

Presets technisch testen

und anschließend:

repräsentative Bilder visuell prüfen.

Unterschiedliche Bildklassen testen

Nicht nur ein einziges Foto.

Zum Beispiel:

Portrait

Landschaft

Screenshot

Illustration

Produktfoto

dunkles Bild

feiner Farbverlauf

Dann zeigt sich, ob das Preset robust funktioniert.

Dateigrößenbudget

Eine Website kann für bestimmte Komponenten grobe Budgets definieren.

Zum Beispiel:

Hero
→ größere Datei erlaubt

Card
→ deutlich kleiner

Thumbnail
→ sehr kompakt

Nicht als starres Naturgesetz.

Sondern als Performanceziel.

Ein 2-MB-Thumbnail ist offensichtlich ineffizient

Selbst wenn die Website insgesamt schnell genug wirkt.

Denn bei 20 Cards wären das:

20 × 2 MB
=
40 MB

nur für Vorschaubilder.

Kleine Fehler skalieren

Ein Bild ist 300 KB unnötig zu groß.

Bei:

100.000 Seitenaufrufen

sind das:

30.000.000 KB

zusätzliche übertragene Daten.

Bildoptimierung besitzt daher große Skaleneffekte.

Bildformate beeinflussen Ladezeit

Weniger Daten bedeuten häufig:

schnelleren Download.

Das kann besonders relevant sein bei:

Mobilfunk,

langsameren Verbindungen,

vielen Bildern.

Dadurch verbindet sich dieses Thema direkt mit Core Web Vitals.

Aber das kleinste Format ist nicht immer das schnellste Gesamterlebnis

Ein extrem aufwendig zu dekodierendes Bildformat könnte auf schwacher Hardware zusätzliche Rechenzeit benötigen.

Bei normalen Webbildern ist meist die Datenreduktion sehr wertvoll.

Dennoch sollte Performance als Gesamtsystem betrachtet werden.

Lazy Loading

Nicht jedes Bild muss sofort geladen werden.

Bilder weit unten auf einer Seite können gegebenenfalls erst geladen werden, wenn sie sich dem sichtbaren Bereich nähern.

Seite laden
↓
sichtbare Bilder zuerst
↓
weitere Bilder später

Das reduziert den initialen Datenbedarf.

Hero-Bilder sind anders

Das zentrale Bild im sichtbaren ersten Bereich sollte nicht unnötig verzögert werden.

Es kann für die wahrgenommene Ladegeschwindigkeit sehr wichtig sein.

Bildpriorität und Formatoptimierung müssen zusammenspielen.

Bilder und Layoutstabilität

Der Browser sollte möglichst wissen:

Wie viel Raum ein Bild benötigt.

Sonst kann passieren:

Text erscheint
↓
Bild lädt
↓
Text springt nach unten

Das verschlechtert die visuelle Stabilität.

Bilddimensionen gehören deshalb ins Layout

Das Bildformat allein löst dieses Problem nicht.

Aber ein guter Medienworkflow speichert:

Breite,

Höhe,

Seitenverhältnis

als bekannte Eigenschaften.

Medieninformationen in einer Asset Registry

Zum Beispiel:

{
  "asset_id": 4711,
  "width": 2048,
  "height": 1365,
  "ratio": "3:2",
  "master_format": "png"
}

Daraus können automatisiert passende Webvarianten entstehen.

Ein Bildservice kann Formatkonvertierung übernehmen

Konzeptionell:

Master Asset
↓
Image Service
├── resize
├── crop
├── WebP
├── AVIF
└── JPG fallback

Das ist besonders für größere Websites interessant.

n8n kann die Verarbeitung orchestrieren

Zum Beispiel:

neues Bild
↓
n8n
↓
Image Service
↓
Varianten erzeugen
↓
Qualitätsprüfung
↓
WordPress

n8n muss dabei nicht selbst Bilder komprimieren.

Es steuert nur die spezialisierten Dienste.

Beispiel strukturierter Auftrag

{
  "asset_id": 4711,
  "preset": "article-hero"
}

Der Image Service kennt:

Zielgrößen

Seitenverhältnis

Formate

Qualität

Presets verhindern manuelle Entscheidungen

Nicht bei jedem Bild:

Welche Breite?

Welche Qualität?

Welches Format?

Sondern:

preset = article-hero

oder:

preset = article-card

Das erhöht Konsistenz.

Ein Hero-Preset könnte mehrere Ausgaben erzeugen

Konzeptionell:

Desktop Large
Desktop Medium
Mobile

jeweils in einer oder mehreren sinnvollen Formatvarianten.

Ein Card-Preset braucht kleinere Bilder

Die Quelle kann dieselbe sein.

Die Ausgabe ist deutlich kompakter.

Master
├── Hero
├── Card
└── Thumbnail

Bildverarbeitung kann lokal stattfinden

Bei einem eigenen Server:

Original
↓
lokaler Image Worker
↓
Optimierung
↓
Webdateien

Das ist insbesondere bei sensiblen Bildern interessant.

Oder über externe Bilddienste

Ein CDN beziehungsweise Bildservice kann Bilder beim Abruf:

skalieren,

komprimieren,

in geeignete Formate umwandeln.

Das kann Infrastruktur vereinfachen.

Welche Architektur sinnvoller ist, hängt von:

Kosten,

Traffic,

Datenschutz,

Kontrollbedarf

ab.

Original trotzdem sichern

Auch wenn ein Bild-CDN automatisch Varianten erzeugt:

Der Master sollte verlässlich gespeichert sein.

Der CDN-Cache ist kein Ersatz für das Bildarchiv.

CDN und Bildformate

Ein moderner Bilddienst kann beispielsweise abhängig von der Anfrage entscheiden:

Browser / Client
↓
geeignetes Format
↓
optimierte Datei

Damit muss die Website möglicherweise nicht jede Formatentscheidung selbst treffen.

Mehr Automatik bedeutet mehr Abhängigkeit

Wenn ein externer Bilddienst alle Varianten dynamisch erzeugt:

ist das bequem.

Bei einem Anbieterwechsel muss die Pipeline jedoch erneut aufgebaut werden.

Daher lohnt es sich, Originalassets unabhängig zu verwalten.

WordPress-Mediathek ist nicht zwingend das einzige Bildarchiv

Für kleinere Websites kann sie genügen.

Bei sehr großen Assetmengen kann zusätzlich ein zentrales Asset-System sinnvoll sein.

Zum Beispiel:

Asset Storage
↓
Websites
├── WordPress A
├── WordPress B
└── WordPress C

Eine Bildquelle für mehrere Websites

Ein zentrales Masterbild könnte abhängig von der Website:

anderes Format,

andere Größe,

anderen Crop

erhalten.

Master
↓
Website A Hero
↓
Website B Card
↓
Website C Social Preview

Das vermeidet redundante Originale

Statt dasselbe 20-MB-Masterbild auf fünf WordPress-Installationen zu kopieren.

Ob das technisch sinnvoll ist, hängt allerdings von der Gesamtarchitektur ab.

Bildformat und SEO

Das Dateiformat allein erzeugt kein gutes Ranking.

Aber kleinere, korrekt dimensionierte Bilder können:

Ladezeiten,

Nutzungserlebnis

und technische Performance

verbessern.

Das kann Teil einer insgesamt guten Websitequalität sein.

Dateiname

Ein sinnvoller Dateiname kann Verwaltung erleichtern.

Zum Beispiel:

responsive-webdesign-breakpoints.webp

statt:

IMG_847382_FINAL2.webp

Für interne Organisation ist das besonders nützlich.

Dateiendung muss nicht Keywordstrategie werden

Es bringt nichts, Dateinamen künstlich mit zehn Keywords zu überladen.

Der Dateiname sollte vor allem:

verständlich,

stabil,

eindeutig

sein.

Alt-Text und Bildformat sind getrennte Themen

Ob ein Bild:

WebP

oder:

JPG

ist, sagt nichts darüber aus, welchen Alternativtext es benötigt.

Alt-Texte gehören zur Bedeutung und Barrierefreiheit.

Nicht zur Kompression.

Dekorative Bilder können andere Anforderungen haben

Ein rein dekoratives Element braucht eventuell keinen beschreibenden Alt-Text.

Eine erklärende Grafik dagegen sehr wohl.

Diese Entscheidung hängt von der Funktion des Bildes ab.

Bildformat löst keine Barrierefreiheit

Ein perfekt komprimiertes AVIF ohne sinnvolle textliche Alternative bleibt für bestimmte Nutzer unzugänglich.

Technische Optimierung und inhaltliche Zugänglichkeit sind unterschiedliche Ebenen.

Was ist das beste Format für WordPress?

Auch hier:

kein universeller Gewinner.

Ein sinnvoller Ansatz lautet:

Motivklasse bestimmen
↓
Master behalten
↓
geeignete Webvarianten erzeugen
↓
WordPress passend ausliefern

Nicht:

alles grundsätzlich in Format X

Eine pragmatische Grundstrategie

Fotos:

WebP oder AVIF
mit geeignetem Fallback beziehungsweise Workflow

Screenshots:

PNG oder geeignet komprimiertes modernes Format

Logos:

SVG

falls technisch und sicher sinnvoll.

Transparente Rastergrafiken:

PNG / WebP / AVIF

abhängig vom Motiv.

JPG als robuster Fallback

In bestimmten Pipelines kann JPG weiterhin eine sehr praktische Basis für fotografische Inhalte sein.

Das Format ist keineswegs „falsch“, nur weil neuere Möglichkeiten existieren.

PNG als Master für bestimmte KI- und Grafikworkflows

Wenn ein Generator oder Grafikprogramm hochwertige PNGs liefert:

kann dieses PNG sinnvoll als Master dienen.

Für die Website entstehen kleinere Derivate.

SVG als Original für Logos

Wenn ein Logo als Vektor entwickelt wurde:

SVG beziehungsweise die ursprüngliche Vektordatei erhalten.

Nicht nur:

ein 400-Pixel-PNG.

Sonst geht der Skalierungsvorteil verloren.

Masterformate sind Produktionsassets

Webformate sind Delivery Assets.

Diese Unterscheidung ist sehr hilfreich.

Production Asset
↓
Bearbeitung / Archiv

Delivery Asset
↓
Website

Bildformat für Social Media kann wieder anders sein

Plattformen verarbeiten Bilder teilweise selbst erneut.

Daher kann für Social Sharing eine robuste JPG- beziehungsweise PNG-Ausgabe sinnvoll sein, während die Website ein moderneres Format verwendet.

Ein einziges Dateiformat muss nicht alle Kanäle bedienen.

E-Mail wiederum besitzt andere Anforderungen

Nicht jeder E-Mail-Client verarbeitet dieselben modernen Webmöglichkeiten gleich.

Ein Website-Asset-System kann daher separate E-Mail-Derivate erzeugen.

Das zeigt erneut:

Motiv
≠
eine einzige Datei

Screenshots für Dokumentation

Bei technischer Dokumentation ist Lesbarkeit besonders wichtig.

Ein Screenshot mit Text sollte:

nicht unnötig stark komprimiert

und:

nicht unter seine benötigte Darstellungsgröße skaliert

werden.

Retina beziehungsweise hohe Pixeldichte

Ein Screenshot wird im Layout vielleicht:

600 CSS-Pixel

breit dargestellt.

Eine Quelldatei mit mehr Pixeln kann auf hochauflösenden Displays schärfer wirken.

Das bedeutet aber nicht:

immer viermal größer ausliefern.

Responsive Images helfen beim Ausgleich.

Schärfe und Datenmenge balancieren

zu kleine Quelle
→ unscharf

viel zu große Quelle
→ Datenverschwendung

passende Quelle
→ scharf + effizient

Das ist das Ziel.

Bilder können mehrere Optimierungsschritte durchlaufen

Ein typischer Workflow:

Original
↓
Crop
↓
Resize
↓
Farbkonvertierung
↓
Format-Encoding
↓
Metadatenbereinigung
↓
Qualitätsprüfung
↓
Webdatei

Die Reihenfolge kann je nach Pipeline variieren.

Wichtig ist:

Formatwahl ist nur ein Teil der Bildoptimierung.

Bildoptimierung besteht aus mehreren Ebenen

richtiges Motiv
+
richtiger Crop
+
passende Pixelabmessung
+
geeignetes Format
+
sinnvolle Kompression
+
responsive Auslieferung

Erst zusammen entsteht eine wirklich optimierte Websitegrafik.

Das erklärt einen häufigen Irrtum

Wir nutzen WebP, also sind unsere Bilder optimiert.

Nein.

Ein:

6000 × 4000 WebP
mit 5 MB

für ein 300-Pixel-Thumbnail ist weiterhin schlecht optimiert.

Das richtige Format allein reicht nicht.

Andersherum

Ein gut skaliertes:

600 × 400 JPG
mit 80 KB

kann für denselben Zweck hervorragend funktionieren.

Modernität des Formats ist nur ein Faktor.

Messen statt Dogma

Das ist die beste Strategie.

Bild
↓
mehrere sinnvolle Varianten
↓
Dateigröße + Qualität vergleichen
↓
Preset wählen

Danach automatisieren.

Presets dürfen später verbessert werden

Heute:

article-photo-v1

Später:

article-photo-v2

mit:

besserem Encoder,

anderen Qualitätswerten,

neuem Zielformat.

Die Originalbilder müssen nicht neu erstellt werden.

Dafür braucht man die Masterdateien

Mit vorhandenen Masters kann die gesamte Website später neu optimiert werden.

Masters
↓
neue Pipeline
↓
neue Webformate

Das ist langfristig ein enormer Vorteil.

Bildformate verändern sich

Heute verwendete Delivery-Formate müssen nicht in zehn Jahren die beste Wahl sein.

Deshalb sollte das Bildarchiv nicht ausschließlich aus stark komprimierten aktuellen Webdateien bestehen.

Formate sind austauschbare Auslieferungstechnologie

Der eigentliche Wert ist:

Originalbild
+
Metadaten
+
Bearbeitungshistorie

Das Delivery-Format kann später neu erzeugt werden.

Das passt zum Prinzip moderner Content-Infrastruktur

Content
→ unabhängig von Theme

Bildmaster
→ unabhängig vom Delivery-Format

Design Token
→ unabhängig vom konkreten Farbwert

Abstraktion erleichtert spätere Veränderungen.

Häufige Fehler bei Bildformaten

Einige Probleme treten immer wieder auf.

Fotos als riesige PNGs

Logos nur als kleine JPGs

Originalbilder überschreiben

6000-Pixel-Dateien als Thumbnail laden

stark komprimierte JPGs mehrfach neu speichern

Dateiendung nur umbenennen

jedes Bild grundsätzlich im selben Format ausgeben

Transparenz unnötig mit riesigem PNG lösen

SVG aus unbekannter Quelle ungeprüft hochladen

Metadaten ungeprüft veröffentlichen

Fehler: PNG ist immer höchste Qualität

PNG ist verlustfrei.

Aber:

eine 8-MB-Datei ist nicht automatisch das bessere Websitebild als ein 300-KB-Foto ohne sichtbaren Qualitätsverlust.

Qualität und Effizienz müssen gemeinsam betrachtet werden.

Fehler: WebP ist immer besser

Vielleicht.

Vielleicht nicht.

Ein Logo bleibt als SVG sinnvoller.

Ein bereits winziges PNG spart möglicherweise kaum etwas.

Die Pipeline muss den realen Nutzen prüfen.

Fehler: AVIF muss überall eingesetzt werden

Ein modernes Format kann große Vorteile bieten.

Aber zusätzlicher:

Encodingaufwand,

Speicher,

Fallbacklogik

kann bei kleinen Websites mehr Komplexität als Nutzen bringen.

Fehler: JPG ist veraltet und deshalb schlecht

JPG ist technisch älter.

Aber sehr gut verstanden und für bestimmte fotografische Workflows weiterhin brauchbar.

Alt bedeutet nicht automatisch nutzlos.

Fehler: Bilder nur über CSS kleiner machen

Original 4000 px
↓
CSS width 400 px

reduziert die übertragene Datei nicht automatisch.

Die Ressource selbst sollte passend dimensioniert sein.

Fehler: Original nach Kompression löschen

Damit verliert man die Grundlage für:

neue Formate,

andere Crops,

größere Designs,

zukünftige Optimierung.

Master behalten.

Fehler: Websitebild erneut als Bearbeitungsquelle verwenden

Wenn möglich:

immer Master.

Nicht:

bereits komprimierte Thumbnailversion.

Fehler: Bildformat nach Dateigröße allein wählen

Ein 40-KB-Bild ist wertlos, wenn:

Gesichter zerstört,

Text unlesbar,

Produktdetails verschwunden

sind.

Performanceziele brauchen Qualitätsgrenzen.

Praktischer Entscheidungsweg

Eine einfache Logik kann lauten:

Ist es Vektorgrafik?
├── ja
│   ↓
│   SVG prüfen
│
└── nein
    ↓
    Rasterbild

Dann:

Braucht das Bild Transparenz?
├── ja
│   ↓
│   PNG / WebP / AVIF prüfen
│
└── nein
    ↓
    weiter

Dann:

Ist es überwiegend Fotografie?
├── ja
│   ↓
│   AVIF / WebP / JPG vergleichen
│
└── nein
    ↓
    PNG / moderne Rasterformate prüfen

Ein noch einfacherer Merksatz

Logo
→ SVG

Foto
→ modernes komprimiertes Fotoformat

Screenshot
→ saubere Rasterkompression

Master
→ hochwertig behalten

Das deckt bereits sehr viele Alltagssituationen ab.

Ein sinnvoller Website-Workflow

Originalbild
↓
Master speichern
↓
Bildtyp erkennen
↓
Crop-Preset
↓
Zielgrößen
↓
Format
↓
Kompression
↓
responsive Varianten
↓
WordPress

Das ist wesentlich besser als:

Bild
↓
irgendwie speichern
↓
hochladen

Automatisierte Bildpipeline

Bei größeren Projekten:

Master Asset
↓
Queue
↓
Image Worker
↓
Resize
↓
Format-Encoding
↓
Qualitätsprüfung
↓
Asset Storage
↓
WordPress / CDN

Damit kann dieselbe Logik auf tausende Bilder angewendet werden.

KI-generierte Bilder passen hervorragend in diese Pipeline

Text-to-Image
↓
Auswahl
↓
Inpainting
↓
Master
↓
Weboptimierung
↓
WordPress

Die generative Phase endet also nicht mit:

„Bild fertig“.

Danach beginnt die klassische Medienproduktion.

Bild-KI und Weboptimierung sind getrennte Aufgaben

Das Bildmodell entscheidet:

Was ist auf dem Bild?

Die Medienpipeline entscheidet:

Wie wird dieses Bild
effizient ausgeliefert?

Diese Trennung ist sehr sinnvoll.

Was du dir über Bildformate fürs Web merken solltest

Es gibt kein universell bestes Bildformat für Websites.

Die richtige Wahl hängt von:

Bildinhalt

Transparenz

Qualitätsanforderung

Dateigröße

Skalierbarkeit

Verarbeitungsworkflow

ab.

Die erste wichtige Unterscheidung lautet:

Rastergrafik
↔
Vektorgrafik

Rasterbilder bestehen aus Pixeln.

Typische Formate sind:

JPG

PNG

WebP

AVIF

Vektorgrafiken beschreiben dagegen geometrische Formen.

Das wichtigste Webformat dafür ist:

SVG

Dadurch können Logos und Icons praktisch beliebig skaliert werden, ohne pixelig zu werden.

Bei Rasterbildern ist außerdem die Art der Kompression wichtig.

verlustfrei
→ Originalinformation bleibt erhalten

verlustbehaftet
→ Information wird zugunsten kleinerer Dateien reduziert

JPG eignet sich besonders für Fotografien und verwendet typischerweise verlustbehaftete Kompression.

PNG arbeitet verlustfrei und eignet sich besonders für:

Screenshots,

Grafiken,

Transparenz.

Bei großen Fotos kann PNG allerdings unnötig große Dateien erzeugen.

WebP kann sowohl verlustbehaftet als auch verlustfrei arbeiten und unterstützt Transparenz. Damit deckt es viele klassische JPG- und PNG-Anwendungsfälle ab.

AVIF ist ein modernes, sehr effizientes Rasterformat, das insbesondere bei stark komprimierten Webbildern interessante Dateigrößen ermöglichen kann.

SVG eignet sich dagegen für:

Logos

Icons

Diagramme

geometrische Illustrationen

und sollte dort nicht unnötig durch Rasterformate ersetzt werden.

Der zweite wichtige Grundsatz lautet:

Das Webformat sollte nicht mit dem Masterformat verwechselt werden.

hochwertiges Master
↓
Webvarianten

Das Original sollte erhalten bleiben.

Denn:

stark komprimiertes Webbild
↓
kann verlorene Information
nicht wiederherstellen

Aus dem Master können später jederzeit neue Formate und Größen erzeugt werden.

Das ist besonders wichtig bei:

Fotografien,

KI-Bildern,

Produktfotos,

Grafiken.

Ein dritter wichtiger Punkt ist:

Das richtige Format allein macht ein Bild noch nicht weboptimiert.

Format
+
Abmessungen
+
Kompression
+
Crop
+
responsive Auslieferung
↓
optimiertes Webbild

Ein 5-MB-WebP ist für ein kleines Thumbnail genauso ineffizient wie ein 5-MB-JPG.

Deshalb sollte zuerst geprüft werden:

Wie groß wird das Bild tatsächlich dargestellt?

Danach entstehen passende Pixelgrößen.

Mit Responsive Webdesign können unterschiedliche Varianten ausgeliefert werden.

Smartphone
→ kleinere Datei

Desktop
→ größere Datei

Damit muss nicht jeder Besucher dieselbe riesige Ressource laden.

Auch unterschiedliche Bildausschnitte können sinnvoll sein.

Desktop
→ breites Hero

Mobil
→ Hochformat

Das ist Art Direction.

Bei WordPress können aus einem Upload mehrere Bildgrößen entstehen. Welche zusätzlichen Formatkonvertierungen und Funktionen verfügbar sind, hängt von der jeweiligen CMS- und Serverkonfiguration ab.

Ein systematisches Medienkonzept sollte daher weniger in einzelnen Dateien und stärker in Assets denken.

Asset
↓
Master
↓
├── Hero
├── Card
├── Thumbnail
└── Social

Jede Variante kann passend:

skaliert,

zugeschnitten,

komprimiert

werden.

Für größere Projekte lohnt sich eine automatisierte Pipeline.

Master
↓
Image Worker
↓
Preset
↓
Webvarianten
↓
Qualitätsprüfung
↓
Auslieferung

Dabei kann ein Preset beispielsweise heißen:

article-hero

statt bei jedem Bild erneut:

Breite,

Qualität,

Format

manuell festzulegen.

Das ist besonders bei vielen Websites und automatisierter Contentproduktion wertvoll.

Ein weiterer wichtiger Punkt betrifft Metadaten.

Fotos können beispielsweise enthalten:

Aufnahmedatum

Kameradaten

GPS

Vor Veröffentlichung sollte bewusst entschieden werden, welche dieser Informationen erhalten bleiben.

Und schließlich gilt bei der Formatwahl:

nicht dem Format folgen
↓
dem Bild folgen

Ein Logo braucht andere Eigenschaften als ein Portrait.

Ein Screenshot andere als eine Landschaft.

Eine KI-Illustration andere als ein Icon.

Der beste Entscheidungsweg lautet deshalb:

Motiv verstehen
↓
technische Anforderungen bestimmen
↓
geeignetes Format wählen
↓
passend skalieren
↓
komprimieren
↓
im realen Layout prüfen

Damit wird die Wahl des Bildformats nicht zu einer Glaubensfrage zwischen JPG, WebP oder AVIF.

Sondern zu einer nachvollziehbaren technischen Designentscheidung.