Verwendung von WebP-Bildern

Wir kennen das alle: Man surft auf einer Website, die Unmengen von riesigen Bildern von köstlichem Essen oder vielleicht dem neuen Gadget, das man ins Auge gefasst hat, zeigt. Diese Bilder sprechen unsere Sinne an, und für Content-Autoren sind sie unerlässlich, um Menschen zum Handeln zu bewegen.

Nur sind diese Bilder geradezu riesig. Wirklich riesig. Bei einer schleppenden mobilen Verbindung kann man diese Bilder förmlich wie ein abrollendes Rolltor vor sich aufklappen sehen. Man wird sofort an die schlechten alten Zeiten des Dial-ups erinnert.

Das ist ein Problem, denn Bilder machen einen erheblichen Teil dessen aus, was auf einer typischen Website heruntergeladen wird, und das aus gutem Grund. Bilder sind ausdrucksstarke Werkzeuge und können mehr sagen als Text. Die Herausforderung besteht darin, den schmalen Grat zwischen visuell reichhaltigem Inhalt und dessen schneller Auslieferung zu meistern.

Die Lösung für dieses Dilemma ist nicht eindimensional. Es gibt viele Techniken, um unhandliche Bilder zu verschlanken und sie entsprechend den Fähigkeiten der Geräte, die sie anfordern, auszuliefern. Ein solches Thema könnte leicht ein eigenes Buch füllen, aber der Fokus dieses Beitrags wird sehr spezifisch sein: Googles WebP-Bildformat und wie Sie es nutzen können, um Bilder bereitzustellen, die die gleiche visuelle Wiedergabetreue wie Ihre aktuellen Bilder haben, aber bei einem Bruchteil der Dateigröße. Legen wir los!

Was ist WebP und warum sollte es mich überhaupt interessieren?

WebP ist ein Bildformat, das 2010 von Google entwickelt und erstmals veröffentlicht wurde. Es unterstützt die Kodierung von Bildern sowohl in verlustfreiem als auch in verlustbehaftetem Format, was es zu einem vielseitigen Format für jede Art von visuellen Medien und zu einer großartigen Alternative zu PNG oder JPEG macht. Die visuelle Qualität von WebP ist oft mit gängigeren Formaten vergleichbar. Unten sehen Sie einen Vergleich eines verlustbehafteten WebP-Bildes und eines JPEG-Bildes.

Im obigen Beispiel sind die visuellen Unterschiede kaum wahrnehmbar, während die Unterschiede in der Dateigröße erheblich sind. Die JPEG-Version links wiegt 56,7 KB, und die WebP-Version rechts ist mit 38 KB fast ein Drittel kleiner. Nicht schlecht, besonders wenn man bedenkt, dass die visuelle Qualität vergleichbar ist.

Die nächste Frage ist natürlich: „Wie sieht es mit der Browserunterstützung aus?“ Nicht so spärlich, wie man denken könnte. Da WebP eine Google-Technologie ist, ist die Unterstützung an Blink-basierte Browser gebunden. Diese Browser machen einen erheblichen Teil der weltweiten Nutzer aus, was bedeutet, dass zum Zeitpunkt des Schreibens fast 70 % der verwendeten Browser WebP unterstützen. Wenn Sie die Chance hätten, Ihre Website für über zwei Drittel Ihrer Nutzer schneller zu machen, würden Sie sie dann verstreichen lassen? Ich glaube nicht.

Es ist wichtig zu bedenken, dass WebP kein Ersatz für JPEG- und PNG-Bilder ist. Es ist ein Format, das Sie für Browser bereitstellen können, die es nutzen können, aber Sie sollten ältere Bildformate für andere Browser bereithalten. Das ist die Natur der Webentwicklung: Haben Sie Ihren Plan A für Browser bereit, die damit umgehen können, und Ihren Plan B (und vielleicht Plan C) für weniger fähige Browser.

Genug der Vorbehalte. Lasst uns optimieren!

Ihre Bilder nach WebP konvertieren

Wenn Sie mit Photoshop vertraut sind, ist der einfachste Weg, einen Eindruck von WebP zu bekommen, das WebP Photoshop Plugin auszuprobieren. Nachdem Sie es installiert haben, können Sie die Option Speichern unter (nicht für Web speichern!) verwenden und entweder WebP oder WebP verlustfrei aus dem Format-Dropdown auswählen.

Was ist der Unterschied zwischen den beiden? Denken Sie daran, dass es sehr ähnlich zu den Unterschieden zwischen JPEG- und PNG-Bildern ist. JPEGs sind verlustbehaftet, und PNG-Bilder sind verlustfrei. Verwenden Sie das normale WebP, wenn Sie Ihre JPEG-Bilder konvertieren möchten. Verwenden Sie WebP verlustfrei, wenn Sie Ihre PNGs konvertieren.

