Einführung in das WebP-Format

WebP ist ein von Google entwickeltes neues Bildformat. Es unterstützt verlustbehaftete und verlustfreie Komprimierung sowie Transparenz. Die komprimierten Dateien sind kleiner als bei JPEG, PNG und anderen Formaten. Dadurch lassen sich Bandbreite sparen, die Ladezeit von Seiten verkürzen und der Datenverbrauch der Nutzer reduzieren.

Android- und iOS-Apps können das WebP-Format sehr einfach unterstützen, indem sie die von Google bereitgestellte Dekodierungsbibliothek einbinden. Im Web ist die Unterstützung für WebP allerdings noch nicht besonders weit verbreitet, laut Daten von Can I Use，derzeit unterstützen nur die Browser Chrome und Opera sowie Androids WebView WebP. Doch wenn WebP-Bilder so viele Vorteile haben, können wir sie dann auf Webseiten verwenden? Ja. Dieser Artikel geht dieser Frage nach.

Vorhandene Bilder ins WebP-Format umwandeln

Um das WebP-Format zu verwenden, musst du von allen auf deiner Website verwendeten Bildern eine WebP-Version erstellen. Wenn du einen CDN-Anbieter nutzt, bietet dieser normalerweise eine Option zur Konvertierung ins WebP-Format an. Beispielsweise Upyun:

Nachdem wir diese Konfiguration hinzugefügt haben, können wir durch Anhängen des entsprechenden Suffixes an die Bild-URL auf die Ressourcenversion im WebP-Format zugreifen.

Du kannst auch Plugins für webpack oder gulp verwenden, um Bildformate stapelweise umzuwandeln. Darauf gehe ich hier nicht näher ein.

Das WebP-Format im Browser verwenden

Da nicht alle Browser das WebP-Format unterstützen, gibt es zwei Ansätze: Entweder verwenden wir WebP nur in Browsern, die das Format unterstützen, oder wir ermöglichen Browsern ohne WebP-Unterstützung, WebP ebenfalls zu unterstützen.

Variante eins： <picture>Schlagwörter

<picture>ist ein neues Element in HTML5, ähnlich wie<video>Es können auch Ressourcen in mehreren Formaten angegeben werden, aus denen der Browser ein von ihm unterstütztes Format zum Laden auswählt.

<picture class="picture">
  <source type="image/webp" srcset="image.webp">
  <img class="image" src="image.jpg">
</picture>

Wenn der Browser das WebP-Format unterstützt, lädt er image.webp，andernfalls wird geladen image.jpg。

Auch wenn der Browser keine Unterstützung bietet für <picture>Tag, die Bilder werden weiterhin normal angezeigt, lediglich CSS kann möglicherweise nicht korrekt auswählen picture Elemente. In IE8 beispielsweise funktioniert das folgende CSS nicht:

.picture img {  width: 100px;  height: 100px;
}

Die Bildformatierung lässt sich jedoch so festlegen:

.image {  width: 100px;  height: 100px;
}

Selbst wenn der Browser Bilder im WebP-Format verwendet, wird letztlich weiterhin Folgendes angewendet img den Stil des Elements.

Allerdings, sobald man Folgendes verwendet html5shiv，sodass ältere Browser dieses Tag unterstützen und CSS-Selektoren normal verwendet werden können.

Diese Methode ist am einfachsten, funktioniert aber nicht bei Bildern in CSS（etwa Hintergrundbildern）.

Methode zwei: Die URL der Bilder mit JS ersetzen.

Auf vielen unserer Seiten wird häufig „Lazy Loading“ für Bilder verwendet — gewöhnlich wird dabei die URL des Bildes in img in einem benutzerdefinierten Attribut des Elements speichern und dann mit JS zum passenden Zeitpunkt die URL zuweisen an src Attribut. Nach einem ähnlichen Prinzip können wir je nachdem, ob der Browser das WebP-Format unterstützt, dem img den Elementen unterschiedliche zuweisen src Wert。

Zunächst müssen wir mit JS feststellen, ob der Browser das WebP-Format unterstützt. Dazu geben wir ihm ein Bild im WebP-Format und prüfen, ob er es korrekt darstellen kann. Diese Methode ist asynchron, daher müssen die nachfolgenden Schritte in einer Callback-Funktion stehen. Wir können das Ergebnis speichern in localStorage abgelegt, sodass später keine erneute Prüfung nötig ist.

function checkWebp(callback) {  var img = new Image();
  img.onload = function () {    var result = (img.width > 0) && (img.height > 0);
    callback(result);
  };
  img.onerror = function () {
    callback(false);
  };
  img.src = 'data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA';
}

Anschließend mit dem folgenden Code das jeweilige src ersetzen, je nachdem, ob WebP unterstützt wird.

function showImage(useWebp){  var imgs = Array.from(document.querySelectorAll('img'));

  imgs.forEach(function(i){    var src = i.attributes['data-src'].value;    if (useWebp){
      src = src.replace(/\.jpg$/, '.webp');
    }

    i.src = src;
  });
}

checkWebp(showImage);

Der Vorteil dieses Verfahrens besteht darin, dass es sich mit vorhandenen Lazy-Loading-Funktionen kombinieren lässt. Mit JS können wir außerdem Bilder in CSS verarbeiten（beispielsweise Hintergrundbilder）.

Methode drei: WebP-Bilder mit JS decodieren

Da der WebP-Decoder quelloffen ist, lässt er sich dann auch in JS implementieren？Natürlich，Jemand hat sogar einen WebP-Decoder in JS geschrieben. Durch die Einbindung dieser JS-Bibliothek werden sämtliche WebP-Bilder mit JS dekodiert und anschließend umgewandelt in base64，und anschließend die ursprüngliche URL ersetzen. So können auch Browser, die WebP ursprünglich nicht unterstützen, WebP normal anzeigen. Die Verwendung dieser Bibliothek ist sehr einfach; die Anleitung auf der Webseite genügt.

Der Nachteil dieser Methode besteht darin, dass JS zum Dekodieren des WebP-Bildes hier die URL in src asynchron anfordern muss (da das Bild zuvor bereits einmal heruntergeladen wurde, wird allerdings direkt der Cache verwendet); außerdem ist die Dekodierung mit JS relativ langsam und beeinträchtigt die Leistung, sodass es eine Weile dauern kann, bis das Bild angezeigt wird.

Dies sind einige Möglichkeiten, WebP-Bilder im Browser zu verwenden. Welche davon geeignet ist, hängt von den eigenen Gegebenheiten ab. In unserer Praxis verringerte sich die Dateigröße der Bilder nach der Umstellung auf WebP im Allgemeinen um mehr als 1/3. Das beschleunigte das Laden und sparte zugleich Datenvolumen der Nutzer. Wir empfehlen sehr, dieses Format ab sofort zu verwenden.