Bilder für die Website optimieren: Größe, Format und Komprimierung für schnelle Seiten

Schritt eins: die richtige Pixelgröße

Die größte Ersparnis entsteht, wenn Sie keine Pixel verschicken, die niemand sieht. Eine moderne Handykamera macht Fotos mit 4000 Pixeln Breite und mehr. Eine Inhaltsspalte auf einer Website ist meist 700 bis 1200 Pixel breit; selbst auf einem hochauflösenden Bildschirm braucht ein Bild dort höchstens etwa das Doppelte. Ein Foto mit 1600 bis 2000 Pixeln an der langen Seite wirkt fast überall scharf und hat nur einen Bruchteil der Pixel des Originals.

Leiten Sie die Größe aus dem Layout ab: Wie breit wird das Bild auf einem großen Bildschirm angezeigt? Verdoppeln Sie das für hochauflösende Displays, und Sie haben ein sinnvolles Maximum. Bildschirmbreite Titelbilder brauchen bis zu 2400 Pixel, Vorschaubilder in einem Raster oft nicht mehr als 600.

Stellen Sie in „Bilder komprimieren“ unter „Max. Kantenlänge“ die längste Seite ein, die Sie wollen; der Bereich reicht von 720 bis 4096 Pixeln. „Bildgröße ändern“ gibt mehr Kontrolle, wenn ein Bild exakte Maße haben muss, etwa eine feste Breite für eine Newsletter-Vorlage.

Schritt zwei: das richtige Format

JPG ist das klassische Format für Fotos: klein, überall unterstützt, aber ohne Transparenz. PNG speichert Pixel verlustfrei und eignet sich für Screenshots, Logos und Grafiken mit scharfen Kanten und wenigen Farben, macht Fotos aber sehr groß. WebP und AVIF sind neuere Formate, die jeder aktuelle Browser anzeigt. Bei gleicher sichtbarer Qualität sind WebP-Dateien meist deutlich kleiner als JPG, AVIF-Dateien oft noch kleiner; beide unterstützen Transparenz.

Für Logos, Icons und einfache Illustrationen kommt SVG infrage, ein Vektorformat, das in jeder Größe scharf bleibt und oft nur wenige Kilobyte hat. SVG-Dateien aus Grafikprogrammen enthalten meist Editor-Daten, die Browser nicht brauchen; „SVG optimieren“ entfernt sie und streicht dabei auch Skripte und externe Verweise.

• Fotos: WebP oder AVIF, JPG wo ein älteres System es verlangt
• Screenshots und Grafiken mit Text: PNG, am besten als verlustbehaftetes PNG mit reduzierter Farbpalette
• Logos und Icons: SVG
• Fotos mit Transparenz, etwa freigestellte Produkte: WebP, AVIF oder PNG

Schritt drei: genug Komprimierung, nicht zu viel

Verlustbehaftete Formate werfen Details weg, die das Auge kaum bemerkt. Wie viel, bestimmt die Qualitätseinstellung. Bei JPG sind Werte zwischen etwa 75 und 85 Prozent ein üblicher Kompromiss für Webfotos; darunter erscheinen Blockartefakte an Kanten und im Himmel. AVIF nutzt eine andere Skala: Bei Toolula liegt der Standard bei 60 Prozent, was ähnlich aussieht wie eine viel höhere JPG-Einstellung.

Statt zu raten, urteilen Sie mit dem Auge: Komprimieren Sie ein typisches Bild, öffnen Sie es bei 100 Prozent neben dem Original und achten Sie auf feine Details, Gesichter, Text und weiche Verläufe. Toolula zeigt neben jeder Datei die neue Größe, und die Vorher-nachher-Ansicht vergleicht beide Fassungen direkt.

Verlangt ein System eine maximale Dateigröße pro Bild, wählen Sie „Zielgröße“ und tragen Sie sie ein. Toolula sucht die höchste Qualität, die noch passt, und verkleinert die Pixelmaße nur, wenn selbst eine niedrige Qualität zu groß ist. Für Screenshots nutzt die PNG-Ausgabe bis zu 256 Farben mit sorgfältigem Dithering; Text bleibt scharf, und die Dateien werden oft um ein Mehrfaches kleiner als das Original-PNG.