Wenn Sie Bilder mit dem WebP-Verlustfrei-Format mit dem Photoshop-Plugin speichern, erhalten Sie keine Eingabeaufforderungen. Es erledigt einfach alles. Wenn Sie normales WebP für Ihre verlustbehafteten Bilder wählen, erhalten Sie jedoch etwas wie dieses

Der Einstellungsdialog für verlustbehaftetes WebP bietet mehr Flexibilität bei der Konfiguration der Ausgabe. Sie können die Bildqualität mit einem Schieberegler von 0 bis 100 einstellen (ähnlich wie bei JPEG), die Stärke des Filterprofils festlegen, um kleinere Dateigrößen zu erzielen (natürlich auf Kosten der visuellen Qualität) und Rauschfilterung sowie Schärfe anpassen.

Meine Kritik am WebP Photoshop-Plugin ist zweigeteilt: Es gibt keine „Für Web speichern“-Oberfläche, damit Sie sehen können, wie ein Bild mit den gewählten Einstellungen aussehen wird. Wenn Sie viele Bilder speichern wollten, müssten Sie einen Stapelprozess erstellen. Meine zweite Kritik ist wahrscheinlich kein Hindernis für Sie, wenn Sie Stapelverarbeitung in Photoshop mögen, aber ich bin eher ein Programmierer, daher bevorzuge ich etwas wie Node, um viele Bilder gleichzeitig zu konvertieren.

Bilder mit Node nach WebP konvertieren

Node.js ist fantastisch, und für Alleskönner wie mich ist es weniger die Tatsache, dass es JavaScript auf den Server bringt, sondern vielmehr, dass es ein Produktivitätswerkzeug ist, das ich beim Erstellen von Websites nutzen kann. In diesem Artikel werden wir Node verwenden, um Ihre JPEGs und PNGs en masse in WebP-Bilder zu konvertieren, indem wir ein Node-Paket namens imagemin verwenden.

imagemin ist das Schweizer Taschenmesser der Bildprozessoren in Node, aber wir werden uns nur darauf konzentrieren, alle unsere JPEGs und PNGs in WebP-Bilder zu konvertieren. Keine Sorge! Selbst wenn Sie noch nie Node verwendet haben, wird dieser Artikel Sie durch alles führen. Wenn Sie die Idee, Node zu verwenden, stört, können Sie das WebP Photoshop-Plugin verwenden und überspringen.

Als Erstes sollten Sie Node.js herunterladen und installieren. Das sollte nur wenige Minuten dauern. Sobald es installiert ist, öffnen Sie ein Terminalfenster und navigieren Sie zu Ihrem Webprojekt-Stammordner. Von dort aus installieren Sie einfach imagemin und das imagemin-webp-Plugin mit Node Package Manager (npm).

npm install imagemin imagemin-webp

Die Installation kann bis zu einer Minute dauern. Wenn Sie fertig sind, öffnen Sie Ihren Texteditor und erstellen Sie eine neue Datei mit dem Namen webp.js in Ihrem Webprojekt-Stammordner.

Geben Sie das folgende Skript in die Datei ein (aktualisiert für modernes Node von Luke Berry)

EDIT: Beide Snippets wurden für frühere Versionen von imagemin-webp angewendet. Kürzlich wurde dieses Tool in 7.0 auf natives ESM umgestellt. Konsultieren Sie die README für die Implementierung. Möglicherweise müssen Sie require() durch import ersetzen. Und geben Sie type: module in Ihrer package.json an.

var imagemin = require("imagemin"),    // The imagemin module.
  webp = require("imagemin-webp"),   // imagemin's WebP plugin.
  outputFolder = "./img",            // Output folder
  PNGImages = "./img/*.png",         // PNG images
  JPEGImages = "./img/*.jpg";        // JPEG images

imagemin([PNGImages], outputFolder, {
  plugins: [webp({
      lossless: true // Losslessly encode images
  })]
});

imagemin([JPEGImages], outputFolder, {
  plugins: [webp({
    quality: 65 // Quality setting from 0 to 100
  })]
});

const imagemin = require('imagemin'),
  webp = require('imagemin-webp')
const outputFolder = './images/webp'
const produceWebP = async () => {
  await imagemin(['images/*.png'], {
    destination: outputFolder,
    plugins: [
      webp({
        lossless: true
      })
    ]
  })
  console.log('PNGs processed')
  await imagemin(['images/*.{jpg,jpeg}'], {
    destination: outputFolder,
    plugins: [
      webp({
        quality: 65
      })
    ]
  })
  console.log('JPGs and JPEGs processed')
}
produceWebP()

