Häufig gestellte Fragen

Was ist WebP? Warum sollte ich diese Funktion verwenden?

WebP ist eine Methode der verlustbehafteten und verlustfreien Komprimierung, die auf einer großen eine Vielzahl an fotografischen, durchscheinenden und grafischen Bildern, die im Web zu finden sind. Der Grad der verlustbehafteten Komprimierung ist anpassbar, sodass Nutzende einen Kompromiss zwischen Dateigröße und Bildqualität. WebP erzielt in der Regel eine durchschnittlich 30% mehr Komprimierung als bei JPEG und JPEG 2000, ohne Bildverlust (siehe Vergleichsstudie).

Das WebP-Format zielt im Wesentlichen darauf ab, kleinere, besser aussehende Bilder zu erstellen mit denen das Web schneller wird.

Welche Webbrowser unterstützen WebP nativ?

Webmaster, die an der Verbesserung der Website-Leistung interessiert sind, können ganz einfach optimierten WebP-Alternativen für ihre aktuellen Bilder auf Browser ausgerichtet, die WebP unterstützen.

• Verlustbehaftete WebP-Unterstützung <ph type="x-smartling-placeholder">
  </ph>
  • Google Chrome (Desktop) 17 und höher
  • Google Chrome für Android Version 25 oder höher
  • Microsoft Edge (ab Version 18)
  • Firefox (ab Version 65)
  • Opera 11.10 oder höher
  • Nativer Webbrowser, Android 4.0 und höher (ICS)
  • Safari 14 und höher (iOS 14 und höher, macOS Big Sur und höher)
• Verlustbehaftete, verlustfreie und Alpha-Support <ph type="x-smartling-placeholder">
  </ph>
  • Google Chrome (Desktop) 23 und höher
  • Google Chrome für Android Version 25 oder höher
  • Microsoft Edge (ab Version 18)
  • Firefox (ab Version 65)
  • Opera 12.10 und höher
  • Nativer Webbrowser, Android 4.2 und höher (JB-MR1)
  • Blasser Mond 26+
  • Safari 14 und höher (iOS 14 und höher, macOS Big Sur und höher)
• Unterstützung von WebP Animation <ph type="x-smartling-placeholder">
  </ph>
  • Google Chrome (Desktop und Android) 32 und höher
  • Microsoft Edge (ab Version 18)
  • Firefox (ab Version 65)
  • Opera 19 und höher
  • Safari 14 und höher (iOS 14 und höher, macOS Big Sur und höher)

Siehe auch:

• WebP-Artikel von Wikipedia
• Kann ich

Wie finde ich die Browserunterstützung für WebP?

Sie möchten WebP-Bilder nur für Kunden bereitstellen, die sie anzeigen können und bei Kunden, die dies nicht können, auf alte Formate zurückgreifen. Glücklicherweise gibt es mehrere Techniken, um WebP-Unterstützung zu erkennen. auf Client- und Serverseite. Einige CDN-Anbieter bieten WebP-Unterstützungserkennung an als Teil ihres Dienstes.

Serverseitige Verhandlung von Inhalten über „Accept“-Header

Es ist üblich, dass Webclients -Anforderungsheader, der angibt, welche Inhaltsformate sie akzeptieren. Wenn ein wird vom Browser im Voraus angegeben, image/webp-Format weiß der Webserver, dass er WebP-Bilder sicher senden kann, Inhaltsverhandlungen. Weitere Informationen finden Sie unter den folgenden Links.

• Neue Bildformate im Web bereitstellen
• WebP-Bilder für Besucher mithilfe von HTML-Elementen bereitstellen

Modernizr

Modernizr ist eine JavaScript-Bibliothek zum bequemen Erkennen von HTML5- und CSS3-Funktionen werden in Webbrowsern unterstützt. Suchen Sie nach den Eigenschaften Modernizr.webp, Modernizr.webp.lossless, Modernizr.webp.alpha und Modernizr.webp.animation:

HTML5-<picture>-Element

HTML5 unterstützt ein <picture>-Element, mit dem Sie mehrere, alternative Image-Ziele in der Reihenfolge ihrer Priorität, sodass ein Client das erste mögliche Bild, das korrekt angezeigt werden kann. Weitere Informationen finden Sie unter dieser Diskussion zu HTML5 Rocks. Das <picture>-Element ist immer von mehr Browsern unterstützt.

Im eigenen JavaScript-Code

Eine weitere Erkennungsmethode ist der Versuch, ein sehr kleines WebP-Bild zu decodieren, das eine bestimmte Funktion nutzt, und zu prüfen, ob der Vorgang erfolgreich war. Beispiel:

// check_webp_feature:
//   'feature' can be one of 'lossy', 'lossless', 'alpha' or 'animation'.
//   'callback(feature, result)' will be passed back the detection result (in an asynchronous way!)
function check_webp_feature(feature, callback) {
    var kTestImages = {
        lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
        lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
        alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
        animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
    };
    var img = new Image();
    img.onload = function () {
        var result = (img.width > 0) && (img.height > 0);
        callback(feature, result);
    };
    img.onerror = function () {
        callback(feature, false);
    };
    img.src = "data:image/webp;base64," + kTestImages[feature];
}

Das Laden von Bildern erfolgt nicht blockieren und asynchron. Das bedeutet, dass alle Code, der von WebP-Unterstützung abhängt, sollte vorzugsweise im Callback platziert werden. .

Warum hat Google WebP als Open Source veröffentlicht?

Wir glauben fest an die Bedeutung des Open-Source-Modells. Mit WebP Open Source ist, kann jeder mit dem Format arbeiten und Verbesserungen vorschlagen. Mit Feedback und Anregungen geben, glauben wir, dass WebP in Zukunft noch nützlicher werden wird. im Zeitverlauf als Grafikformat an.

Wie kann ich meine persönlichen Bilddateien in WebP konvertieren?

Mit dem Befehlszeilendienstprogramm WebP können Sie Ihre persönlichen Bilddateien konvertieren in das WebP-Format umwandeln. Weitere Informationen finden Sie unter WebP verwenden.

Wenn Sie viele Bilder konvertieren möchten, können Sie die Shell Ihrer Plattform verwenden, um den Vorgang zu vereinfachen. Versuchen Sie beispielsweise, alle JPEG-Dateien in einem Ordner zu konvertieren, Folgendes:

Windows:

> for /R . %I in (*.jpg) do ( cwebp.exe %I -o %~fnI.webp )

Linux / macOS:

$ for F in *.jpg; do cwebp $F -o `basename ${F%.jpg}`.webp; done

Wie kann ich die WebP-Bildqualität selbst beurteilen?

Derzeit können Sie WebP-Dateien ansehen, indem Sie sie in ein gängiges Format konvertieren mit einer verlustfreien Komprimierung wie PNG. jeden Browser oder Bild-Viewer. Einen schnellen Überblick über die WebP-Qualität findest du in der Galerie auf dieser Website für parallele Fotos vergleichen können.

Wie erhalte ich den Quellcode?

Der Umrechnungscode ist verfügbar auf der Downloadbereich des Open-Source-Projekts von WebP Seite. Der Code für den Light-Decoder und die VP8-Spezifikation sind auf der WebM-Website Weitere Informationen finden Sie in der Seite RIFF Container für den Container Spezifikation zu ändern.

Wie groß darf ein WebP-Bild maximal sein?

WebP ist Bitstream-kompatibel mit VP8 und verwendet 14 Bit für Breite und Höhe. Die maximalen Pixelabmessungen eines WebP-Bildes betragen 16.383 × 1.6383.

Welche Farbräume werden vom WebP-Format unterstützt?

In Übereinstimmung mit dem VP8-Bitstream funktioniert verlustbehaftetes WebP ausschließlich mit einem 8-Bit-Y'CbCr 4:2:0 (oft als YUV420 bezeichnet) im Bildformat. Weitere Informationen finden Sie im Abschnitt 2, Formatübersicht von RFC 6386, VP8-Leitfaden zum Formatieren und Decodieren von Daten .

Lossless WebP funktioniert ausschließlich mit dem RGBA-Format. Weitere Informationen finden Sie in der WebP Lossless Bitstream-Spezifikation.

Kann ein WebP-Bild größer als sein Quellbild werden?

Ja, in der Regel bei der Konvertierung von einem verlustbehafteten Format in ein verlustfreies WebP-Format und umgekehrt. Das liegt hauptsächlich am Farbraumunterschied (YUV420 vs. ARGB) und die Conversions dazwischen.

Es gibt drei typische Situationen:

1. Liegt das Quellbild im verlustfreien ARGB-Format vor, wird das räumliche Downsampling YUV420 führt neue Farben ein, die sich schwerer komprimieren lassen den Originalen. Diese Situation kann in der Regel eintreten, wenn die Quelle ist das PNG-Format mit wenigen Farben: die Umwandlung in ein verlustbehaftetes WebP (oder ein ähnliches in eine verlustbehaftete JPEG-Datei). Das führt unter Umständen zu einer größeren Dateigröße.
2. Bei Quelle in einem verlustbehafteten Format mit verlustfreier WebP-Komprimierung verlustbehaftete Art der Quelle zu erfassen, führt in der Regel in einer größeren Datei. Dies gilt nicht speziell für WebP. Eine JPEG-Quelle beispielsweise in ein verlustfreies WebP- oder PNG-Format umwandeln.
3. Wenn die Quelle in einem verlustbehafteten Format vorliegt und Sie versuchen, sie zu komprimieren als verlustbehaftetes WebP mit höherer Qualitätseinstellung. Zum Beispiel, wenn Sie versuchen, Eine JPEG-Datei mit der Qualität 80 in eine WebP-Datei mit der Qualität 95 konvertieren führt in der Regel zu einer größeren Datei, auch wenn beide Formate verlustbehaftet sind. Die Qualität der Quelle zu beurteilen, ist oft nicht möglich. Daher wird empfohlen, Die Ziel-WebP-Qualität senken, wenn die Datei dauerhaft größer ist Eine weitere Möglichkeit ist, die Qualitätseinstellung zu vermeiden, das Targeting auf eine bestimmte Dateigröße mit der Option -size im cwebp-Tool oder die entsprechende API verwenden. Beispiel: Ausrichtung auf 80% der Originaldatei kann sich als robuster erweisen.

Konvertierung einer JPEG-Quelle in verlustbehaftetes WebP oder einer PNG-Quelle in verlustfreies WebP WebP ist nicht anfällig für solche Überraschungen bei der Dateigröße.

Unterstützt WebP die progressive oder verschachtelte Anzeige?

WebP bietet keine progressive oder verschachtelte Decodierung im JPEG-Format oder PNG sinnvoll. Dadurch werden die CPU und der Arbeitsspeicher Client decodieren, da jedes Aktualisierungsereignis einen vollständigen Durchlauf des Dekomprimierungssystem.

Im Durchschnitt entspricht die Decodierung eines progressiven JPEG-Bildes der Decodierung des baseline dreimal.

Alternativ bietet WebP inkrementelle Decodierung, bei der alle verfügbaren eingehenden Bitstreams verwendet werden, um eine anzeigbare Beispielzeile als so schnell wie möglich. Dies spart Speicher, CPU und sorgt dafür, dass der Aufwand und visuelle Hinweise auf den Downloadstatus liefern. Die inkrementellen ist über die Advanced Decoding API

Wie verwende ich die libwebp-Java-Bindungen in meinem Android-Projekt?

WebP unterstützt JNI-Bindungen an den einfachen Encoder und Decoder Schnittstellen im Verzeichnis swig/.

Bibliothek in Eclipse erstellen:

1. Stellen Sie sicher, dass Sie ADT-Plug-in zusammen mit den NDK-Tools installiert und der NDK-Pfad korrekt festgelegt ist (Einstellungen > Android > NDK).
2. Erstellen Sie ein neues Projekt: Datei > Neu > Projekt > Android Anwendungsprojekt.
3. Klonen oder Entpacken Sie libwebp im neuen Projekt in einen Ordner namens jni.
4. swig/libwebp_java_wrap.c zur LOCAL_SRC_FILES-Liste hinzufügen.
5. Klicken Sie mit der rechten Maustaste auf das neue Projekt und wählen Sie Android Tools (Android-Tools) aus. Hinzufügen Native Unterstützung ..., um die Bibliothek in Ihren Build aufzunehmen.

6. Öffnen Sie die Projekteigenschaften und gehen Sie zu C/C++ Build > Verhalten: Hinzufügen ENABLE_SHARED=1 zum Abschnitt Build (Incremental build), um einen Build zu erstellen libwebp als gemeinsam genutzte Bibliothek verwenden.

   Hinweis: Die Einstellung NDK_TOOLCHAIN_VERSION=4.8 verbessert sich allgemein. Build-Leistung 32-Bit.

7. Fügen Sie swig/libwebp.jar dem Projektordner libs/ hinzu.

8. Erstellen Sie Ihr Projekt. Dadurch wird libs/<target-arch>/libwebp.so erstellt.

9. Verwenden Sie System.loadLibrary("webp"), um die Bibliothek zur Laufzeit zu laden.

Die Bibliothek kann manuell mit ndk-build und den enthaltenen Android.mk. In diesem Fall können einige der oben beschriebenen Schritte wiederverwendet werden.

Wie verwende ich libwebp mit C#?

