JPG in WebP umwandeln

Warum WebP für Websites die richtige Antwort ist

Bilder sind auf den meisten Websites der mit Abstand größte Teil der übertragenen Datenmenge – größer als HTML, CSS und JavaScript zusammen. Wer die Ladezeit ernsthaft senken will, fängt deshalb nicht bei den Skripten an, sondern bei den Bildern. WebP ist dabei der einzelne Schritt mit dem besten Verhältnis von Aufwand zu Wirkung: dieselben Bilder, ein anderes Format, ein Viertel bis ein Drittel weniger Daten.

Der Grund liegt im Verfahren. JPEG stammt von 1992 und teilt das Bild in Blöcke von acht mal acht Bildpunkten, die es einzeln beschreibt. WebP kam 2010 und nutzt zusätzlich die Vorhersage aus benachbarten Blöcken: Was sich aus der Umgebung ableiten lässt, muss nicht noch einmal gespeichert werden. Bei Flächen mit sanftem Verlauf – Himmel, Haut, unscharfer Hintergrund – ist das enorm effizient.

Was Sie beim Qualitätsregler beachten sollten

Die Zahl auf dem Regler bedeutet bei WebP nicht dasselbe wie bei JPG. WebP 80 sieht ungefähr so aus wie JPG 90, ist aber deutlich kleiner. Wer die gewohnte JPG-Zahl übernimmt, verschenkt also entweder Platz oder Qualität.

• Fotos für eine Website: 78 bis 85. Darunter werden Verläufe fleckig.
• Bilder mit Text oder Logo im Bild: 90 und aufwärts.
• Vorschaubilder und Thumbnails: 65 reicht völlig, bei der Anzeigegröße sieht niemand den Unterschied.

Wichtig ist die Reihenfolge: erst verkleinern, dann komprimieren. Ein Foto mit 4000 Pixel Kantenlänge auf einer Seite anzuzeigen, die es mit 1200 Pixeln darstellt, ist die teuerste Art, Daten zu verschwenden – keine Qualitätsstufe der Welt holt das wieder herein. Der Verkleinerer macht das in einem Durchgang.

So binden Sie WebP ein, ohne jemanden auszusperren

Für die allermeisten Projekte genügt inzwischen ein ganz normales Bild-Element mit der WebP-Datei darin. Der Anteil der Besucher ohne WebP-Unterstützung liegt seit Jahren im Promillebereich, und wer einen Browser von vor 2020 benutzt, hat größere Probleme als ein fehlendes Bild.

Wenn Sie trotzdem eine Rückfallebene wollen – etwa weil ein Kunde ausdrücklich danach fragt –, ist das picture-Element der richtige Weg. Der Browser nimmt die erste Quelle, die er versteht:

<picture>
  <source srcset="/bilder/hafen.webp" type="image/webp">
  <img src="/bilder/hafen.jpg" alt="Hafen bei Sonnenaufgang"
       width="1200" height="800" loading="lazy">
</picture>

Drei Dinge daran sind wichtiger, als sie aussehen. width und heightgehören immer ins img-Element, auch wenn die Größe später per CSS gesetzt wird: Der Browser kann damit den Platz reservieren, bevor das Bild da ist, und die Seite springt beim Laden nicht.loading="lazy" lädt Bilder erst, wenn sie in Sichtweite kommen – allerdings nicht beim ersten großen Bild ganz oben, das soll sofort kommen. Und der alt-Text ist keine Pflichtübung, sondern das, was Menschen mit Bildschirmleseprogramm und Suchmaschinen von dem Bild überhaupt mitbekommen.

Was WebP nicht besser kann

Zwei Erwartungen gehen regelmäßig daneben. Erstens: WebP macht ein zu großes Bild nicht plötzlich klein. Ein Foto mit 4000 Pixel Kantenlänge bleibt auch als WebP eine große Datei – die Ersparnis ist ein Drittel, nicht neunzig Prozent. Wer wirklich Daten sparen will, verkleinert zuerst.

Zweitens: WebP ist bei Bildern mit sehr wenigen Farben nicht automatisch die beste Wahl. Ein Logo aus vier Farben kann als PNG oder als SVG kleiner sein als jedes WebP. Bei Vektorgrafiken ist SVG ohnehin ungeschlagen, weil es unabhängig von der Anzeigegröße scharf bleibt und dabei oft nur wenige Kilobyte wiegt.

Der Haken, über den viele stolpern

WebP ist im Browser überall zu Hause und außerhalb davon oft nicht. Sobald Sie Bilder nicht für eine Website, sondern für ein Formular, eine Druckerei oder ein älteres Programm brauchen, ist WebP das falsche Format. Der Rückweg steht auf WebP in JPG.

Praktisch heißt das: WebP für alles, was auf Ihrer eigenen Website liegt. JPG für alles, was das Haus verlässt.

So gehen Sie vor

1. JPG-Dateien in die Fläche ziehen, gern den ganzen Ordner auf einmal.
2. Qualität nach der Liste oben einstellen.
3. Umwandeln. Die Ersparnis steht danach hinter jedem Dateinamen.
4. Über „Alle herunterladen“ gesammelt speichern.

Wie Sie die Bilder danach im HTML einbinden, damit ältere Browser trotzdem etwas sehen, und warum width und height im Bild-Tag stehen sollten, steht im Ratgeber unter Bilder für die Website optimieren.