JPG in WebP umwandeln

Warum WebP für Websites besser ist

Bilder machen auf den meisten Websites den größten Teil der Datenmenge aus. Jedes Kilobyte, das ein Besucher nicht laden muss, verkürzt die Ladezeit – besonders im Mobilfunk. Google bewertet mit den Core Web Vitals unter anderem, wie schnell das größte sichtbare Element erscheint (Largest Contentful Paint). Das ist sehr oft ein Bild.

WebP komprimiert effizienter als JPG. Es nutzt modernere Verfahren, um Flächen und Übergänge vorherzusagen, und braucht deshalb für dieselbe sichtbare Qualität weniger Daten. Alle aktuellen Browser – Chrome, Edge, Firefox und Safari – zeigen WebP problemlos an.

Unser Messwert: JPG gegen WebP

Wir haben ein 12-Megapixel-Foto (4,9 MB, JPG-Qualität 95) mit TinyThis in beide Formate gerechnet:

Bei voller Auflösung ist das WebP also rund ein Viertel kleiner als ein bereits gut optimiertes JPG. Für eine Website ist das Foto in Originalgröße natürlich immer noch zu groß – mehr dazu unten.

So wandelst du JPG in WebP um

1. Lade bis zu 50 JPGs hoch, per Drag & Drop oder Dateiauswahl.
2. TinyThis vergleicht JPG, PNG und WebP – „WebP“ ist für den Download vorausgewählt. „Ausgewogen“ passt für die meisten Fotos.
3. Setze unter „Größe ändern“ eine maximale Kante, die zu deiner Website passt, etwa 1920 oder 2560 Pixel für Header und 1280 Pixel für Bilder im Text.
4. Vergleiche Vorher und Nachher mit dem Schieberegler.
5. Lade alle WebP-Dateien als ZIP herunter und ersetze die JPGs auf deiner Website.

TinyThis nutzt libwebp mit „sharp YUV“. Das klingt technisch, hat aber einen sichtbaren Effekt: Rote und blaue Kanten, etwa Schrift auf Fotos oder bunte Kleidung, bleiben sauberer als bei einfachen Konvertern.

Wo WebP nicht passt

So gut WebP im Browser funktioniert, außerhalb davon ist JPG noch immer der Standard. Für E-Mail-Anhänge, Bewerbungsportale, Fotobücher und den Austausch mit Leuten, deren Software du nicht kennst, bleib besser bei JPG. Auch für dein Fotoarchiv solltest du die Original-JPGs behalten und WebP nur als Kopie für das Web erzeugen.

Und falls du schon WebP-Dateien hast, die nicht mehr ins Formular passen: WebP in JPG dreht das Ganze um.

Automatisch statt Handarbeit

Für einzelne Seiten oder einen Relaunch ist das Werkzeug oben ideal. Wenn regelmäßig neue Bilder dazukommen, lohnt sich Automatisierung:

• Das WordPress-Plugin komprimiert Bilder beim Hochladen, kann sie optional in WebP umwandeln und optimiert auch die bestehende Mediathek.
• Über die REST-API kannst du WebP-Umwandlung in eigene Shops, CMS oder Skripte einbauen.
• Ein kostenloses Konto enthält 100 automatische Optimierungen pro Tag.

Welche Pixelmaße für welche Stelle sinnvoll sind, erklärt der Ratgeber Bildgröße für Websites.

WebP auf der eigenen Website einbinden

In den meisten Content-Management-Systemen lädst du die WebP-Dateien einfach statt der JPGs hoch und tauschst sie in den Beiträgen aus. Bei selbst gebauten Seiten ersetzt du die Dateinamen im HTML. Ein paar Punkte machen den Unterschied:

• Sprechende Dateinamen: „rote-gartenbank-holz.webp“ hilft der Bildersuche mehr als „IMG_4711.webp“.
• Alternativtext pflegen: Der alt-Text beschreibt das Bild für Screenreader und Suchmaschinen. Die Umwandlung ändert daran nichts, aber ein Relaunch ist ein guter Anlass, ihn nachzuziehen.
• Breite und Höhe angeben: Mit width und height im img-Tag reserviert der Browser den Platz, und der Inhalt springt beim Laden nicht.
• Lazy Loading: Bilder weiter unten auf der Seite bekommen loading="lazy", das Hauptbild oben dagegen nicht – es soll so früh wie möglich laden.
• Mehrere Größen: Mit srcset lieferst du Smartphones eine kleinere Variante. Erzeuge dafür mit TinyThis einfach zwei Durchgänge, etwa mit 1280 und 2560 Pixeln.

Ob es sich gelohnt hat, siehst du mit Werkzeugen wie Google PageSpeed Insights: Hinweise wie „Bilder in modernen Formaten bereitstellen“ sollten danach verschwinden.