Eddie Osmani hat in dem Artikel „Der Preis von JavaScript im Jahr 2018 “ eine wertvolle Idee geäußert: Die Zeit, die erforderlich ist, um ein Skript mit einer Größe von 200 KB und ein Bild mit derselben Größe zu verarbeiten, variiert erheblich. Tatsache ist, dass der Browser bei der Verarbeitung des Codes umfangreichere Arbeiten ausführen muss als bei der Vorbereitung auf die Verwendung von Bildern. Folgendes sagt der Artikel dazu:Ein JPEG-Bild muss dekodiert, gerastert und angezeigt werden. Und das JS-Bundle ist notwendig, wenn wir es einfach betrachten, laden, analysieren, kompilieren, ausführen. Tatsächlich muss die Engine andere Probleme bei der Verarbeitung von JS-Code lösen. Im Allgemeinen sollte berücksichtigt werden, dass viel mehr Systemressourcen für die Verarbeitung von JavaScript-Code aufgewendet werden, dessen Größe in Byte mit der Größe anderer Materialien vergleichbar ist.Diese Worte wurden 2018 geschrieben, sind aber immer noch mehr als fair. In Anbetracht der gegenwärtigen Situation wird die hier zum Ausdruck gebrachte Idee heute etwas anders wahrgenommen.
Angesichts der Tatsache, dass jetzt eine Pandemie in der Welt ausgebrochen ist, habe ich festgestellt, dass meine Internetverbindung instabil geworden ist. Glücklicherweise funktioniert der größte Teil des World Wide Web aufgrund der Tatsache, dass das Internet von hervorragenden Spezialisten geschützt wird, die keine Müdigkeit kennen, immer noch einwandfrei. Aber im Internet passiert definitiv etwas. Ich verwende eine 100-Mbit / s-Verbindung, habe aber das Gefühl, auf einem 3G-Modem zu sitzen.Dies nimmt einige Änderungen an der obigen Argumentation vor. Tatsache ist, dass unsere Geräte JavaScript mit der gleichen Geschwindigkeit analysieren und kompilieren können, die sie vor einigen Wochen hatten. Daten werden jetzt jedoch langsamer durch Netzwerke übertragen. Daher ist es derzeit äußerst wichtig, wie viele Daten, die eine bestimmte Ressource darstellen, beim Laden dieser Ressource über das Netzwerk übertragen werden.Und Websites haben normalerweise viel mehr als 200 KB Bilder. Eine Seite mit mehreren Megabyte Bildern ist normalerweise der Fall. Viele Entwickler (und ich auch!) Denken in der Regel überhaupt nicht über die Größe von Medienmaterialien nach.Aber was sehr gut ist, ist die Optimierung der auf Webseiten verwendeten Bilder nicht so schwierig. In diesem Artikel werden wir über die Verwendung moderner Grafikformate wie WebP sprechen. In solchen Formaten gespeicherte Bilder sind häufig 2-3-mal kleiner als diejenigen, für die die alten und bekannten alten Formate (wie JPG und PNG) von allen verwendet werden. Die Verwendung neuer Formate kann die Situation ernsthaft zum Besseren verändern.Allgemeiner Überblick über moderne Grafikformate
Um die Arbeit mit Webgrafiken zu verbessern, können wir die folgenden drei Formate verwenden:- JPEG 2000 ist ein Format, das eine verbesserte Version von regulärem JPG ist. Dieses Format wurde 1997 hauptsächlich für den Einsatz im Kino und in der Medizin entwickelt. Sie können Bilder stärker als JPEG komprimieren, jedoch mit weniger Artefakten.
- JPEG XR ist ein Format im Zusammenhang mit JPEG 2000. Es wurde 2009 von Microsoft entwickelt.
- WebP ist ein Format, das Google 2010 für das Web erstellt hat. Das Hauptziel seiner Entwicklung war die Verwendung fortschrittlicher Methoden zur Optimierung von Bildern, um die Dateigröße zu reduzieren. WebP unterstützt Transparenz und sogar Animation.
Hier werden wir hauptsächlich über WebP sprechen. In JPEG-Formaten werden wir diskutieren, wo das Problem der Browserkompatibilität angesprochen wird.Wie viel können Sie mit alternativen Grafikformaten gewinnen?
Vor einigen Monaten habe ich das folgende Bild in einem Material verwendet.Das in einem Material verwendete BildIch habe einige Experimente durchgeführt, wobei die Verwendung der JPG- und PNG-Formate zum Speichern des Originalbilds berücksichtigt wurde. Ich habe die Bildoptionen mithilfe von Imagemin optimiert, um herauszufinden, was WebP mir anstelle dieser „Retro“ -Formatebietenkann.Die Ergebnisse waren unglaublich.Ich habe ähnliche Experimente mit vielen Bildern durchgeführt. Es stellte sich fast immer heraus, dass WebP-Dateien 30-70% kleiner waren als selbst optimierte Versionen von Grafikdateien anderer Formate.Dies kann die Frage aufwerfen, wie sich die Konvertierung in WebP auf SVG-Bilder auswirken kann. Ich habe solche Experimente mit SVG nicht durchgeführt. SVG ist ein Vektorformat. Dies bedeutet, dass die darin enthaltenen Bilder auf der Grundlage mathematischer Anweisungen und nicht auf der Grundlage von Informationen über die Farbe einzelner Pixel erstellt werden. Das Konvertieren eines SVG-Bildes in WebP bedeutet, die Skalierbarkeit von SVG-Bildern aufzugeben, was meiner Meinung nach nicht akzeptabel ist. Außerdem vermute ich, dass eine solche Konvertierung in den meisten Fällen zu einer Erhöhung der Dateigröße führt.Browser-Kompatibilität
Unter caniuse.com erfahren Sie, wie bestimmte Grafikformate von Browsern unterstützt werden .Das WebP-Format wird von den meisten Browsern unterstützt.Unterstützung für das WebP-Format durch BrowserObwohl die Unterstützung für dieses Format sehr hoch ist, ist es sehr schlecht, dass Safari und Internet Explorer es nicht unterstützen.Und hier finden Sie Informationen zur JPEG 2000-Unterstützung.Unterstützung des JPEG 2000-Formats durch BrowserJetzt ist Safari auf unserer Seite, aber der Internet Explorer ist wieder arbeitslos.Was ist mit JPEG XR?Unterstützung für das JPEG XR-Format durch BrowserUnd hier wurde Internet Explorer ausgezeichnet. Daher überschreiben wir mit diesen drei Formaten alle vorhandenen Browser (KaiOS Browser unterstützt keines dieser Formate und ich entschuldige mich bei ihm, dass er ihn ignoriert hat, aber ich weiß nicht einmal, um welchen Browser es sich handelt )Lassen Sie uns nun darüber sprechen, wie Sie verschiedene Bildformate für verschiedene Browser auswählen.Das Bildelement zur Rettung
HTML enthält zwei Elemente für die Ausgabe von Bildern. Der erste kann mit einem internationalen Popstar wie Madonna verglichen werden. Es ist img. Und die zweite ist wie eine neue Band, die nur in engen Kreisen von Musikliebhabern bekannt ist. Dies ist ein Element picture.Das Element pictureerschien viel später in HTML als img. Das Hauptziel dieses neuen Elements besteht darin, Entwicklern das Laden verschiedener Grafikressourcen zu ermöglichen, abhängig von der Bildschirmauflösung oder davon, ob der Browser ein bestimmtes Grafikformat unterstützt.So sieht der HTML-Code aus, der das Element verwendet picture:<picture>
<source srcset="/images/cereal-box.webp" type="image/webp" />
<source srcset="/images/cereal-box.jp2" type="image/jp2" />
<img src="/images/cereal-box.jxr" type="image/vnd.ms-photo" />
</picture>
Ein Element picturekann viele untergeordnete Elemente sourceund ein Element enthalten img. Der Browser parst sequentiell diese Elemente, Auswählen, auf der Grundlage des Attribut type(en media), eine von ihnen , die sie verwenden können. Wenn ein solches Element gefunden wird, ermittelt der Browser die Adresse des Bildes mithilfe des Attributs srcsetund zeigt dieses Bild dann mithilfe des Elements an img.Das Attribut srcsethat viel größere Fähigkeiten als das übliche src, aber zum Glück können wir es als analog betrachten src. Im Allgemeinen sind Elemente sourceso etwas wie Einstellungen, die unterschiedlichen Bildern entsprechen. Das imgBild, das am besten zu der Umgebung passt, in der die Seite angezeigt wird, ist enthalten.In Chrome beispielsweise kommt der Browser nach der Verarbeitung des obigen Markups zu etwas, das mehr oder weniger dem folgenden Code entspricht:<picture>
<img src="/images/cereal-box.webp" />
</picture>
Die Verwendung einer Reihe aufeinanderfolgender Elemente sourcebedeutet, dass mindestens eines davon in jedem Browser geeignet ist. Daher verwenden die meisten Browser ein Webp-Bild. Safari lädt ein JP2-Bild, dh ein JXR-Bild.Es sei daran erinnert, dass Internet Explorer das Element nicht unterstützt picture. Dieser Artikel ist für diesen Browser zu neu. Trotzdem funktioniert das obige Markup-Fragment im IE wie erwartet.Tatsache ist, dass der Browser, wenn er auf ein ihm unbekanntes Element stößt, es als Element betrachtet div. Infolgedessen sieht der IE beim Parsen unseres Codes viele Elemente divsowie ein Tag<img>welches den Pfad zum jxr-Bild enthält. Und wie sich herausstellt, ist dies genau das Format, das Internet Explorer unterstützt.Vereinfachte Alternative
Das obige Codefragment ist extrem gut, da Sie damit moderne Grafikformate in allen aktuellen Browsern verwenden können. Die Verwendung eines solchen Codes basiert jedoch auf der Annahme, dass die Bilder vorhanden sind, auf die er verweist.Wenn Sie solche Bilder selbst erstellen, müssen Sie viel Handarbeit in sie investieren. Wenn Sie sie automatisch generieren, kann dies die Erstellungszeit des Projekts erheblich verlängern. Wie Sie wissen, wird die Grafikverarbeitung bei vielen Bildern zu einem sehr langsamen Prozess.Nur sehr wenige Besucher meines Blogs verwenden den Internet Explorer (in den letzten 7 Tagen haben nur 3 Personen mit IE versucht, ihn anzuzeigen, was 0,02% des Datenverkehrs entspricht). Daher habe ich mich für eine vereinfachte Version der obigen Lösung entschieden:<picture>
<source srcset="/images/cereal-box.webp" />
<img src="/images/cereal-box.jpg" />
</picture>
Ich gebe den Browsern, die dieses Format unterstützen (Chrome, Firefox, Edge), ein kompaktes Webp-Bild, und Browsern, die dieses Format nicht unterstützen (IE, Safari), biete ich ein Erbe der Vergangenheit an - ein JPEG-Bild.Aus meiner Sicht ist dies ein Beispiel für eine fortschreitende Verbesserung. Das Projekt bleibt in älteren Browsern funktionsfähig, obwohl das Laden von Bildern länger dauert. Dies ist ein Kompromiss, der zu mir passt. (Ich hoffe, dass die WebP-Unterstützung bald auch in den Browsern von Apple angezeigt wird.)Überprüfung der Lösung
Entwicklertools gehen immer davon aus, dass das Bild das enthält, was ursprünglich in das srcTag- Attribut geschrieben wurde img. Wenn Sie das Element auf der Registerkarte überprüfen Elements, können Sie sehen, dass die Seite ein JPG-Bild verwendet.Um die Funktionsfähigkeit all dessen zu überprüfen, ist es meines Erachtens am besten, mit der rechten Maustaste auf das Bild zu klicken und das Element …In Chrome auszuwählen, wenn der Befehl ausgeführt wird. Das System sollte anbieten, die Datei mit der Erweiterung zu speichern .webp. In Safari handelt es sich jedoch um eine JPEG-Datei.Um genau herauszufinden, welche Grafikdatei beim Laden der Seite vom Server empfangen wurde, können Sie auf die Entwickler-Symbolleiste verweisen Network.Konvertieren Sie Bilddateien in das WebP-Format
Google hat eine Reihe von Tools entwickelt, die auf die Arbeit mit Webp-Dateien abzielen. Ein solches Tool heißt cwebp . Sie können damit Grafikdateien anderer Formate in WebP konvertieren.Wenn Sie MacOS verwenden, können Sie dieses Toolkit mit Homebrew installieren:brew install webp
Auf anderen Plattformen muss meines Erachtens das entsprechende libwebp- Paket aus dem Repository heruntergeladen werden .Nach der Installation der Tools können Sie sie folgendermaßen verwenden:cwebp -q 80 cereal.png -o cereal.webp
Betrachten Sie diesen Befehl:- Mit dem Flag
-q 80können Sie die Bildqualität einstellen. Sein Wert variiert von 1 (schlechteste Qualität) bis 100 (beste). Sie können mit verschiedenen Werten experimentieren. Ich fand heraus, dass es am besten ist, etwas in der Region von 70-80 zu fragen. - Der Dateiname
cereal.jpgist das Originalbild, das in webp konvertiert werden muss. - Die Konstruktion
-o cereal.webplegt den Pfad zur Ausgabedatei fest.
Niemand möchte Zeit damit verschwenden, solche Befehle manuell einzugeben. Glücklicherweise kann diese Aufgabe automatisiert werden.Verwenden moderner Bildformate in React-Anwendungen
Eine Komponente ist eine großartige Möglichkeit, einige der Kuriositäten des Elements zu ignorieren <picture>. Ich benutze dafür React-Komponenten. Meiner Meinung nach ist es sehr praktisch. So sieht es aus:const ImgWithFallback = ({
src,
fallback,
type = 'image/webp',
...delegated
}) => {
return (
<picture>
<source srcSet={src} type={type} />
<img src={fallback} {...delegated} />
</picture>
);
};
Die Verwendung der Komponente ist ImgWithFallbackder Arbeit mit einem normalen Tag sehr ähnlich img:<ImgWithFallback
src="/images/cereal.webp"
fallback="/images/cereal.png"
alt="A photo showing the expiration date on a box of Lucky Charms"
/>
Die Verwendung moderner Grafikformate mit stilisierten Komponenten
Wenn Sie Bibliotheken verwenden styled-componentsoder emotionan ein spezielles Bilddesign gewöhnt sind:const FancyImg = styled.img`
whatever: stuff;
`
Das sehr gute ist, dass es mit unserer Komponente funktioniert ImgWithFallback. Sie können es wie jede andere Komponente in den entsprechenden Wrapper einbinden:const FancyImg = styled(ImgWithFallback)`
whatever: stuff;
`
Der Grund für die Funktionsfähigkeit dieses Entwurfs liegt darin, wie die Hilfsstruktur genau funktioniert styled. Es generiert eine Klasse und bettet sie in das Dokument-Stylesheet ein. Anschließend wird der Name der generierten Klasse als Eigenschaft an die Komponente übergeben:<ImgWithFallback className="sc-some-generated-thing" />
Wir delegieren alle Eigenschaften an das untergeordnete Tag <img>. Daher werden die richtigen Stile auf das Bild angewendet, wie dies normalerweise der Fall ist. Alles funktioniert genau so, wie Sie es erwarten.Verwenden des Gatsby-Image-Pakets
Wenn Sie Gatsby verwenden, beachten Sie, dass das Paket gatsby-imagebei normaler Verwendung bereits viele Bildoptimierungen verwendet. Dies umfasst das Konvertieren von Bildern in das Webp-Format (obwohl Sie hierfür die entsprechende Option aktivieren müssen).Das Paket gatsby-imageerhebt keinen Anspruch auf Ersatz img. Die Verwendung ist möglicherweise nicht so einfach, die internen Mechanismen können zu Überraschungen führen, die dem Entwickler das Leben schwer machen.Wenn Sie an diesem Paket interessiert sind, lesen Sie die Dokumentation .Nachteile von WebP
Der einzige wirkliche Nachteil von webp, den ich gefunden habe, ist, dass es sehr unpraktisch ist, mit Dateien dieses Formats zu arbeiten.Die meisten Desktop-Image-Pakete unterstützen dies noch nicht. Beispielsweise kann ich unter MacOS keine Webp-Dateien in der Vorschau öffnen. Nehmen wir an, wenn ich ein Webp-Bild von einer Webseite speichere, kann ich es nicht auf meinem Computer anzeigen!Das Konvertieren von Webp-Dateien in JPEG-Dateien ist ein ziemlich einfacher Vorgang. Im Internet finden Sie viele kostenlose Dienste, die eine solche Konvertierung durchführen. Dies ist jedoch wiederum nicht so praktisch wie das Arbeiten mit herkömmlichen Grafikformaten. Wenn Ihre Site Benutzern das Herunterladen von Grafikdateien bietet, müssen Sie möglicherweise nicht zu webp wechseln.Zusammenfassung
Ich mag die Tatsache sehr, dass ich mit webp die Größe der Bilder in meinem Blog um etwa 50% reduzieren konnte. Neben der Tatsache, dass dies in unseren schwierigen Zeiten die Benutzererfahrung bei der Arbeit mit ihm verbessert, hoffe ich auch, dass ich dadurch ein wenig beim Bezahlen des Datenverkehrs sparen kann.Natürlich scheint die Idee, Bilddateien manuell in das Webp-Format zu konvertieren, ziemlich unpraktisch. Ich beschäftige mich bereits mit der Frage, wie JPG- und PNG-Dateien automatisch in dieses Format konvertiert werden können. Idealerweise sollte dieser Prozess vom Entwickler während der Montage der Site völlig unbemerkt ablaufen.Die Ersteller von Webprojekten sind normalerweise nicht besonders an den Funktionen der Verwendung neuer Bildformate interessiert. Ich glaube jedoch, dass das Verständnis dieses Problems sehr nützlich ist. Schließlich ist die Verwendung von WebP wahrscheinlich der einfachste Weg, um die Größe Ihres Webprojekts um Hunderte von Kilobyte zu reduzieren.Liebe Leser! Verwenden Sie das WebP-Format?