WebP kann als DLL erstellt werden, die die libwebp API exportiert. Diese Funktionen können und dann in C# importiert.

1. Erstellen Sie libwebp.dll. Dadurch wird WEBP_EXTERN korrekt für den Export der API eingerichtet. Funktionen.

   libwebp> nmake /f Makefile.vc CFG=release-dynamic
   

2. Fügen Sie Ihrem Projekt libwebp.dll hinzu und importieren Sie die gewünschten Funktionen. Hinweis: Wenn Sie den einfache API Sie sollten WebPFree() aufrufen, um alle zurückgegebenen Zwischenspeicher freizugeben.

   [DllImport("libwebp.dll", CallingConvention = CallingConvention.Cdecl)]
   static extern int WebPEncodeBGRA(IntPtr rgba, int width, int height, int stride,
                                    float quality_factor, out IntPtr output);
   [DllImport("libwebp.dll", CallingConvention = CallingConvention.Cdecl)]
   static extern int WebPFree(IntPtr p);
   
   void Encode() {
     Bitmap source = new Bitmap("input.png");
     BitmapData data = source.LockBits(
         new Rectangle(0, 0, source.Width, source.Height),
         ImageLockMode.ReadOnly,
         PixelFormat.Format32bppArgb);
     IntPtr webp_data;
     const int size = WebPEncodeBGRA(data.Scan0,
                                     source.Width, source.Height, data.Stride,
                                     80, out webp_data);
     // ...
     WebPFree(webp_data);
   }
   

Warum sollte ich animiertes WebP verwenden?

Vorteile von animiertem WebP im Vergleich zu animierten GIFs

1. WebP unterstützt 24-Bit-RGB-Farben mit einem 8-Bit-Alphakanal im Vergleich zu GIF mit 8-Bit-Farbe und 1-Bit-Alpha.

2. WebP unterstützt sowohl verlustbehaftete als auch verlustfreie Komprimierung. tatsächlich eine einzige verlustbehaftete und verlustfreie Frames kombinieren. Nur GIF wird unterstützt verlustfreie Komprimierung. Die verlustbehafteten Komprimierungstechniken von WebP sind gut geeignet. bis hin zu animierten Bildern aus realen Videos, ein zunehmend beliebtes Quelle animierter Bilder.

3. WebP benötigt weniger Byte als GIF¹. Animierte GIFs, die in verlustbehaftete WebPs umgewandelt wurden, sind um 64% kleiner und verlustfrei WebPs sind 19% kleiner. Dies ist in Mobilfunknetzen besonders wichtig.

4. WebP nimmt bei der Suche weniger Zeit für die Decodierung in Anspruch. In Blinken, Scrollen oder Wechseln von Tabs kann zum Ein- und Ausblenden von Bildern, was dazu führt, dass Animationen pausiert werden und zu einer anderen Stelle springen. Übermäßige CPU-Nutzung, die zu bei Animationen, bei denen Frames ausgelassen werden, der Decoder auch eine Vorwärtsspule der Animation. In diesen Szenarien dauert das animierte WebP insgesamt 0, 57-mal so viel Time² als GIF decodieren, was zu weniger Verzögerungen führt. beim Scrollen und der schnelleren Wiederherstellung nach CPU-Auslastungsspitzen. Dies ist WebP gegenüber GIF bietet zwei Vorteile:

   • WebP-Bilder speichern Metadaten darüber, ob jeder Frame Alpha-, sodass für diese Feststellung der Frame nicht decodiert werden muss. Dies führt zu einer genaueren Ableitung, welche vorherigen Frames ein bestimmtes Frame abhängig ist, wodurch unnötige Decodierung vorheriger Frames.

   • Ähnlich wie bei einem modernen Video-Encoder fügt der WebP-Encoder heuristisch Keyframes in regelmäßigen Abständen einfügen (was bei den meisten GIF-Encodern nicht der Fall ist). Dadurch wird die Suche in langen Animationen erheblich verbessert. Um die Einfügen solcher Frames ohne signifikante Steigerung der Bildgröße, WebP fügt ein „Blending method“ (Mischungsmethode) melden für jeden Frame zusätzlich zu der Frame-Entsorgungsmethode, die GIF verwendet. So kann ein Keyframe so gezeichnet werden, als wäre das gesamte Bild gelöscht worden. zur Hintergrundfarbe ändern, ohne dass der vorherige Frame in Originalgröße anzeigen.

Nachteile von animiertem WebP im Vergleich zu animierten GIFs