Dieses Skript verarbeitet alle JPEG- und PNG-Bilder im img-Ordner und konvertiert sie in WebP. Beim Konvertieren von PNG-Bildern setzen wir die Option lossless auf true. Beim Konvertieren von JPEG-Bildern setzen wir die Option quality auf 65. Experimentieren Sie ruhig mit diesen Einstellungen, um unterschiedliche Ergebnisse zu erzielen. Sie können mit weiteren Einstellungen auf der imagemin-webp Plugin-Seite experimentieren.

Dieses Skript geht davon aus, dass alle Ihre JPEG- und PNG-Bilder in einem Ordner namens img liegen. Wenn das nicht der Fall ist, können Sie die Werte der Variablen PNGImages und JPEGImages ändern. Dieses Skript geht auch davon aus, dass die WebP-Ausgabe im img-Ordner erfolgen soll. Wenn Sie das nicht möchten, ändern Sie den Wert der Variablen outputFolder nach Bedarf. Wenn Sie bereit sind, führen Sie das Skript wie folgt aus:

node webp.js

Dadurch werden alle Bilder verarbeitet und ihre WebP-Gegenstücke im img-Ordner abgelegt. Die erzielten Vorteile hängen von den konvertierten Bildern ab. In meinem Fall wurde ein Ordner mit JPEGs im Gesamtwert von ca. 2,75 MB auf 1,04 MB reduziert, ohne wahrnehmbare Einbußen bei der visuellen Qualität. Das ist eine Reduzierung um 62 % ohne viel Aufwand! Jetzt, wo alle Ihre Bilder konvertiert sind, können Sie sie verwenden. Legen wir los und nutzen sie!

WebP in HTML verwenden

Ein WebP-Bild in HTML zu verwenden, ist wie jedes andere Bild, oder? Einfach das Ding in das src-Attribut des -Tags schmeißen und los geht's!

<!-- Nothing possibly can go wrong with this, right? -->
<img src="img/myAwesomeWebPImage.webp" alt="WebP rules.">

Das funktioniert gut, aber nur für Browser, die es unterstützen. Wehe den unglücklichen Nutzern, die an Ihrer Website vorbeikommen, wenn Sie nur WebP verwenden.

Es ist sicher nicht schön, aber so ist die Frontend-Entwicklung nun mal, also reiß dich zusammen. Manche Features funktionieren einfach nicht in jedem Browser, und das wird sich so schnell nicht ändern. Der einfachste Weg, das zum Laufen zu bringen, ist die Verwendung des -Elements, um eine Reihe von Fallbacks anzugeben, wie hier:

<picture>
  <source srcset="img/awesomeWebPImage.webp" type="image/webp">
  <source srcset="img/creakyOldJPEG.jpg" type="image/jpeg"> 
  <img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
</picture>

Das ist wahrscheinlich Ihre beste Wahl für die größtmögliche Kompatibilität, da es in jedem einzelnen Browser funktioniert, nicht nur in denen, die das Element unterstützen. Der Grund dafür ist, dass Browser, die es nicht unterstützen, einfach die im Tag angegebene Quelle anzeigen. Wenn Sie volle Unterstützung benötigen, können Sie jederzeit Scott Jehls super-cleveren Picturefill-Script einfügen.

WebP-Bilder in CSS verwenden

Die Sache wird komplizierter, wenn Sie WebP-Bilder in CSS verwenden müssen. Im Gegensatz zum -Element in HTML, das in allen Browsern elegant auf das -Element zurückfällt, bietet CSS keine eingebaute Lösung für Fallback-Bilder, die optimal ist. Lösungen wie mehrere Hintergründe laden in einigen Fällen beide Ressourcen herunter, was ein großes Optimierungs-No-Go ist. Die Lösung liegt in der Feature-Erkennung.

Modernizr ist eine bekannte Feature-Erkennungsbibliothek, die verfügbare Funktionen in Browsern erkennt. WebP-Unterstützung ist zufällig eine davon. Noch besser: Sie können einen benutzerdefinierten Modernizr-Build mit nur WebP-Erkennung unter https://modernizr.com/download erstellen, was es Ihnen ermöglicht, WebP-Unterstützung mit sehr geringem Overhead zu erkennen.

Wenn Sie diesen benutzerdefinierten Build über das <script> Tag zu Ihrer Website hinzufügen, fügt er automatisch eine von zwei Klassen zum <html> Element hinzu.

1. Die webp Klasse wird hinzugefügt, wenn der Browser WebP unterstützt.
2. Die no-webp Klasse wird hinzugefügt, wenn der Browser WebP nicht unterstützt.