Metadaten, Farbe und Ausrichtung

Kamerafotos enthalten EXIF-Daten: Kameramodell, Belichtung, oft die GPS-Position der Aufnahme. Auf einer Website ist das bestenfalls Ballast und schlimmstenfalls ein Datenschutzproblem, etwa bei einem Foto aus der eigenen Wohnung. „Bild-Metadaten entfernen“ ist in Toolulas Bildwerkzeugen standardmäßig eingeschaltet; lassen Sie es für Webbilder so. Der Leitfaden „Metadaten entfernen vor dem Teilen“ erklärt, was in diesen Feldern steht.

Farbprofil und Ausrichtung lohnt es sich zu behalten. „EXIF-Daten entfernen“ von Toolula behält das ICC-Profil und bei gedrehten JPGs einen minimalen Ausrichtungseintrag, damit das Foto weder mit falschen Farben noch seitlich gekippt angezeigt wird.

HTML-Details, die zählen

Wenn Sie das HTML Ihrer Seiten bearbeiten oder Ihr Redaktionssystem es erlaubt, machen ein paar Attribute einen messbaren Unterschied. Geben Sie Bildern immer die Attribute width und height mit. Dann reserviert der Browser den Platz, bevor das Bild ankommt, und der Text springt beim Laden nicht nach unten – eine Verschiebung, die Google als Cumulative Layout Shift misst.

Fügen Sie Bildern weiter unten auf der Seite loading="lazy" hinzu, damit sie erst geladen werden, wenn der Besucher in ihre Nähe scrollt. Nicht für das Hauptbild oben: Es ist oft der Largest Contentful Paint, der Moment, an dem Google misst, wie schnell eine Seite erscheint, mit 2,5 Sekunden als Grenze für ein gutes Ergebnis. Dieses Bild soll so früh wie möglich laden.

Mit srcset und sizes kann der Browser zwischen mehreren Breiten desselben Bildes wählen und auf dem Handy die kleine, am Desktop-Monitor die große Fassung laden. Viele Redaktionssysteme erzeugen diese Varianten automatisch, wenn Sie ein ausreichend großes Original hochladen.

Das Ergebnis messen

Optimierung lässt sich leichter durchhalten, wenn man die Wirkung sieht. Googles kostenloses PageSpeed Insights testet eine Seite so, wie ein Handy über eine mobile Verbindung sie sieht, nennt den Largest Contentful Paint und listet Bilder, die größer sind als nötig oder ein modernes Format nutzen könnten. Testen Sie vor und nach dem Optimieren, und Sie sehen den Unterschied, statt zu raten.

In den Entwicklerwerkzeugen des Browsers listet der Netzwerk-Tab jede geladene Datei mit ihrer Größe. Sortieren Sie nach Größe: Meist stehen oben Bilder, und das allererste ist das, um das Sie sich kümmern sollten. Eine typische Artikelseite mit Titelbild und einer Handvoll Fotos lässt sich in der Regel von mehreren Megabyte auf deutlich unter eines bringen, ohne dass jemand einen Qualitätsunterschied bemerkt.

Eine Routine für jeden Upload

Der Alternativtext ist kein Geschwindigkeitsfaktor, gehört aber zu jedem Webbild: Er beschreibt das Bild für Screenreader-Nutzer und für Suchmaschinen. Der „KI-Alt-Text-Generator“ von Toolula schlägt auf Ihrem Gerät eine Beschreibung vor, die Sie anpassen können.

• Die längste Seite aus dem Layout ableiten, meist 1600 bis 2000 Pixel für Inhaltsbilder.
• WebP oder AVIF für Fotos, PNG für Screenshots, SVG für Logos wählen.
• Komprimieren und ein Bild bei 100 Prozent mit dem Original vergleichen.
• Das Entfernen der Metadaten eingeschaltet lassen.
• Einen sprechenden Dateinamen wählen und für jedes Bild einen Alternativtext schreiben.

Häufig gestellte Fragen