Prüfpunkt co2.bild.altformatBilder
Wie wandle ich Bilder in WebP oder AVIF um?
Einzelne Bilder wandeln Sie mit frei verfügbaren Werkzeugen selbst um. Im Browser macht das Squoosh, ohne das Bild auf einen Server zu laden. Das Bildprogramm GIMP speichert WebP und AVIF, und für viele Dateien auf einmal gibt es von Google das Kommandozeilenwerkzeug cwebp. Am Ende steht der Vergleich: Die neue Datei soll kleiner sein und gleich aussehen.
Squoosh: im Browser, ohne Upload
Squoosh ist eine Web-App von Google Chrome Labs, erreichbar unter squoosh.app. Sie verkleinert Bilder und wandelt sie in andere Formate um; im Quelltext stecken Encoder unter anderem für AVIF, WebP, MozJPEG und OxiPNG sowie eine Funktion, die die Pixelmaße verkleinert. So bringen Sie ein Foto im selben Schritt auf die Breite, in der es auf Ihrer Seite erscheint. Laut Projektbeschreibung schickt Squoosh das Bild an keinen Server, die Komprimierung läuft auf Ihrem Rechner. Über Google Analytics erfasst die App unter anderem Besucherdaten und die Dateigröße vorher und nachher.
GIMP: das freie Bildprogramm
GIMP öffnet und speichert WebP seit Version 2.10, samt Animation, Farbprofil und Metadaten. AVIF kam mit Version 2.10.22 im Oktober 2020 dazu, ebenfalls zum Öffnen und Speichern. Damit bringen Sie ein Bild vor dem Hochladen auf die richtige Breite und sichern es im neuen Format. Für Fotos genügt die verlustbehaftete Einstellung. Grafiken mit Schrift oder scharfen Kanten, die als Rasterbild bleiben müssen, speichern Sie verlustfrei.
cwebp: viele Dateien auf einmal
Google stellt für WebP das Kommandozeilenwerkzeug cwebp bereit. Es liest PNG, JPEG, TIFF und WebP. Der Befehl cwebp -q 80 foto.jpg -o foto.webp speichert ein Foto mit der Qualitätsstufe 80; die Skala reicht von 0 bis 100, ohne Angabe gilt 75. Mit -resize 1200 0 verkleinert cwebp das Bild auf 1.200 Pixel Breite und rechnet die Höhe passend aus, mit -lossless speichert es verlustfrei. In einer Schleife der Kommandozeile wandelt derselbe Befehl einen ganzen Ordner um.
Zwei Breiten für srcset aus einem Original
Für hochauflösende Bildschirme braucht ein Bild eine zweite Fassung in doppelter Breite, die der Browser über srcset wählt. Erzeugen Sie beide aus demselben Original, etwa mit cwebp -q 80 -resize 600 0 und mit -resize 1200 0, und benennen Sie die Dateien nach ihrer Breite. In Squoosh und GIMP speichern Sie das Bild zweimal mit unterschiedlicher Breite. So bekommt jeder Bildschirm die Datei, die er braucht.
So gehen Sie es an
- Suchen Sie das Original heraus, aus der Kamera oder aus dem Grafikprogramm, nicht die Datei, die schon auf der Website liegt.
- Legen Sie die Breite fest, in der das Bild erscheint, und die doppelte Breite für hochauflösende Bildschirme.
- Wandeln Sie ein typisches Foto mit zwei oder drei Qualitätsstufen um und vergleichen Sie Dateigröße und Aussehen.
- Übernehmen Sie die Stufe für die übrigen Bilder und laden Sie die neuen Dateien mit srcset oder im picture-Element hoch.
Mehr zu diesem Thema
Weiter im Prüfbereich CO₂ & EmpCo
- Was darf meine Website seit dem 27. September 2026 über die Umwelt sagen?Seit 27.09.2026 gelten in Deutschland und Österreich die EmpCo-Regeln im UWG: was unzulässig ist, was erlaubt bleibt, warum Übergangsregeln nur Waren betreffen.
- Spart eine schlanke Website Geld, und was sagt der CO₂-Wert wirklich?Was eine schwere Website kostet: beim Hoster Cent, beim Kunden Wartezeit. Was der CO₂-Wert je Aufruf bedeutet, wo das Modell endet, wie KI-Anfragen dazu stehen.
- Woran erkennt die Prüfung, dass ein Bild breiter geliefert wird, als es angezeigt wird?Ist ein Bild breiter als seine Anzeige plus 10 %, meldet die Prüfung es mit Natur- und Anzeigebreite. Jedes kostet einen Punkt im CO₂-Punktwert, höchstens fünf.
- Warum wirkt ein Bild unscharf, und wie stellt die Prüfung das fest?Ist ein Inhaltsbild schmaler als 90 % der Breite, die seine Anzeige braucht, meldet die Prüfung einen Hinweis mit Natur- und nötiger Breite.
Dieser Prüfpunkt gehört zum Prüfbereich CO₂ & EmpCo; dort stehen alle Prüfpunkte im Überblick. Was die Prüfung insgesamt leistet, zeigt die Leistungsseite; wie ein Ergebnis zustande kommt, erklärt das Prüfverfahren. Alle Prüfbereiche im Überblick: Wissensbasis.