Mit diesen Klassen können Sie CSS verwenden, um Hintergrundbilder gemäß den Fähigkeiten eines Browsers zu laden, indem Sie die Klasse im Tag ansprechen.

.no-webp .elementWithBackgroundImage {
  background-image: url("image.jpg");
}

.webp .elementWithBackgroundImage{
  background-image: url("image.webp");
}

Das war's. Browser, die WebP nutzen können, erhalten WebP. Diejenigen, die es nicht können, greifen einfach auf unterstützte Bildtypen zurück. Eine Win-Win-Situation! Außer…

Was ist mit Nutzern mit deaktiviertem JavaScript?

Wenn Sie sich auf Modernizr verlassen, müssen Sie an die Benutzer denken, die JavaScript deaktiviert haben. Entschuldigung, aber so ist es nun mal. Wenn Sie Feature-Erkennung verwenden, die einige Ihrer Nutzer im Dunkeln lassen kann, müssen Sie mit deaktiviertem JavaScript testen. Mit den oben verwendeten Feature-Erkennungs-Klassen werden Browser ohne JavaScript nicht einmal ein Hintergrundbild anzeigen. Das liegt daran, dass das deaktivierte Skript nie die Erkennungsklassen zum <html> Element hinzufügt.

Um dies zu umgehen, fügen wir zunächst die Klasse no-js zum <html> Tag hinzu.

<html class="no-js">

Dann schreiben wir ein kleines Stück Inline-Skript, das wir vor allen anderen Skripten platzieren werden.

<script>
  document.documentElement.classList.remove("no-js");
</script>

Dadurch wird die no-js Klasse vom <html> Element entfernt, wenn es geparst wird.

Was nützt uns das? Wenn JavaScript deaktiviert ist, wird dieses kleine Skript nie ausgeführt, sodass die no-js-Klasse auf dem Element bleibt. Das bedeutet, dass wir eine weitere Regel hinzufügen können, um einen Bildtyp bereitzustellen, der die breiteste Unterstützung hat.

.no-js .elementWithBackgroundImage {
  background-image: url("image.jpg");
}

Damit decken wir alle Eventualitäten ab. Wenn JavaScript verfügbar ist, wird das Inline-Skript ausgeführt und entfernt die no-js-Klasse, bevor das CSS geparst wird, sodass das JPEG in einem WebP-fähigen Browser nie heruntergeladen wird. Wenn JavaScript tatsächlich deaktiviert ist, wird die Klasse nicht entfernt und das kompatiblere Bildformat verwendet.

Nachdem wir all dies getan haben, sind dies die zu erwartenden Anwendungsfälle:

1. Diejenigen, die WebP verwenden können, erhalten WebP.
2. Diejenigen, die WebP nicht verwenden können, erhalten PNG- oder JPEG-Bilder.
3. Diejenigen mit deaktiviertem JavaScript erhalten PNG- oder JPEG-Bilder.

Klatschen Sie sich selbst auf die Schulter. Sie haben gerade gelernt, wie man WebP-Bilder progressiv verwendet.

Zum Abschluss

WebP ist ein vielseitiges Bildformat, das wir anstelle von PNG- und JPEG-Bildern bereitstellen können (wenn es unterstützt wird). Es kann zu einer erheblichen Reduzierung der Bildgröße auf Ihrer Website führen, und wie wir wissen, senkt alles, was zu weniger Datenübertragung führt, die Seitenladezeit.

Gibt es Nachteile? Ein paar. Der größte ist, dass Sie zwei Sätze von Bildern pflegen müssen, um die bestmögliche Unterstützung zu erreichen, was für Ihre Website möglicherweise nicht möglich ist, wenn eine riesige Menge an Bildern in WebP konvertiert werden muss. Eine weitere ist, dass Sie ein wenig JavaScript verwalten müssen, wenn Sie WebP-Bilder in CSS verwenden möchten. Eine weitere erwähnenswerte Sache ist, dass Benutzer, die Ihre Bilder auf ihre Festplatte speichern, möglicherweise kein Standardprogramm zum Anzeigen von WebP-Bildern haben.

Die Erkenntnis ist, dass der relativ geringe Aufwand die Ersparnisse wert ist, die Sie erzielen werden, Ersparnisse, die die Benutzererfahrung Ihrer Website verbessern, indem sie schneller lädt. Benutzer, die über mobile Netzwerke surfen, werden besonders davon profitieren. Jetzt gehen Sie vor und webp-en Sie nach Herzenslust!

 

Jeremy Wagner ist der Autor von Web Performance in Action, einem kommenden Titel von Manning Publications. Verwenden Sie den Gutscheincode csstripc, um 38 % Rabatt auf dieses oder jedes andere Manning-Buch zu erhalten.

Schauen Sie ihn sich auf Twitter an: @malchata