Bildoptimierung

Bildoptimierung verringert die Datenmenge, die zur Auslieferung eines Bildes nötig ist, und erhält dabei die Qualität, die der Einsatzzweck erfordert. Sie umfasst mehrere Schritte: ein passendes Format wählen, auf die Anzeigegröße skalieren, komprimieren, unnötige Metadaten entfernen und Bilder erst bei Bedarf laden.

Im Web betrifft die Optimierung auch die Auslieferung. Mit Responsive-Image-Markup (den Attributen srcset und sizes) wählt der Browser eine Datei, die zum Bildschirm passt. Lazy Loading verzögert Bilder außerhalb des sichtbaren Bereichs, und ein CDN liefert Dateien von einem nahe gelegenen Standort aus.

Das Ergebnis wird an der Dateigröße und an Kennzahlen zur Seitengeschwindigkeit gemessen, etwa Largest Contentful Paint, einem der Core Web Vitals von Google.

Bildformate umwandeln

Ein Formatwechsel bringt oft die größte Einsparung. Image Converter wandelt im Browser zwischen PNG, JPG und WebP um.

Warum Optimierung wichtig ist

Bilder sind oft der größte Teil einer Webseite. Zu große Bilder verlangsamen das Laden in Mobilfunknetzen, verbrauchen das Datenvolumen der Besucher und können die Werte für die Seitengeschwindigkeit senken. Kleinere Dateien erleichtern auch den Umgang mit Dokumentations-Repositorys, E-Mail-Anhängen und PDF-Exporten.

Optimierungstechniken

• Auf die größte Anzeigegröße skalieren, etwa 2× die CSS-Breite für Bildschirme mit hoher Pixeldichte.
• Das Format nach Inhalt wählen: PNG für flache UI, JPG oder WebP für Fotos.
• Eine verlustbehaftete Qualität von etwa 75-85 einstellen und vergrößerte Ausschnitte vergleichen.
• Nicht benötigte Metadaten entfernen, das Farbprofil aber behalten, wenn Farben wichtig sind.
• Bilder unterhalb des sichtbaren Bereichs per Lazy Loading laden.

Optimierung von Screenshots

Ein Retina-Screenshot eines 1440 Pixel breiten Fensters ist 2880 Pixel breit. Zeigt eine Dokumentationsseite ihn mit 720 CSS-Pixeln an, deckt eine Datei mit 1440 Pixeln 2×-Bildschirme ab und hat nur ein Viertel der Pixelzahl.

Wählen Sie in Temposhot zum Teilen JPG Export (Adjustable Quality) mit einer Qualität von 1 bis 100 (Standard 85), und behalten Sie PNG Export (Lossless) für Masterdateien bei. Website Capture speichert direkt als JPEG, PNG oder WebP.

Häufige Fehler

• Vollständige Retina-Aufnahmen für kleine Vorschaubilder hochladen.
• Text-Screenshots so stark komprimieren, dass die Buchstaben verschmieren.
• Alles unabhängig vom Inhalt in ein einziges Format umwandeln.
• Die einzige Kopie optimieren und dabei das Original verlieren.

Sie möchten jetzt ein Bild bearbeiten?

Verringern Sie die Dateigröße mit Image Compressor und prüfen Sie vorher die Pixelgröße mit Screenshot Resolution Checker.

Häufige Fragen

Sollte ich WebP für Screenshots auf meiner Website verwenden?

WebP erzeugt bei ähnlicher Qualität meist kleinere Dateien als PNG oder JPG und wird von aktuellen Browsern unterstützt.

Wie groß sollte ein Screenshot in der Dokumentation sein?

Etwa doppelt so breit wie seine angezeigte CSS-Breite. Das deckt Bildschirme mit hoher Pixeldichte ab, ohne Daten zu verschwenden.

Quellen

• Largest Contentful Paint (web.dev)
• Image compression (Wikipedia)

Weiterführende Ressourcen

• Exportformate: Optionen für PNG, JPG und WebP.
• Lazy Loading: Bilder außerhalb des sichtbaren Bereichs verzögert laden.