Vollständige Anleitung zum Verwenden des WebP-Bildformats

WebP oder inoffiziell als ausgesprochen weppy, ist ein Bildformat, das von Google Developers vor etwa 5 Jahren eingeführt wurde. Wenn Sie Webdesigner sind oder ein Entwickler sind, der die Bildgröße der Bilder reduzieren und optimieren möchte, sollte WebP ein Lächeln auf Ihr Gesicht zaubern.

Hier sind einige wichtige Informationen, die Sie über dieses nicht so neue, aber immer noch coole Bildformat wissen müssen:

• WebP hat die Dateierweiterung von .webp.
• WebP verwendet sowohl verlustbehaftete als auch verlustfreie Komprimierung.
• WebP verlustbehaftete Bilder sind potentiell 25-34% kleiner als JPEG.
• WebP verlustfreie Bilder sind potentiell 25% kleiner im Vergleich zu PNG.
• WebP unterstützt verlustfreie Transparenz, d. H. PNG mit Alphakanal.
• WebP unterstützt Animationen. animierte GIFs.

Kurz gesagt, WebP kann die Größe der Bilddateien von JPEG, GIF und PNG erheblich reduzieren. Hier ist eine Auffrischung zu WebP, die Sie überprüfen sollten, bevor wir uns auf die Spaßsachen konzentrieren.

Ein Experiment

Das Beste an Behauptungen im Web ist, dass wir immer Experimente durchführen können, um die Wahrhaftigkeit und Authentizität zu überprüfen. Hier sind einige Experimente, die ich herausgefunden habe wie klein ein Bild möglicherweise werden kann nachdem sie aus verschiedenen Bildformaten (JPEG, PNG und GIF) in WebP konvertiert wurden.

1. JPEG - Lossy Image

Hier ist ein zufälliges JPEG-Bild, das ich von Pexels genommen habe. Ursprüngliche Dateigröße - 165 kb. ↓

Das Bild wird mit JpegMini optimiert. Neue Dateigröße - 101 kb. ↓

Schließlich wird dasselbe Bild in das WebP-Format konvertiert. Endgültige Dateigröße - 70 kb. ↓

Als Randnotiz: Hier sind die unterschiedlichen Dateigrößen, wenn dasselbe Bild in die folgenden Formate konvertiert wurde:

• GIF - 285 kb
• PNG 8 - 241,2 kb
• PNG 24 - 657,6 kb

2. PNG - Verlustfreies Bild

Versuchen wir es jetzt mit PNG mit Transparenz. (Quelle). Ursprüngliche Dateigröße - 587 kb. ↓

Hier ist das mit tinypng optimierte Bild. Neue Dateigröße - 278 kb. ↓

Und schließlich das Bild in das WebP-Format konvertiert. Endgültige Dateigröße - 112 kb. ↓

3. Animiertes GIF

Bei der Umwandlung in WebP wurde ein JPEG-Bild von 165 KB auf 70 KB und ein PNG-Bild von 587 KB auf 112 KB erhöht.

Mal sehen, wie eine animierte GIF-Datei funktioniert:

• Ursprüngliche Dateigröße - 6.8mb
• WebP-Dateigröße - 6,3 MB

Zusammenfassung:

Hier ist eine Tabelle, um das gesamte Experiment zusammenzufassen:

	Verlust (JPG)	Verlustfrei (PNG)	Animiertes GIF
Original	165 kb	587 kb	6,8mb
Mit Werkzeugen optimiert	101 kb	278 kb	-
WebP-Format	70 kb	112 kb	6.3mb

Ohne sich viel mit mathematischen Berechnungen zu beschäftigen, deuten diese Zahlen auf eine erhebliche Reduzierung der Dateigrößen hin. Wenn Sie anhand der Bilder beurteilen, können Sie den Unterschied in Bezug auf Klarheit und Auflösung nicht wirklich erkennen. Kleinere, geringere Dateigrößen bei gleicher Bildqualität, WebP ist definitiv einen Blick wert.

Mit Tools in WebP konvertieren

Wenn Sie bereits an Bord sind und mit der Veröffentlichung von Bildern im WebP-Format beginnen möchten, schauen Sie sich einmal an, wie Sie Ihre Bilder einfach in dieses Format konvertieren können. Alle unten genannten Methoden unterscheiden sich hinsichtlich der Bedienelemente, der Benutzerfreundlichkeit und der Benutzerfreundlichkeit. Wähle dein Gift.

WebPonize zum Mac

WebPonize ist wahrscheinlich die einfachste und schnellste Möglichkeit, Bilder auf dem Mac in das WebP-Format zu konvertieren. Sie müssen lediglich Ihre Bilder per Drag & Drop in WebPonize ziehen und übernehmen die Konvertierung. Sie erhalten die Ausgabe, die Vorgröße, Nachgröße und den Prozentsatz der Verkleinerung der Originaldatei. [WebPonize herunterladen]

Webpconv zum Windows

Wenn Sie Windows verwenden, ist Webpconv die App, die Sie installieren sollten. Es ist auch als tragbare Version erhältlich, sodass Sie es unabhängig auf Ihrem Flash-Laufwerk ausführen können. [Download Webconv]

Konvertieren mit Befehlszeilen

