Bildoptimierung für das Web: Vollständiger Leitfaden

Langsames Laden von Seiten führt zu Conversions. Studien zeigen, dass 40 % der Nutzer eine Website verlassen, wenn dies länger als 3 Sekunden dauert. Die größte Ursache? Nicht optimierte Bilder. Ein einzelnes 5-MB-Foto auf Ihrer Homepage kann die Ladezeit selbst bei schnellen Verbindungen in die Höhe treiben.

Die Checkliste zur Bildoptimierung

Richtige Abmessungen – versenden Sie kein 4000-Pixel-Bild, bei dem Sie 800 Pixel anzeigen
Richtiges Format – modernes WebP/AVIF, Ersatz-JPG/PNG
Rechte Komprimierung – 75–85 % Qualität für Fotos, verlustfrei für Grafiken
Richtige Lieferung – verzögertes Laden, reaktionsfähiges SRCSet

Empfohlene Abmessungen im Jahr 2026

Heldenbilder: 1920×1080 (Full HD) oder 2560×1440 (2K) max.
Blogbeitrag Held: 1200×675 (16:9)
Produktfotos: 1500×1500 mit Zoom-Unterstützung, 800×800 Standardanzeige
Avatare: 256×256 (Miniaturansichten werden verkleinert)
Open Graph (soziales Teilen): 1200×630
Favicon: 32×32, 192×192, 512×512 PNG

Ändern Sie die Größe von Fotos vor dem Hochladen mit unserem Bildgrößenänderungstool auf diese Abmessungen.

Formate: wann was zu verwenden

WebP: Standard für 95 % der Webbilder. 25–35 % kleiner als JPG bei gleicher Qualität. Universelle Browserunterstützung.
AVIF: Noch kleiner (50 % kleiner als JPG). Für Heldenbilder verwenden. Neuere Browser unterstützen es.
JPG: Fotos ohne Transparenz. Hervorragende Kompatibilität.
PNG: Logos, Screenshots, alles mit Transparenz. Verlustfrei.
SVG: Vektorgrafiken, Symbole, einfache Illustrationen. Winzige Dateigröße, unbegrenzte Skalierung.

Konvertieren Sie zwischen diesen Formaten mit PDF7 Image Convert.

Kompression: Wie aggressiv ist zu aggressiv?

Für Fotos: Beginnen Sie mit einer Qualität von 85 %. Senken Sie den Wert für bandbreitenkritische Seiten auf 75 %. Unter 70 % werden Artefakte sichtbar. Verwenden Sie unser Bildkomprimierungstool, um die richtige Balance zu finden.

Responsive Bilder mit srcset

Stellen Sie kein 2K-Bild auf einem Telefon bereit. Verwenden Sie das srcset-Attribut von HTML:

Der Browser wählt das kleinste Bild aus, das passt. Sie benötigen 3 Größen pro Bild.

Verzögertes Laden

Fügen Sie loading="lazy" zu allen Bildern unterhalb des Falzes hinzu. Moderne Browser laden sie erst, wenn der Benutzer in die Nähe scrollt, wodurch bei jedem Seitenladen Bandbreite gespart wird.

Die 100-KB-Regel

Zielen Sie auf einzelne Bilder unter 100 KB. Heldenbilder können bis zu 200 KB groß sein. Wenn ein einzelnes Foto mehr als 500 KB groß ist, haben Sie einen Fehler gemacht – ändern Sie die Größe und komprimieren Sie es erneut.