1. Ohne die Suche ist die direkte Decodierung von WebP eher CPU-intensiv als GIF. Verlustbehaftetes WebP benötigt 2,2-mal so viel Decodierungszeit wie GIF, während WebP 1,5-mal so viel benötigt.

2. WebP wird nicht annähernd so weit verbreitet wie GIF, quasi universell.

3. Durch das Hinzufügen von WebP-Unterstützung zu Browsern wird der Code-Fußabdruck erhöht und Angriffsfläche. In Blink sind das etwa 1.500 zusätzliche Zeilen. Code (einschließlich der WebP-demux-Bibliothek und des blinkseitigen WebP-Bildes) Decoder). Beachten Sie, dass dieses Problem in Zukunft verringert werden könnte, wenn WebP und WebM haben gemeinsamen Decodierungscode in WebMs zusammengefasst.

Warum unterstützt ihr nicht einfach WebM in <img>?

Es kann langfristig sinnvoll sein, Videoformate im <img> zu unterstützen. Tag. Mit der Absicht, die WebM in <img> ausfüllen kann, die vorgeschlagene Rolle des animierten WebP ist problematisch:

1. Bei der Decodierung eines Frames, der auf vorherigen Frames basiert, benötigt WebM 50% mehr Speicher als animiertes WebP für die Mindestanzahl von vorherige Frames³.

2. Die Unterstützung von Video-Codec und Container variiert je nach Browser und Geräte. Um die automatische Transcodierung von Inhalten zu erleichtern (z.B. für Proxys sparen, müssen Browser entsprechende Header hinzufügen, gibt an, welche Formate ihre Bild-Tags unterstützen. Selbst dies könnte unzureichend, da MIME-Typen wie "video/webm" oder „Video/MPEG“ still geben Sie nicht an, welche Codec unterstützt werden (z. B. VP8 oder VP9). Auf der anderen ist das WebP-Format praktisch eingefroren. Er stimmt zu, animiertes WebP zu versenden, also das Verhalten von WebP in allen UAs. sollten einheitlich sein; Und da „image/webp“ Annahme-Header ist wird bereits verwendet, um die WebP-Unterstützung anzuzeigen; keine neuen Änderungen an der Annahme-Kopfzeile sind notwendig.

3. Der Chromium-Videostack ist für flüssige Wiedergabe. Dabei wird angenommen, dass jeweils nur ein oder zwei Videos . Daher ist die Implementierung im Hinblick auf die Nutzung des Systems (Threads, Arbeitsspeicher usw.) enthalten, um die Wiedergabequalität zu maximieren. Eine solche lässt sich nicht gut auf viele Videos gleichzeitig skalieren, müssen umgestaltet werden, damit sie für Webseiten mit vielen Bildern geeignet sind.

4. WebM umfasst derzeit nicht alle Komprimierungstechniken von WebP. Daher auf dieses Bild wird mit WebP deutlich besser komprimiert als die Alternativen:

   • GIF (85 KB)
   • WebM mit Alpha (32 KB)
   • Lossless animiertes WebP (5 KB) ⁴

¹ Für alle Vergleiche zwischen animierten GIFs und animierten WebPs: verwendete einen Korpus von etwa 7.000 animierten GIF-Bildern, die nach dem Zufallsprinzip aus dem Web aufgenommen wurden. Diese Bilder wurden mithilfe von „gif2webp“ in ein animiertes WebP konvertiert. mit dem Tool Standardeinstellungen (basierend auf den neuesten libwebp-Quellstruktur Stand vom 08.10.2013). Die Vergleichszahlen sind die Durchschnittswerte Bilder.

² Die Decodierungszeiten wurden mit der neuesten Version von libwebp + ToT berechnet. Blink (Stand: 08.10.2013) mit einem Benchmark-Tool. „Decodierungszeit durch Suchen“ wird berechnet als „Decodieren Sie die ersten fünf Frames, löschen Sie den Frame Zwischenspeichern, Decodieren der nächsten fünf Frames usw.“.

³ WebM speichert vier YUV-Referenzframes mit jedem Frame. (Breite + 96)*(Höhe + 96) Pixel gespeichert werden. Für YUV 4:2:0 benötigen wir 4 Byte pro 6 Pixel (oder 3/2 Byte pro Pixel). Diese Referenzframes verwenden also 4*3/2*(width+96)*(height+96) Byte Arbeitsspeicher. WebP hingegen nur der vorherige Frame (im RGBA-Format) verfügbar ist, also 4*width*height Byte Arbeitsspeicher.

⁴ Für das animierte WebP-Rendering ist Google Chrome Version 32 oder höher erforderlich