Bilder fürs Web optimieren, ohne unnötig Qualität zu verlieren

Ein Bild mit mehreren Megabyte kann für den Druck perfekt und für eine Webseite völlig überdimensioniert sein. Optimierung bedeutet nicht, Qualität so lange zu zerstören, bis die Datei klein ist. Sie entfernt vor allem das, was die spätere Darstellung nicht braucht.

Praktische Reihenfolge: skalieren, Format wählen, komprimieren, visuell prüfen, passende Variante ausliefern.

Abmessungen zuerst

Ein Foto mit 6000 × 4000 Pixeln enthält 24 Millionen Pixel. Wird es nie breiter als 1200 Pixel angezeigt, ist die volle Auflösung meist unnötig.

Prüfe maximale Darstellungsbreite, mobile Varianten und hochauflösende Displays.

Abmessungen und Dateigröße

Zwei Bilder mit 1600 × 900 Pixeln können völlig unterschiedlich groß sein. Format, Motiv und Kompression spielen ebenfalls eine Rolle.

Format nach Inhalt wählen

Inhalt	Häufige Wahl
Foto	WebP, AVIF, JPEG
UI-Screenshot	WebP oder PNG
Vektorlogo	SVG
Transparenz	WebP, AVIF, PNG
maximale Kompatibilität	JPEG / PNG

WebP ist sehr breit unterstützt und kann verlustbehaftet, verlustfrei, transparent und animiert sein. AVIF bietet moderne Kompression. JPEG und PNG bleiben wichtige Referenz- und Fallback-Formate.

Verlustbehaftet oder verlustfrei

Verlustfreie Kompression erhält Pixeldaten. Verlustbehaftete Kompression entfernt visuell weniger wichtige Informationen.

Bei Web-Fotos kann ein vernünftiger Qualitätswert die Dateigröße stark reduzieren, ohne bei normaler Ansicht sichtbar zu schaden.

In echter Größe prüfen

Nicht nur bei 400% Zoom beurteilen. Prüfe Text, Farbverläufe, Haare, Laub und feine Details bei der tatsächlichen Anzeigegröße.

Erst skalieren, dann komprimieren

4000 × 3000 sind 12 Millionen Pixel. 800 × 600 sind 480.000. Das Potenzial zur Reduktion ist enorm.

Responsive Varianten

srcset, sizes und <picture> können geeignete Größen und Formate anbieten.

<picture>
  <source srcset="/bild.avif" type="image/avif">
  <source srcset="/bild.webp" type="image/webp">
  <img src="/bild.jpg" alt="Beschreibung">
</picture>

Screenshots und Text

Feine Linien und Schrift zeigen Artefakte schnell. Hier können verlustfreie Modi oder höhere Qualität sinnvoll sein.

Metadaten

EXIF kann Kamera, Datum und manchmal Standort enthalten. Behalte nur benötigte Informationen; Farbprofile sollten nicht entfernt werden, wenn dadurch die Darstellung leidet.

Gesamteffekt messen

Zehn Bilder mit 900 kB ergeben 9 MB. Bei durchschnittlich 180 kB bleiben 1,8 MB: 7,2 MB weniger.

Wiederholbarer Workflow

Import → Skalieren → Konvertieren → Komprimieren → Export

Die Reihenfolge ist wichtig. Das beste Webbild ist nicht zwangsläufig die kleinste Datei, sondern die kleinste Datei, die ihre visuelle Aufgabe korrekt erfüllt.