Konvertiere Deine JPG und PNG Bilder kostenfrei mit unserem WebP Converter!

WebP Bilder verbrauchen bei gleicher Qualität deutlich weniger Speicherplatz. Das ist nicht nur für Deine SEO gut, sondern auch für Deine Webseitenbesucher.
Wenn Du mit unserem JPG to WebP Converter Deine Bilder komprimierst, müssen Deine User weniger (mobile)-Daten transferieren und Deine Webseite lädt schneller.

Mit unserem JPG WebP converter kannst Du kostenfrei so viele Bilder wie du magst konvertieren!

WebP Bilder in eine Webseite einbinden

Du hast Deine Bilder erfolgreich mit unserem JPG to WebP Converter komprimiert und fragst Dich nun, wie du die Bilder am besten in Deine Webseite einbindest?

Dann sind die folgenden drei Anleitungen hilfreich für Dich:

• WebP Bilder in eine HTML Seite einbinden
• WebP Bilder per CSS einbinden
• WebP Bilder über die .htaccess Datei einbinden

Falls Du Deine Webseite lieber von Profis optimieren lassen möchtest, kannst du gerne mit uns zusammen durchstarten. Jetzt durchstarten!

---

Warum WebP?

Bilder stellen heute einen deutlichen Hauptbestandteil von Internetseiten und Onlineshops dar. Es liegt nahe, das ein effizienter Umgang mit Bildern somit unabdingbar ist. Hier kommt WebP ins Spiel.

Das WebP Format kann sowohl verlustbehaftete als auch verlustfreie Bilder speichern. In unserem Kontext ist der Vergleich zu JPG und PNG Bildern interessant. Beide Formate können auf beide Weisen gespeichert werden. Vor allem aber sind JPG und PNG Bilder die Standard-Formate im Webbereich. D.h. unsere Webseite oder unser Onlineshop nutzt sie ständig und überall. Immer wenn ein Nutzer oder potentieller Kunde unsere Webseite erstmalig aufruft, müssen alle Bilder übertragen werden. Byte für Byte.

Und nun gilt da ja diese goldene Regel:

Optimiere Deine Ladezeiten!

Warum?
Der SEO wegen!
Also warum WebP?
Wegen der

SEO

WebP speichert Bilder 25% bis 34% effizienter als JPG oder PNG bei gleicher struktureller Ähnlichkeit (SSIM). Das bedeutet unter Einsatz des WebP Converters wird ein Bild statt mit bisher 100 kB nun mit 66 kB bis 75 kB gespeichert - bei gleicher Qualität. Unsere Webseite oder unser Onlineshop lädt somit je nachdem wie viele WebP konvertierte Bilder wir verwenden vielfach schneller. Eine Ladezeit von 0,5 statt 1,2 Sekunden stellt aus SEO Sicht einen enormen Vorteil dar.

Unsere Chancen auf ein besseres Ranking in den Suchmaschinen steigen mit der Verwendung von WebP Bildern erheblich.

---

JPG und WebP im Vergleich

Erkennst Du einen Unterschied?

Was ist WebP?

Mit unserem WebP Converter erstellte WebP Bilder sind nicht nur 25% bis 34% besser komprimiert als vergleichbare JPG oder PNG Bilder, sie erhalten wenn nötig auch Transparenzen. Bei verlustfreien Bildern erfolgt die Speicherung der Transparenzen mit 22% Speicherbedarf-Einsparung, während bei verlustbehafteten Bildern meist sogar drei mal weniger Speicherbedarf benötigt wird verglichen mit PNG. Erreicht wird dies durch die Verwendung einer Codierung die die Annahme implementiert, das Bildinformationen benachbarter Pixelblöcke vorhergesagt werden können. Gespeichert werden nur die Unterschiede.
Die Grundlage für das WebP Format bildet der Video-Codec VP8. WebP Bilder bestehen aus VP8 oder VP8L Bildinformationen und werden in einem RIFF Container gespeichert. Die Speicherung von WebP Bildern in einem RIFF Container, der bei Bedarf zusätzliche Metadaten aufnehmen kann erfordert ohne solche zusätzlichen Daten kaum Speicher Overhead und ist damit sehr gut für das WebP Format geeignet.
Die Vorhersage benachbarter Bildinformationen bei der WebP Konvertierung bedingt, das sich WebP speziell für detailarme Bilder noch besser eignet. Hier spielen sich die Stärken des WebP Formats besonders deutlich aus.

---

Brauche ich WebP Bilder?