Wenn Sie sich geeky fühlen, möchten Sie möglicherweise die Konvertierung mithilfe von Befehlszeilen durchführen. cwebp konvertiert Ihre JPEG-, PNG- oder TIFF-Bilder in das WebP-Format und dwebp konvertiert sie wieder in das PNG-Format. Mal sehen, wie das funktioniert.

Hinweis: Die folgende Anleitung für Mac OS X. Klicken Sie für Benutzer von Windows und Linux hier.

Einrichten von MacPorts unter Mac OSX

Vergewissern Sie sich zunächst, dass Xcode installiert ist, und führen Sie dann die folgenden Schritte aus:

1. Laden Sie MacPorts herunter und installieren Sie es. Wenn Sie MacPorts bereits auf Ihrem Mac installiert haben, fahren Sie mit Schritt 2 fort.
2. Starten Terminal.
3. Art "Sudo-Port-Selbstaktualisierung"und drücken Sie die Eingabetaste. Dadurch werden Ihre MacPorts auf die neueste Version aktualisiert.

   

4. Als nächstes geben Sie "sudo port install webp"und drücken Sie die Eingabetaste. Dies wird installiert libwebp (WebP-Bibliothek).

   

Das ist es. Lass uns einen Blick darauf werfen So konvertieren Sie Bilder mithilfe der Befehlszeile in WebP.

Befehle zum Konvertieren / Wiederherstellen

Hier sind die Befehle zu:

I - Konvertieren von JPEG / PNG-Bilddateien in das WebP-Format

Format: cwebp -q [Bildqualität] [JPEG / PNG-Dateiname] -o [WebP-Dateiname]

Beispiel:

cwebp -q 80 example.png -o example.webp 

II - Verdeckte WebP-Bilddateien zurück in PNG

Format: dwebp [WebP_Dateiname] -o [PNG_Dateiname]

Beispiel:

dwebp image.webp -o image.png 

MehrWenn Sie die Konvertierung auf andere Weise durchführen, finden Sie hier Anweisungen zur Verwendung von Grunt- und Gulp-Tasks zum Konvertieren von JPG / PNG-Dateien in WebP.

Mit Online-Tools konvertieren

Wenn Sie keine Anwendungen auf Ihrem Betriebssystem installieren, um diese Aufgabe auszuführen, entscheiden Sie sich für diese Online-Tools. Hier einige, die ich kennengelernt habe:

• Online-converter.com
• Webp-convertor.com
• Zamzar

Spitze: Wenn Sie google webp online konvertieren , Sie werden wahrscheinlich mehr Optionen finden.

Photoshop-Plugin

Sie können froh sein, dass es auch ein Photoshop-Plugin gibt, mit dem Sie Bilder über Photoshop im WebP-Format speichern können. Dieses Plugin unterstützt Mac OS X (CS 2- CS 6) und Windows (32 Bit & 64 Bit). [Laden Sie das Plugin hier herunter.]

Hinweis: Ich dachte nur, Sie sollten wissen, dass ich es mit Photoshop CC probiert habe. Hat dort nicht gearbeitet.

WebP Browser-Unterstützung

Zum Schluss sprechen wir noch über die Kompatibilität. Derzeit können Sie Bilder im WebP-Format in den folgenden Browsern anzeigen (ref):

• Chrome / Chrome für iOS
• Opera / Opera Mini

Nicht so viel Glück für Feuerfuchs und Safari, die das WebP-Format noch nicht nativ unterstützen. Sie können jedoch die WebPJS-Javascript-Bibliothek verwenden Konvertieren Sie WebP-Images in dataURI-Zeichenfolge auf der Client-Site.

Fallen Sie auf andere Bildformate zurück

Es ist immer eine gute Idee, einen Fallback zu verwenden, um Bildfehler aufgrund nicht unterstützter Browser zu vermeiden. In diesem Fall erfolgt der Rückfall auf das Bild im JPG- oder PNG-Format. So machen Sie es.

  source srcset = "example.webp 1x" type = "image / webp">   

Für diesen Code, images / complete-guide-to-using-webp-image-format_13.jpg wird geladen, wenn der Benutzer Firefox oder Safari verwendet.

Vorschau von WebP-Bildern

Sie können eine Vorschau der WebP-Bilder auf Chrome und Opera anzeigen. Wenn Sie dies jedoch lokal auf Ihrem Computer durchführen möchten, benötigen Sie einige Werkzeuge.

Mac-Benutzer können WebPQuickLook verwenden, um eine Vorschau des WebP-Formats mit der Schnellübersicht anzuzeigen (bei ausgewähltem oder markiertem Bild die Leertaste drücken)..

Für Windows-Benutzer zeigt WebPCodec eine Miniaturansicht der WebP-Bilder im Datei-Explorer an. Es werden sowohl die WebP- als auch die JPEG-Entsprechung angezeigt. Bei bestimmten unterstützten Windows-Betriebssystemen (Vista, 7, 8) kann das WebP-Bild auch im Windows Photo Viewer angezeigt werden.

Mehr: ReSCR.it liefert Bilder automatisch im WeBP-Format und ist verfügbar, wenn Sie Ihre Bilder mit MaxCDN speichern. (Weiterlesen)

Weitere Referenzen

• Umwandlung von Animated GIF in WebP
• Wie funktioniert WebP?
• Bereitstellen von WebP über Akzeptieren der Inhaltsverhandlung
• Schnelleres, kleineres und schöneres Web mit WebP
• Bereitstellen neuer Image-Formate im Web
• WebP-API-Dokumentation