Marc Coach Hoffmann
Premium Artikel

WebP-Format nutzen – So geht’s


Wenn Du die Ladezeit Deiner Website optimieren möchtest, dann bietet Dir das WebP-Format (Nerdfact: gesprochen wird es „Weppy“) einen starken Hebel, um die Dateigrößen Deiner Bilddateien, bei schwachem oder keinem Qualitätsverlußt, enorm zu reduzieren.

Google empfiehlt die Nutzung dieses Formates in seinem „PageSpeed Insights“-Tool und schlägt vor: „Bilder in modernen Formaten bereitstellen“.

Bilder in modernen Formaten bereitstellen

Teste Deine Seite selbst, unter: PageSpeed Insights.

Soweit so gut. Jetzt zeige ich Dir, wie Du ein Bild in das Format umwandelst und es in Deiner Website einbindest.

Bilddatei in WebP umwandeln

Da ich zahlreiche Blogartikel komplett am Smartphone schreibe und bearbeite, nutze ich für die Bildformatumwandlung das kostenlose Onlinetool squoosh.app.

Darin lädst Du einfach Deine Bilddatei hoch, wählst unter „Bottom“ WebP aus und touchst auf den blauen Download-Button unten-links.

Squoosh.app

Für die gewünschte Bildschärfe kannst Du mit den Prozentwerten spielen.

WebP Format in Website einbinden

Um ein Bild im WebP-Format auf Deiner Seite anzeigen zu lassen gibt es mehrere Möglichkeiten, von denen ich Dir die Einfachste zeige.

Anders als bei den bekannten .jpg-Dateien reicht es nicht, den Bildpfad in einem <img…>-Tag anzugeben, da Dein WebP-Bild dann nicht angezeigt wird.

Stadtdessen nutzt Du eine sogenannte Weiche, in der Du dem Browser in einem <picture>-Tag einmal die .jpg-Datei und die WebP-Datei anbietest.

Sollte der Browser Deines Lesers nicht WebP-kompatibel sein, so wird stattdessen die .jpg-Datei angezeigt.

Da wir in der mobile-First Welt unterwegs sind, können die meisten Browser mit dem „neuen“ Dateiformat umgehen.

Code-Snippet zum Kopieren

<picture>
<source srcset='DEIN-BILDPFAD.webp' type="image/webp">
<source srcset='DEIN-BILDPFAD.jpg' type="image/jpg">
<img src="DEIN-BILDPFAD.jpg" alt=""/>
</picture>

Füge das Code-Snippet einfach in Deinen Artikel ein, trage die Bildpfade ein (2×.jpg und 1x.webp) und fertig ist die Einbindung.

Ich wünsche Dir und Deinen Besuchern viel Freude mit der noch schnelleren Website!!!

PS: Um den Link zu dieser Seite weiter zu schicken, kannst Du Dir mit nur einem Klick die...
Artikel-URL kopieren
Teilen per
Facebook
WhatsApp
Hinweis: Sollte ich in diesem Artikel Provisions-Links – auch Affiliate-Links genannt – verwendet haben, sind diese durch „(Provisions-Link)" gekennzeichnet. Erfolgt über diese Links eine Bestellung, erhält coach-hoffmann.de eine Provision vom Verkäufer, für den Besteller entstehen keine Mehrkosten. Als Amazon-Partner verdiene ich an qualifizierten Käufen.
Fabian Luschnat
Geschäftsführer
BeamtenService.com
Durch die Optimierung unserer Website haben sich die Auftragsanfragen vervierfacht. Marc Hoffmann ist ein Meister seines Faches und ich empfehle ihn wärmstens weiter. Besonders gut hat mir gefallen, dass er kein "Denglisch" sondern Deutsch spricht, so konnte ich ohne Fachchinesisch alle Schritte sehr gut nachvollziehen.
Sehr gefragt
Du willst mehr Aufträge?
Du willst mehr Aufträge?
Diese Website nutzt Cookies, um bestmögliche Funktionalität bieten zu können. Unter Datenschutz erfährst Du mehr dazu.
schließen