WebP Bilder stellen perspektivisch einen neuen Standard für Web-Grafiken dar und sind damit als direkter Konkurent zu JPG und PNG zu betrachten.
Kritikpunkte die zur Erstveröffentlichung des WebP Standards 2010 geäussert wurden, wurden in den kommenden Jahren weitgehend behoben.
Damit stellt WebP eine sinnvolle effektivere Methode der Speicherung von Bildern für Webseiten und Onlineshops dar.
Nicht nur handeln wir direkt im Sinne unserer SEO Bemühungen mit der Nutzung von WebP Bildern, die durch unseren WebP Converter erstellt wurden. Wir handeln auch zukunftsorientiert und verbessern das Usererlebnis.

---

WebP Bilder in HTML Seite einbinden

Deine JPG oder PNG Bilder die Du mit unserem WebP Converter umgewandelt hast, müssen korrekt in Deine Webseite eingebunden werden, damit Deine Webseitenbesucher diese auch sehen können. Obwohl das moderne WebP Format bereits von sehr vielen Browsern unterstüzt wird, solltest Du immer eine Fallback Lösung für ältere Browser Versionen bereitstellen.

Integration:

    <picture>
        <source srcset="dein_bild.webp" type="image/webp">
        <img alt="WebP Bilder in HTML integrieren" src="dein_bild.jpg"/>
    </picture>

Auf diese Weise können moderne Browser das WebP Bild ausliefern und ältere Browser greifen auf die Fallback Lösung, dass JPG Bild zurück. Wenn Du nur das WebP Bild einbindest, bekommen Besucher mit älteren Geräten womöglich gar kein Bild angezeigt.

---

WebP CSS Hintergrundbilder einbinden

Idealerweise komprimierst Du Deine Bilder die Du innerhalb Deiner CSS (Stylesheet) Datei einbindest, ebenso mit unserem JPG to WebP Converter.
Leider gibt es derzeit keine zuverlässig Methode um das direkt in der CSS-Datei zu erledigen, daher müssen wir auf etwas Javascript zurückgreifen.

Integration:

    <!-- Unser Div für das Hintergrundbild. -->
    <div id="hintergrund_bild"></div>
    
    // Solltest du jQuery bereits in Deiner Webseite eingebunden haben, musst Du es nicht erneut einbinden!
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous"></script>
    
    // Wir prüfen ob der Browser WebP Bilder unterstützt und setzen das Hintergrundbild per jQuery.
    var webpData = 'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=';
    $.get( webpData, function() {
    }).done(function() {
        // OK, der Browser kann WebP Bilder anzeigen.
        $('#hintergrund_bild').css("background-image", "url(hintergrund_bild.webp)");
    }).fail(function() {
        // STOP, der Browser kann keine WebP Bilder anzeigen -> wir laden ein JPG Bild.
        $('#hintergrund_bild').css("background-image", "url(hintergrund_bild.jpg)");
    })

Auf diese Weise kannst du alle Deine CSS JPG & PNG Hintergrundbilder als WebP Bild ausliefern und eine Menge Daten sparen.

---

WebP Bilder über die htaccess Datei bereitstellen

Wenn Du eine umfangreiche Webseite oder einen Onlineshop mit vielen Bildern hast, ist es viel Arbeit jedes Bild einzeln als WebP Bild bereit zu stellen.
Du kannst mit einer globalen Regel in Deiner .htaccess Datei dafür sorgen, dass alle Deine Bilder (falls verfügbar) automatisch als WebP Bild ausgeliefert werden.

Das Script prüft zuerst ob der Browser WebP Bilder akzeptiert und anzeigen kann und liefert dann entsprechend dem Ergebnis entweder das WebP Bild oder das normale JPG/PNG Bild aus.

Das folgende Script gehört in Deine .htaccess Datei in Deinem Projekt:

Integration:

    <IfModule mod_rewrite.c>
        RewriteEngine on
        
        #Prüfe ob WebP Bilder angezeigt werden können und das entsprechende WebP Bild verfügbar ist.
        RewriteCond %{HTTP_ACCEPT} image/webp
        RewriteCond %{REQUEST_FILENAME}.webp -f
        RewriteRule \.(jpe?g|png)$ %{REQUEST_FILENAME}.webp [NC,L]
    </IfModule>

    AddType image/webp .webp

Wichtig: Das Script sucht das WebP Bild jeweils mit dem gleichen Namen des Quellbildes und der Endung ".webp". Du musst dafür sorgen, dass neben jedem JPG/PNG Bild eine Variante als WebP Bild verfügbar ist. Dafür wandelst Du einfach alle Deine Bilder mit unserem JPG to WebP Converter um und lädst diese anschließend neben das original Bild auf Deinen Server hoch.

Beispiel:
So sollten die Bilder auf Deinem Server bereitstehen: "bild_1.jpg" und "bild_1.jpg.webp"

Hinweis: Es müssen nicht alle Bilder als WebP Bild verfügbar sein. Das Script erkennt ob ein WebP Bild verfügbar ist und liefert im Notfall das JPG/PNG Bild aus.