Cookies, lecker Cookies :-)
Auch diese Seite analysiert, u.a. durch Cookies, deine Nutzung zwecks Reichweitenmessung sowie Optimierung und Personalisierung von Inhalten und Werbung. Eingebundene Dritte führen diese Informationen ggf. mit weiteren Daten zusammen. Details hierzu findest du in der Datenschutzerklärung. Du kannst deine Einstellungen jederzeit unter Cookie-Einstellungen unten auf der Seite ändern. Indem du auf der Seite weitersurfst, stimmst du – jederzeit für die Zukunft widerruflich – dieser Datenverarbeitung durch den Seitenbetreiber und Dritte zu. Weitere Informationen: Impressum
Nur notwendige Cookies akzeptieren
Ja, ich bin einverstanden!
Details

Notwendige Cookies

Diese Cookies sind immer aktiviert, da sie für Grundfunktionen der Website erforderlich sind. Hierzu zählen Cookies, mit denen gespeichert werden kann, wo auf der Seite du dich bewegst – während eines Besuchs oder, falls du es möchtest, auch von einem Besuch zum nächsten. Sie tragen sie zur sicheren und vorschriftsmäßigen Nutzung der Seite bei.
Marketing & Social

Marketing-Cookies werden verwendet, um Besuchern auf Webseiten zu folgen. Die Absicht ist, Anzeigen zu zeigen, die relevant und ansprechend für den einzelnen Benutzer sind und daher wertvoller für Publisher und werbetreibende Drittparteien sind.

Marc Hoffmann
Digital Marketing Experte
🔍
SUCHE
Abbrechen
Digital Marketing
W-LAN aktivKein W-LAN
Nachtlesemodus aktivieren

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!!!

Facebook
WhatsApp
Artikel teilen

Marketing Marc
Autor & Digital Marketing Experte
Als ausgebildeter Informatiker, Programmierer und deutschsprachiger Experte für digitale Marketingkampagnen unterstütze ich Dich dabei, Deinen Umsatz zu steigern. Mehr Infos: Über mich

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.
Weitere Praxistipps
Komm in meine Facebook Ads Experten Gruppe!
Wenn Du noch mehr Insights erfahren möchtest, um aus Deinen Facebook Werbekampagnen das Maximum herauszuholen!
facebook ads gruppe

Du willst Facebook Ads schalten lernen?
Hier habe ich Dir einen Artikel mit Lern-Empfehlungen geschrieben.

facebook ads kurs

Zum Seitenanfang