Website-Bilder verkleinern, ohne sie unscharf zu machen

Schau zuerst nach, wo das Bild erscheinen soll: breite Kopfabbildung, kleine Blogkarte oder schmale Inhaltsgrafik. Das Verhältnis von Breite und Höhe bestimmt, welcher Ausschnitt sinnvoll ist. Ein Motiv, das nur am äußeren Rand liegt, kann beim schmalen Kartenformat verschwinden.

Unterscheide die angezeigte Größe im Layout von den Pixelmaßen der Datei. Ein Bildplatz mit 600 CSS-Pixeln Breite kann auf einem Gerät mit höherer Pixeldichte mehr Bildpunkte nutzen. In einem fiktiven Planungsbeispiel würden 1200 Bildpunkte die doppelte Dichte für diesen Bildplatz abdecken. Das ist ein Rechenbeispiel, keine pauschale Exportpflicht.

Google web.dev erläutert diesen Zusammenhang von Bildabmessung, Layout und Pixeldichte. Bei wechselnden Bildplätzen kann eine technisch passende Auswahl mehrerer Größen sinnvoll sein. Du musst dafür aber nicht ohne konkreten Bedarf viele fast gleiche Dateien erzeugen. Kläre mit der betreuenden Person, welche Varianten die Website tatsächlich benutzt.

Lege das Original unverändert ab. Schneide die Arbeitskopie so zu, dass der wichtige Bildinhalt im vorgesehenen Format erhalten bleibt. Erst danach reduzierst du die Pixelmaße auf eine sinnvolle Größe. Wenn du eine bereits kleine Datei stark vergrößerst, entstehen dadurch keine aufgenommenen Details, die vorher fehlten.

Prüfe neben dem Hauptmotiv auch Randbereiche: Köpfe, Produkte oder eine entscheidende Handlung dürfen nicht unbeabsichtigt abgeschnitten werden. Eine reine Dateigrößenprüfung entdeckt solche Fehler nicht. Teste den Ausschnitt deshalb direkt an der Karte oder Kopfabbildung, für die er gedacht ist.

1. Original behalten und eine neue Arbeitskopie anlegen.
2. Zielverhältnis und wichtigen Motivbereich bestimmen.
3. Passenden Ausschnitt auswählen.
4. Pixelmaße passend zum tatsächlichen Einsatz wählen.
5. Eine klar benannte Exportfassung erzeugen.

Ein detailreiches Foto und eine Grafik mit scharfen Kanten brauchen nicht dieselbe Behandlung. WebP kann für Fotos eine kompakte Ausgabe ermöglichen; auch andere Formate können je nach Motiv und technischen Anforderungen passen. Transparenz, Kompatibilität und mögliche Bearbeitung sind zusätzliche Kriterien. Eine Dateiendung allein garantiert keine kleine oder gute Datei.

Verlustbehaftete Kompression verändert Bildinformationen. Eine höhere Einstellung macht die Datei häufig größer, ist aber keine zwischen verschiedenen Programmen einheitliche Qualitätsskala. Exportiere zwei sinnvolle Varianten und vergleiche beide bei gleicher Darstellung. Achte besonders auf feine Strukturen, harte Kanten und gleichmäßige Farbflächen.

Google web.dev empfiehlt, den Kompromiss zwischen Dateigröße und sichtbarer Qualität am konkreten Bild zu prüfen. Sehr starke Kompression kann Artefakte erzeugen. Eine etwas größere, deutlich bessere Fassung kann daher die richtige Entscheidung sein. Nicht jede Verringerung der Dateigröße ist ein praktischer Gewinn.

Für diesen Beitrag haben wir das neu erzeugte KI-Heromotiv als PNG-Original und als WebP-Ausgabe gemessen. Beide Dateien haben 1536 × 1024 Bildpunkte. Der WebP-Export verwendet die für diesen Beitrag gewählte Kompression; das Ergebnis ist keine verlustfreie Gleichheit mit dem Original.

Die Datei ist damit um rund 93,3 Prozent kleiner. Berechnet wurde: (1 − WebP-Dateigröße ÷ PNG-Dateigröße) × 100. Die Zahlen gelten nur für dieses Motiv und diese beiden Exporte. Das Original und die Erzeugungsanweisung sind redaktionell dokumentiert.

Diese Ersparnis ist keine Messung einer um denselben Prozentsatz schnelleren Website. Verbindung, Zwischenspeicher, weitere Dateien und die Darstellung beeinflussen den tatsächlichen Seitenaufbau. Um die Ladezeit zu beurteilen, muss die echte Seite unter passenden Bedingungen geprüft werden.

Öffne die tatsächliche Seite in einer großen und einer schmalen Ansicht. Wird das richtige Motiv gezeigt? Ist der Ausschnitt sinnvoll? Sind bei normaler Betrachtung störende Kanten oder matschige Details sichtbar? Zoome zusätzlich gezielt in schwierige Bereiche, ohne eine extreme Vergrößerung mit der normalen Nutzung zu verwechseln.

Wenn ein Bild unscharf wirkt, prüfe zuerst die tatsächlich geladene Datei. Vielleicht wird eine zu kleine Variante auf einem großen Platz benutzt oder das Layout schneidet anders zu als erwartet. Mehr Kompressionsqualität allein repariert weder eine falsche Größe noch einen ungeeigneten Ausschnitt.

• Die geladene Datei gehört wirklich zu diesem Bildplatz.
• Wichtige Motive bleiben in der schmalen Ansicht erhalten.
• Feine Details sind bei der vorgesehenen Darstellung ausreichend klar.
• Abmessungen im Layout passen zum exportierten Verhältnis.
• Der neue Export wird nach dem Austausch tatsächlich ausgeliefert.

Notiere Original, Zielgröße, Format und die tatsächlich benutzte Fassung. So kannst du beim nächsten Bild auf eine sinnvolle Entscheidung zurückgreifen, ohne jeden alten Qualitätswert ungeprüft zu übernehmen. Lösche das Original nicht nur deshalb, weil die Website jetzt eine kleinere Kopie nutzt.

Für diesen Ablauf ist keine zusätzliche Vorlagendatei nötig. Die Exportfolge und die Sichtprüfung stehen direkt im Text. Wenn du den Aufbau deiner Website überarbeiten möchtest, findest du bei TDO Media Informationen zu Webseiten. Bilder sind dabei ein eigener prüfbarer Teil des Gesamtauftritts.