Bilder wie Kisten - was ist drin? Bericht in Yandex

Bilder und Videos sind „Black Boxes“, in denen sich viele interessante und unverständliche Dinge befinden. Sie können jedoch in einige Formate schauen, dort alles ändern und sehen, was passiert.

Polina Gurtovaya von der Evil Martians Company sprach auf unserer I   Frontend- Konferenz im Februar. Mit Hilfe des Experiments fand Polina heraus, wie einfache Bilder mit Metriken in „effektive Bilder“ umgewandelt werden können. Die Werkzeuge, die dies für uns tun können, untersuchte Polina näher am Ende des Berichts. Das Ergebnis war ein großartiger Ausflug in die Innenseiten und Funktionsprinzipien verschiedener Formate: von PNG und JPEG bis AV1 und exotisch.


- Hallo alle zusammen. Mein Name ist Polina, ich bin die Front in der Firma "Evil Martians".

Vielleicht kennen Sie Marsmenschen aus unseren vielen offenen Quellen. Ich werde dir später ein wenig über ihn erzählen. Und wahrscheinlich muss ich sagen, dass wir immer noch Produkte entwickeln und nicht nur Open Source sägen.



Die Materialien für den Bericht stehen Ihnen über einen wunderbaren Link im Repository auf GitHub zur Verfügung.



Lassen Sie uns ein wenig über die Optimierung sprechen. Wenn wir mit ihnen umgehen, ist das Problem, dass sie gut funktionieren, wenn wir verstehen, was wir tun. Wenn wir nicht verstehen, fällt es schlecht aus. Wenn es um Bildoptimierung geht, ist hier leider alles, wirklich nicht cool. Wir können die Bilder überhaupt nicht optimieren, und dann werden zwei Meter große Monster auf dem Stoß sein, es ist alles traurig und traurig.

Wenn wir optimieren, was machen wir dann? Wir denken: Hier haben wir ein Bild, es ist eine Art mysteriöse Black Box, und das Optimierungsprogramm macht etwas mit diesem Bild, eine Art schwarzer Schamanismus. Die Qualität der Optimierung, die wir erhalten, ist etwas zweifelhaft.



Schauen wir uns ein Beispiel an. Ich habe eine Katze im PNG-Format. Ich denke, wir müssen es optimieren. Was mache ich? Ich erstelle eine WebP-Version und füge beide Bilder sorgfältig in ein <picture> -Tag ein. Glaubst du, ich bin hier gut gemacht oder nicht? Warum gibt es so wenige Hände? Ich bin wirklich gut gemacht!

Ich habe alles richtig gemacht, aber die WebP-Version war zwei Kilobyte mehr als das Original. Das ist ein bisschen nicht das, was ich wollte.




Eine weitere Optimierung, Versuch Nummer 2. Ich habe einen kleinen Behälter auf der Seite und eine große, große Katze. Ich möchte eine große Katze in einen kleinen Behälter legen. Was mache ich? Ich mache eine Größenänderung, weil es dumm ist, Bytes über das Netzwerk zu fahren, wenn meine Containergröße klein ist. Natürlich berücksichtige ich das Gerätepixelverhältnis meines Geräts. Glaubst du, mir geht es hier gut oder nicht? Ich bin gut! Und schau was ich getan habe.

Ich benutze die libvips Bibliothek. Sie ist sehr cool und beliebt, und von meiner riesigen, aber glücklichen leichten Katze habe ich eine kleine und sehr schwere Katze bekommen. Die Versiegelung wurde während der Größenänderung (in Pixel) um das 2,5-fache (in Byte) erhöht. Cool, ja?



Damit uns dies nicht passiert, wir verstehen, wie wir unsere Bilder für unsere Aufgabe optimieren können, und im Allgemeinen, damit wir zumindest verstehen, was passiert, schauen wir in die Box und verstehen, was sich darin befindet.



Betrachten wir zunächst ein so interessantes Format wie PNG. Um jeden Ort herum ist irgendwo eine kleine Peengshechka versteckt. Diesmal. Daher müssen sie verstanden werden. Zweitens: PNG - verlustfreies Komprimierungsformat. Dies bedeutet, dass wir eine perfekte Übereinstimmung mit dem Original in Pixel garantieren, aber gleichzeitig sind wir leider von Natur aus begrenzt und können nicht weniger als wie viel komprimieren.



Peengeshka faltet sich wie jedes Bildformat zu einem Behälter zusammen. Eines der ersten Dinge, die wir dem Programm mitteilen müssen, wenn es alles liest, ist das, was sich darin befindet. Wenn Sie davon ausgehen, dass Ihre Decoder Bilder durch Erweiterung bestimmen, ist dies nicht der Fall.

Pengashka berichtet, dass es sich um PNG handelt, die ersten acht Bytes in seinem Container. Es heißt "PNG". Außerdem - dies ist wiederum für jeden Container charakteristisch - haben Sie eine gewisse Anordnung von Blöcken. Das heißt, die Informationen sind in Stücken verpackt, sie sind irgendwie angeordnet. Wie - definiert den Container. In PNG sieht es so aus: Sie haben vier Bytes, die für die Länge verantwortlich sind, und vier Bytes, die für die Art des Chunks verantwortlich sind. Welche Typen - wir werden etwas später sprechen. 

Wenn der Block eine Länge ungleich Null hat, hat er eine Nutzlast. Darüber hinaus gibt es eine Prüfsumme. Sie überprüfen, ob dort etwas geschlagen wurde. Als nächstes kommen die folgenden Stücke.



Es ist ziemlich einfach, nicht nur eine PNG-Datei zu analysieren, sondern fast jede. Nehmen Sie FileReader, dies ist eine Browser-API. Wir lesen die Datei mit FileReader. Sobald wir gelesen haben, schneiden wir diese Datei in Stücke. Ich werde hier nicht den Code der Split-to-Chunks-Funktion angeben, aber Sie können sich vorstellen, dass es eine komplizierte Kombination von if und for gibt. 




Okay, wir haben es geschafft, wir werden sehen, was passiert. Wir haben verschiedene Arten von Chunks, die für fast jedes Format sehr, sehr charakteristisch sind. Der erste heißt IHDR. Es gibt eine Reihe von Blöcken, die als IDATs bezeichnet werden. Diese Namen mögen Ihnen etwas seltsam erscheinen, aber wir werden jetzt herausfinden, was es ist. Wenn alles endet, sehen wir den Endblock.



Schauen wir uns die Brocken genauer an. IHDR ist ein Meta-Chunk, und fast jedes Bild hat einen solchen Meta-Chunk. Es heißt anders, es ist anders angeordnet, aber es ist höchstwahrscheinlich. Ohne sie kann Ihnen Ihr Dekompressor - eine Sache, die Ihnen Peengeshki oder Nicht-Peengeshki zeigt - nichts zeigen. Was liegt in diesem Stück? Auch hier ist der Inhalt typisch für die meisten Formate. Dies ist die Höhe und Breite. Die Höhe und Breite sind in Ihre Datei eingenäht, es kommt zu Ihnen. Als nächstes folgen typische Panache-Flags: bitDepth, colorType und Interlacing. 



Bevor wir darüber sprechen, was diese Flags bedeuten und warum sie für uns so sehr, sehr wichtig sind, wollen wir uns ansehen, wie wir Pixel in Pangshes speichern. In Peaneshs werden Pixel in einem Block namens IDAT gespeichert. In einem guten Szenario sind Pixel eine bestimmte Anzahl von Zahlen, die in einen Block gepackt werden, und dieser Block wird durch den Deflate-Komprimierungsalgorithmus komprimiert. Wer hat den Deflate-Komprimierungsalgorithmus verwendet? Okay, wann hast du das letzte Mal etwas gezippt? Wissen Sie, dass Deflate gzip ist? Also ich denke - viele haben es benutzt.

Aber in Peengeshah erscheint eine andere interessante Sache, die in einer Vielzahl von Formaten verwendet wird, aber wahrscheinlich in allen. Dieses Gizmo wird als Predictive Coding bezeichnet. Tatsache ist, dass unsere Bilder keine zufälligen Pixel sind. Was auf unser kleines Bild gemalt ist, ist irgendwie miteinander verbunden. Es gibt einige dunkle Bereiche, helle Bereiche und so weiter.

Wir versuchen, diese Tatsache auszunutzen, und anstatt den Pixelwert in diesen blauen Zellen zu speichern, versuchen wir, diese Pixel basierend auf den vorherigen vorherzusagen. In PNG sind diese Vorhersagen sehr einfach und werden im allerersten Byte vor der Zeile mit Pixeln gepackt. Eine Vorhersage kann so sein. Lassen Sie uns zum Beispiel nichts vorhersagen und einfach alles so setzen, wie es ist. Oder wir können zum Beispiel Folgendes sagen: Lassen Sie uns jedoch nur den Unterschied zwischen dem aktuellen und dem vorherigen Pixel beibehalten.

Wenn Sie die gleiche Farbe in Ihrer Linie haben, haben Sie alle Nullen, alles ist perfekt komprimiert, das ist sehr cool.



Aber jetzt reden wir darüber, was ein Pixel eigentlich bedeutet. Ein Pixel erscheint in einem Peengesh als eine Anzahl von Zahlen. Durch Manipulieren der Anzahl der Zahlen können Sie Ihr PNG sehr, sehr eng komprimieren - dreimal.

Welche Möglichkeiten gibt es? Das erste ist True Color und Alpha. Wir haben drei Kanäle, drei Farben, drei Zahlen pro Farbe. Plus ein Kanal, der für Transparenz verantwortlich ist.

Die Größe dieser Zahl in Bit ist bitDepth, das gleiche Flag, das wir im IHDR-Block gesehen haben. Je kleiner Ihre bitDepth ist, desto kleiner ist die Datei, aber desto weniger Farben können Sie ihnen präsentieren. Eine typische Zahl ist 8. Wie viel kostet es? Meiner Meinung nach wird es 16 Millionen mit etwas geben.

Okay, die erste Optimierung, die Sie durchführen können, besteht darin, die Alphakanäle in Ihrem Peengesh wegzuwerfen. Dies ist ein anderer Farbtyp.

Sie können noch besser optimieren und nur eine statt vier Zahlen verwenden. Aber das Problem ist, dass dann Ihre Peengeshka schwarz und weiß sein sollte.

Wenn Sie immer noch nur eine Nummer möchten und die Farben belassen, können Sie dies auch tun. Was ist denn hier los? Sie nehmen alle Farben in Ihre Peengeshka und schneiden sie in ein separates Stück. Nennen wir es eine Palette. Weiter im Sample, das für das Pixel im IDAT-Block verantwortlich ist, speichern Sie einfach den Index dieser Palette. Wenn Sie einen Screenshot ohne komplizierten Hintergrund oder eine Zeichnung haben, ist dieses Ding einfach perfekt. Sie drückt Peengeshki richtig wow!

Ein weiterer wichtiger Punkt ist Interlacing. Was ist Interlacing? Dies ist, wenn Sie Ihre Peengeshka nach und nach versenden. Sie haben nicht eine Peengeshka, sondern mehrere Bilder. Jedes Bild wird als Scan bezeichnet.



Gleichzeitig sortieren Sie die Pixel im Paengashka so, dass einige der Pixel aus den Bildern herausgerissen werden. Ein Bild stammt von bestimmten Stellen. Der nächste Teil ist ein anderer und so weiter. Eine scheinbar coole Technik wie progressives JPEG.

Aber es sieht so aus. Ich bin mir nicht sicher, ob Ihre Benutzer dies sehen sollen, obwohl es für Ihre Aufgabe nützlich sein kann.

Das zweite und sehr ernste Problem von Interlaced PNG ist, dass die Größe Ihrer Peengeshka größer wird, sobald Sie Ihre Peengeshka verschachteln. Und nicht mehr so ​​schwach, irgendwo in ein paar Kilobyte wächst Ihre sechs Kilobyte große Peengeshka, wenn Sie Interlaced ausschalten. Überlegen Sie sich daher genau, ob Sie es möchten oder nicht.



Wir haben nur über PNG gesprochen, aber aus dieser Sache können Sie wichtige und nützliche Schlussfolgerungen ziehen. Erste Schlussfolgerung: Die Größe Ihrer Datei hängt nicht davon ab, was dort gezeichnet wird. Das schwarze Quadrat schrumpft besser als die Katze, ich werde hier keine Empfehlung geben. Zweitens, wichtiger: Die Größe Ihrer Datei hängt stark vom Encoder und den von Ihnen übertragenen Parametern ab.

Wenn Sie sehen möchten, wie schreckliche Encoder funktionieren, verwenden Sie die Browser-Encoder. Wie es gemacht wird? Nehmen Sie die PNG-Datei, zeichnen Sie sie auf Leinwand, klicken Sie auf Speichern unter und vergleichen Sie, was passiert ist, mit dem, was passiert ist. Im Allgemeinen erhöht Chrome Ihre Dateigröße um das 2,5-fache, Firefox um das 1,6-fache.

Übrigens kommt es auch immer auf das Format an, das heißt, es sollte nicht nur PNG verwendet werden. Lassen Sie uns verstehen, warum alles vom Format abhängt und welche interessanten Optionen wir noch haben.



Dazu werden wir über die Technologie der Alten sprechen, über JPEG. Sie können die Bedeutung von JPEG natürlich nicht herunterspielen. Sie sind überall zu finden. Sie sind so cool, gut und vor allem Siegel in JPEGs sind eine ziemlich häufige Geschichte. Aber JPEG ist eine ziemlich komplizierte Sache, und es ist kompliziert, weil JPEG eine verlustbehaftete Komprimierung ist. Darüber hinaus ist JPEG immer eine verlustbehaftete Komprimierung. JPEG 100% Qualität wird immer noch mit Verlust komprimiert.

Wie bekommen wir verlustbehaftete Komprimierung? Sehr einfach. Wir nehmen eine Quelle, werfen die Daten daraus heraus und komprimieren sie dann ohne Verlust. Das heißt, plus einen Schritt.



Schauen wir uns an, wie wir Verluste in unseren JPEGs machen. Sie haben also eine Katze mit einer Größe von 32 x 32. Damit wir den ersten Schritt mit Verlusten machen können, müssen wir unsere Kanäle wechseln. Normalerweise sprechen wir über Bilder in Bezug auf RGB. Aber wir nehmen Farben etwas kompliziert wahr. Unser Gehirn ist im Allgemeinen ein großes Problem, obwohl es uns sehr hilft, JPEG zu komprimieren.

Wir nehmen Schwarz und Weiß sehr gut wahr. Selbst wenn Sie genau hinschauen, werden Sie feststellen, dass die Details im Schwarzweißbild, die Sie unterscheiden, besser sind. Wir haben dieses Schwarzweißbild einfach in einen separaten Kanal eingefügt. Es heißt Y. Eigentlich der Y-Balken. Wir machen nichts mit ihm, wir lassen ihn einfach so wie er ist.

Es gibt zwei weitere Kanäle, die für die Farbe verantwortlich sind. Dies sind CB und CR. Mit diesen Kanälen können wir schon ein bisschen Spaß haben. Hier mit diesen Kanälen erzeugen wir ein so cooles Verfahren namens Downsampling. Wir nehmen und reduzieren die Auflösung dieses Kanals. Für JPEG ist es typisch, sich zu halbieren. Das heißt, Sie erhalten drei Bilder - ein Original und zwei halb so viel. Hurra!

Was machen wir als Nächstes? Wir komprimieren kein JPEG, nicht wie eine ganze Datei. Wir zerlegen es in Blöcke und komprimieren weiter, wir starten bereits Blöcke. JPEG-Blöcke sind 8 x 8 groß und sehen, was mit ihnen passiert. Schauen wir uns nur Kanal Y an. CB und CR sind alle gleich.



Ein Block ist also kein Bild, sondern Zahlen. Wir müssen Verluste im JPEG machen. Dieser Block ist 8 mal 8, 64 Pixel, welchen soll man wegwerfen? Der links, der rechts, der in der Mitte? Unverständlich. Aber es gibt coole Mathematik, mit der wir dieses Problem lösen können.

Diese Mathematik heißt - bitte seien Sie nicht nervös, wenn sich jemand an die schreckliche institutionelle Vergangenheit erinnert - die diskrete Kosinustransformation. Mit Hilfe dieser diskreten Cosinustransformation können Sie diese Zahlen in Ihrem Block so konvertieren, dass sie für sie wichtig und unwichtig sind.

Wichtig: Nach der Konvertierung verbleiben wichtige Zahlen im oberen linken Teil des Blocks. Unten rechts bleiben unwichtige Zahlen.

Als nächstes müssen Sie Ihren JPEG-Verlust machen. Dies ist auch sehr einfach zu tun. Dieser Trick heißt Quantisierung. Tut mir leid, wenn Sie jetzt schlafen wollen, aber das ist wichtig, glauben Sie mir. Diese Quantisierung funktioniert also ziemlich einfach. Sie nehmen Ihren Block und eine speziell entworfene Platte. Diese Platte wird von Ihrem Encoderprogramm bestimmt. Die Zahlen, die sich in Ihrem Block herausgestellt haben, teilen Sie durch diesen Plattenbegriff durch Zahl und Ganzzahl. Was bekommen Sie als Ergebnis?

Da die Zahlen im unteren rechten Teil der Platte groß sind, gibt es nur Nullen.



Gleichzeitig mit Ihrem JPEG wird Ihr Block perfekt komprimiert. Sie werden eine kleine Anzahl von Zahlen haben, die Sie in einem so komplizierten Zickzack umgehen werden, die Nullen werden alle verschwinden und unser Block ist zur Komprimierung bereit. Dann müssen wir es nur noch mit einem verlustfreien Komprimierungsalgorithmus komprimieren. JPEG verwendet Huffman-Codierung, was auch immer es ist.



Wie ist es in einem Container verpackt? JPEG-Container sehen ein wenig dumm aus, ich habe Angst vor ihnen. Weil Sie die ersten zwei Bytes sehen und es heißt, dass dies höchstwahrscheinlich JPEG ist. Aber bisher ist es nicht klar.

Als nächstes müssen Sie nach zwei Meta-Chunks suchen. Warum zwei? Weil JPEG eine sehr große Anzahl unterschiedlicher Standards ist. Was wir JPEG nennen, heißt standardmäßig JIFF. Dies ist eine spezielle Erweiterung des JPEG-Standards. Ich werde nicht weiter machen - im Allgemeinen gibt es zwei Meta-Chunks, vertrau mir einfach. Diese Meta-Chunks enthalten Informationen über die Breite und Höhe Ihrer Datei und die Version von JPEG. Stellen Sie sich vor, JPEG hat mehr Versionen! Und außerdem ist es progressives JPEG? Dies ist eine wichtige Flagge. Er spricht darüber, wie Ihre Blöcke weiter verteilt werden.

Wenn JPEG nicht progressiv ist, was brauchen Sie dann, um Ihre Blöcke zu dekodieren? JPEG-Qualität, genau diese Platte. Die Platte, in die Sie Ihre Blöcke unterteilen, ist Qualität. JPEG hat jedoch zwei Eigenschaften. Die erste Qualität ist für Kanal Y verantwortlich, die zweite - für die Kanäle CB und CR bestimmt dies die Farbe. Da wir die Qualität in eine Datei einfügen und alles mit einem verlustfreien Komprimierungsalgorithmus komprimieren, benötigen wir noch ein spezielles Huffman Tables-Wörterbuch, um dies zu erweitern.

Als nächstes kommen Ihre Blöcke und dann ist Ihr JPEG vorbei.



Okay, eine progressive Geschichte. Alles ist genau das gleiche. Ganz am Anfang haben Sie einen Meta-Chunk. Als nächstes kommt Ihre Qualität in Form von 64 Zahlen plus 64 Zahlen. Und dann nur die gleichen Blöcke, aber nur ein bisschen anders mit verteilten Zahlen. Erster Teil der Blöcke, dann ein anderer Teil, ein anderer Teil und so weiter. Wenn Sie diese Blöcke erhalten, zeichnet der Browser eine Annäherung an Ihr JPEG, da diese Zahlen tatsächlich eine Annäherung an Ihre Datei sind.



Über JPEG haben wir fertig, man kann ausatmen, alles ist gut. Lassen Sie uns über eine so interessante Sache wie JPEG 2000 sprechen. Verwendet einer von Ihnen in der Produktion JPEG 2000? Okay, wer hat jemals davon gehört? Und wer von euch hat in Lighthouse gelesen - "benutze moderne Formate"?

Im Allgemeinen ist JPEG 2000 ein cooles interessantes Format, das zum einen effektiver ist als JPEG. Zweitens werden Sie es nicht glauben, in einigen Fällen ist es effektiver als WebP, worüber wir später sprechen werden.

Er weiß, wie man transparent ist, wie man ohne Verlust komprimiert. Einfach das perfekte Format. Aber leider funktioniert es nur in Safari.

Es ist erwähnenswert, dass JPEG 2000 auf sehr komplizierte Weise entworfen wurde und mit cooler Mathematik arbeitet, die als Wavelet-Transformation bezeichnet wird. Wenn Sie plötzlich interessiert sind, googeln Sie und wir werden weiter gehen.



Dann müssen wir plötzlich über das Video sprechen. In diesem gesamten Bericht geht es um Bildoptimierung und um Bilder. Aber das Video hier ist sehr wichtig, Sie werden jetzt sehen warum. Wenn wir an ein Video denken, ist das erste Wort, das uns in den Sinn kommt, „Codec“. Das Video muss irgendwie codiert werden, und um das Video zu zeigen, müssen wir es decodieren. Was bekommen wir, wenn wir den Videostream dekodieren?

Zunächst haben wir eine Reihe von Frames. Stellen Sie sich diese Frames jedoch nicht als Bilder im GIF vor. Alles falsch. Welche Frames stark vom Codec abhängen. Im Allgemeinen können Sie jedoch davon ausgehen, dass Sie einen Keyframe haben. Sie können eine Katze aus dem Keyframe herausholen - in dem Sinne jedes Bild, das sich auf diesem Keyframe befindet. Und es gibt abhängige Frames. Es ist unmöglich, eine Katze aus dem abhängigen Rahmen herauszuholen, da der abhängige Rahmen nicht nur Informationen über das Bild speichert, falls vorhanden, sondern auch darüber, wie sich die Blöcke des vorherigen oder vorherigen Rahmens darauf bewegt haben. Daher können Sie erst dann ein Bild für einen abhängigen Frame erhalten, wenn Sie ein wenig dekodieren.

Alles, worüber wir jetzt sprechen werden, ist die Keyframe- und Intraframe-Komprimierung. So komprimieren Sie ein Bild in einem Keyframe.

Schauen wir uns einen abstrakten Codec im luftleeren Raum an und vergleichen ihn mit JPEG. Bisher scheint es - warum das? Alles wird klarer, vertrau mir.



Wir wiederholen noch einmal das Gleiche wie mit JPEG. Sie nehmen ein Bild auf, teilen es in Kanäle auf und führen ein Downsampling auf Kanäle durch. Gleiche Geschichte hier. Dann zerlegen Sie dieses Bild in Blöcke. Es gibt aber schon Features. Zunächst hängt die Größe des Blocks, in den Sie einbrechen, von Ihrem Codec ab. Und diese Blöcke können sehr groß sein. Für JPEG - 8 x 8. Für Video-Codecs kann es beispielsweise 128 x 128 sein.

Weiter. Wenn Sie einige sehr kleine Details zu Ihrem Bild erhalten, auf die Sie achten möchten, können Sie die Blöcke dennoch ein wenig unterteilen, ungefähr auf Größe 4 mal 4. Wie Sie die Blöcke aufteilen, hängt dieser Partitionierungsalgorithmus vom Codec ab.

Und die neueste - die maximale Blockgröße ist wiederum spezifisch für Ihren Codec. Ein Encoder ist Teil des Codecs, um in der Terminologie zu verstehen. Hier ähneln wir noch JPEG.



Was nicht wie JPEG aussieht, ist Predictive Coding. Wir haben teilweise über Peengeshki über ihn gesprochen. Die Intraframe-Videokomprimierung ist gerade deshalb so cool und effektiv. Was ist denn hier los?

Wir versuchen, die Pixel jedes Blocks basierend auf den vorherigen vorherzusagen. Das heißt, wir speichern Pixel nicht in Rohform, wir sagen sie voraus. Es gibt viele Vorhersagemöglichkeiten. Innerhalb eines Codecs können wir verschiedene Varianten von Vorhersagen verwenden. Darüber hinaus für alle Arten von komplizierten Codecs dieser Optionen, zum Beispiel bis zu 35. Wie kannst du das tun. Schauen wir uns ein Beispiel an.

Hier haben Sie den Block. Sie sagen: Ich möchte dort Pixel vorhersagen. Du schaust nach links, du schaust nach oben und erinnerst dich daran, was noch übrig ist. Als nächstes nehmen Sie alle gefundenen Pixelwerte, mitteln und füllen sie mit einem Block und sagen: Ich habe vorausgesagt. Wenn Sie richtig geraten haben und auf dem kleinen Bild mit den blauen Pfeilen übrigens richtig geraten haben, dann sind Sie großartig, Sie müssen nichts anderes tun. Wenn Sie jedoch nicht geraten haben, müssen Sie den Unterschied zwischen dem, was tatsächlich ist, und dem, was Sie vorhergesagt haben, speichern. Dieser Unterschied komprimiert viel, viel besser als der reine Pixelwert.



Dann ist alles genau das gleiche wie in JPEG. Sie transformieren den resultierenden Block. Die Besonderheit aller Arten verschiedener Codecs ist jedoch, dass Sie nicht DCT (diskrete Cosinustransformation) verwenden können, sondern etwas anderes. Was zu verwenden ist, hängt vom Codec ab.



Andererseits die gleichen Platten, aber im Gegensatz zu JPEG können Sie mehr als eine Platte für Ihre gesamte Datei verwenden, und Sie können mehrere verschiedene Platten für verschiedene Blöcke verwenden. Stellen Sie sich vor - Sie haben zum Beispiel eine Person gegen den Himmel. Da der Himmel blau ist, benötigen Sie dort möglicherweise keine spezielle Qualität. Sie können eine Qualität für den Himmel verwenden, eine Platte. Und für eine Person, die irgendeine Textur hat, Kleidung, verwenden Sie eine andere Qualität, und es stellt sich heraus, cool und effektiv.



Das jüngste ist, was JPEG nicht hat und was JPEG sehr, sehr fehlt. Dies ist die Verwendung von Filtern. Wenn wir alle geerntet haben, bekommen wir nach der Komprimierung so böse Artefakte. Wenn Sie jemals JPEGs auf niedrige Qualität komprimiert haben, sollten Sie sehen, wie JPEGs einfach in albtraumhafte schreckliche Blöcke zerfallen. Um diese Artefakte loszuwerden, verwenden Video-Codecs im Allgemeinen etwas Besonderes. Sie wenden Filter an und die Kanten dieser Blöcke werden geglättet. Die Technologie der Alten, die es uns ermöglichte, dasselbe mit JPEG zu tun, war eine solche. Sie nehmen Ihr JPEG, komprimieren es sehr, sehr stark und biegen es dann so, dass nichts auffällt. Im Allgemeinen ist dies ungefähr das Gleiche, wurde jedoch bereits auf Codec-Ebene durchgeführt. Großartig.



Als wir es versuchten und dies alles erledigt war, müssen wir natürlich die empfangenen Blöcke ohne Verlust komprimieren. Wir drückten, gut gemacht. Der Komprimierungsalgorithmus ähnelt JPEG, ist jedoch immer noch unterschiedlich. Hierbei ist zu verstehen, dass die verlustfreie Komprimierung durch die natürliche Grenze begrenzt ist. Wir wollen wirklich näher daran heranrücken, und der beste Weg, näher daran heranzukommen, ist die Verwendung eines Algorithmus namens Arithmetische Codierung. Und es gibt auch alle möglichen Variationen. Dies hängt wiederum vom Encoder ab, aber nehmen wir einfach an, dass es eine verlustfreie Komprimierung gibt und ca.



Ich wollte diese abstrakten Codecs schon lange im luftleeren Raum bei ihren Eigennamen nennen. Ein kleiner historischer Ausflug. Was ist in 20 Jahren passiert? Ich spreche nur von den Video-Codecs, die zumindest irgendwie im Web unterstützt werden. H.264 ist ein Codec, der alles und jeden unterstützt. Dies ist die Standardlösung für das gesamte Video. Nach einer gewissen Zeit, nach einigen Jahren, erscheint der VP8-Videocodec.

Hier beginnen wilde Kriege, Holivars zum Thema, welche dieser Codecs besser sind. Ich habe sehr lange gegoogelt - es gibt keine Antwort. Es wurden großartige wissenschaftliche Artikel darüber geschrieben, aber im Durchschnitt wird, wenn ich das jetzt sage, eine Tomate in mich hineinfliegen. Aber okay, sie sind die gleichen. Im mittleren. Warum brauchen wir dann eine Sekunde?

Der zweite wird benötigt, weil er kostenlos ist. Wenn Sie H.264 verwenden, müssen Sie unter bestimmten Umständen MPEG-Geld mit sich führen. Für VP8 müssen Sie kein Geld bei sich tragen. Das ist gut. Also, VP8 Keyframe - das ist WebP. Warum sollten wir ein neues Bildformat erfinden? Wir nehmen den Keyframe, wir haben uns so sehr bemüht, dass wir alles zusammengedrückt haben. Wir nennen das alles ein neues Format von Bildern und voila!

Was passiert als nächstes? Nach einigen Jahren erscheinen dann fast gleichzeitig zwei weitere coole Video-Codecs von MPEG und Google. Von Google - VP9, ​​von MPEG - H.265. Neben H.265 gibt es einen neuen Bildstandard namens HEIF. Es wird von Browsern nicht unterstützt, überhaupt nicht. Es wird jedoch von Ihren Apple-Geräten unterstützt. Der HEIF-Standard ist wahnsinnig interessant, weil er nur eine Abstraktion dieser Idee ist. In einem HEIF-Container können Sie Keyframes von fast jedem Codec aus stopfen. Das heißt, VP8 ist kein modernes Format. Aber HEIF ist modern.

Was passiert als nächstes? In einer sehr großen Organisation, zu der Mozilla und Google gehören, wird derzeit ein Video-Codec namens AV1 gesägt. Die Organisation heißt Alliance for Open Media. Die Qualität von AV1-Video ist um ein Vielfaches höher als alles, was vorher war. Er ist frei, er ist lizenzfrei, er ist sehr cool. Wir haben so einen schönen HEIF-Container. Wir müssen nur noch den AV1-Keyframe hineinschieben. Und es ist geschafft. Das neue Format zum Verschieben des AV1-Keyframes in einen HEIF-Container heißt AVIF. Das erwartet uns in Zukunft. Vielleicht werden wir es eines Tages nativ verwenden.

Aber wir können es jetzt benutzen. Wir setzen nur einen Frame aus dem Video auf die Seite und sagen: voila, du hast ein Bild.



Wie geht das in webp? WebP ist, wie gesagt, ein VP8-Keyframe, der in einem Container namens Riff verpackt ist. Es gibt einen solchen Header im Riff-Container. Dort, glauben Sie es nicht, es steht geschrieben, dass dies WebP ist. Wer würde das bezweifeln. PNG sagt, es ist PNG WebP, und da ist es.

WebP hat jedoch eine interessante Funktion: VP8-Keyframe kann darin liegen, und dies wird normalerweise als WebP bezeichnet. Ein VP8-Keyframe ist dies jedoch möglicherweise nicht. Im Allgemeinen unterstützt WebP verlustfreie Komprimierung. WebP verlustfrei ist ein völlig anderes Format, das nichts mit VP8, verlustbehafteter Komprimierung usw. zu tun hat. Wenn Ihnen jemand sagt, dass WebP effektiver ist als etwas anderes, ist die erste Frage, was zu stellen ist WebP etwas? Denn wenn wir über verlustfreie Komprimierung sprechen, gibt es einen natürlichen Gang, nach dem wir streben können. Diese Unterschiede, "60% effektiver als ...", sind eher nicht verlustfrei, sondern WebP mit Verlusten.

Okay, genug Theorie, wir haben es satt, schauen wir uns schon etwas an. ^_Klickbar




Beginnen wir damit. Wir machen ein Foto, das von einer professionellen Kamera aufgenommen wurde. Schneiden Sie ein Stück von 1000 x 1000 Pixel aus. Das sieht auf dem Projektor übrigens sehr cool aus. Wir fangen an, kleine Details zu betrachten. Gleichzeitig komprimieren wir dieses Stück so, dass wir genau 15 Kilobyte erhalten. ^_Klickbar Sehen Sie, was passiert. JPEG fiel sofort in Blöcke. In der Tat, niedrige Qualität, haben wir dies erwartet. So sieht WebP aus. Es fiel auch in Blöcke, aber diese Blöcke sind nicht so deutlich sichtbar. Wenn Sie den WebP-Encoder verwenden und ihn mit Ihren Händen steuern, können Sie die Stärke des in WebP verwendeten Filters steuern. Und wenn Sie diesen Filter stärker abschrauben, können Sie eine große Anzahl von Blockartefakten entfernen. Rein theoretisch können diese Blöcke daher auch entfernt werden.








Und hier ist AV1. Lassen Sie uns einfach still bewundern. Schau wie cool er ist. AV1 wird in Firefox und Chrome unterstützt, sodass Sie AV1-Video anstelle eines Bildes verwenden können, wenn Sie dies plötzlich möchten. ^_Klickbar Es gibt einen Spoiler, vergebens habe ich ihn hinzugefügt. Die Situation, wenn PNG WebP besiegt. Ja, PNG ist in diesem Fall effektiver als WebP. Dies liegt daran, dass ich verlustbehaftetes WebP verwendet habe. ^_Clickable Was habe ich mit der Peengeshka gemacht? Ich habe den indizierten Farbmodus erstellt, dh ich habe die Palette meiner Meinung nach auf 16 Farben zugeschnitten. Es ist sehr effektiv für ein Schwarzweißbild. Es stellte sich heraus, dass es sich sehr stark zusammenzog. Für qualitativ verlustbehaftetes WebP haben wir eine größere Größe. Für verlustfreie wird jedoch erwartet, dass es effizienter ist als Peengeshka. Wir haben gewonnen.











Ich fasse zusammen. Sehr coole vertiefte Pangshes können verlustbehaftete Komprimierungsformate besiegen und verlustfreies WebP nicht besiegen. Traurig, traurig. ^_Klickbar Vielleicht quält dich die Frage: Warum machst du das? Wissen wir, was SVG ist? Und ich weiß, aber für einige Größen ist PNG effizienter. Dieses Bild ist für Größen wie 200 x 200 effektiver als SVG. Dann gewinnt natürlich SVG. ^_Clickable Jetzt schauen wir uns Mike an. Das ist Mike. Seine Abmessungen betragen 3000 x 3000 Pixel. JPEG vs WebP. Hier war es offensichtlich, dass JPEG gewann. Aber in diesem Fall habe ich ungefähr sechs Prozent Sieg bei ungefähr gleicher visueller Qualität erzielt. Dies ist eine Funktion des Fotos und wie ich dieses Foto vorbereitet habe. Sie können mich dann fragen, wie ich es gemacht habe.












^_Klickbar.

Trotzdem hängt alles sehr stark von den Parametern des Encoders ab. Wenn Sie sich sehr bemühen und die Encoder-Parameter auf besondere Weise abschrauben, wird JPEG bei gleicher visueller Qualität die Größe von WebP verlieren. Ich möchte daraus schließen, dass Katzen besser schrumpfen als JPEG, aber nein. Dies ist nur ein Beispiel dafür, wie Sie es nach Belieben abschrauben können, wenn Sie möchten. ^_Klickbar Dies ist eine sehr geringe Qualität. JPEG fällt in Blöcke. Dies zeigt sich besonders direkt am Projektor - die Nase wurde beim Hund blau, sie wurde quadratisch. WebP ist nicht so krank. Alles scheint cool und gut zu sein, aber die Sache ist, dass WebP für sehr, sehr niedrige Qualitäten ungefähr die zwei- oder vielleicht dreifache Dateigröße als JPEG liefert. Hier müssen Sie also auch darüber nachdenken, welche Qualität Sie wünschen. ^_Klickbar









Dies ist der ehrlichste Vergleich. Man muss also vergleichen, denn H.264 und WebP sind ähnlich. Wer hat hier wohl gewonnen? H.264. Aber um ehrlich zu sein, war das Experiment nicht ganz sauber. In guter Weise ist der Videorahmen sowohl in WebP als auch in H.264 ungefähr eindeutig. ^_Klickbar Aber mit AV1 ist alles absolut klar. 30 Prozent gewinnen bei gleicher visueller Qualität. Hurra! ^_Klickbar Es ist sehr wichtig zu verstehen, welche Art von Bild Sie ^_einfügen und wie dieses oder jenes Format auf die Bildqualität reagiert. Hier wiegt der Hund im WebP-Format 79 Kilobyte in der Qualität von etwa 75% gegenüber 56 Kilobyte im JPEG. Warum passiert dies?











Da kein einziger Videocodec und kein einziges Format Rauschen richtig komprimieren kann. Wenn Ihr Bild viele derart scharfe Verzerrungen, Punkte und etwas anderes aufweist, haben Sie höchstwahrscheinlich Probleme mit der Komprimierung. Wenn Sie ein anderes Bild aufnehmen und dieses Rauschen entfernen können, entfernen Sie es.

Bilder sind also eine komplizierte Sache. Können sie Ihre Benutzeroberfläche verlangsamen? Eine wichtige und gute Frage.



Antwort: höchstwahrscheinlich nicht. Warum passiert es? Denn wenn das Bild dekodiert wird, geschieht dies in einem separaten Stream. Es gibt jedoch eine Ausnahme: Wenn Sie etwas auf Leinwand zeichnen, müssen Sie daran denken, dass die Bilddecodierung im Hauptstrom erfolgt und die Tasten in diesem Moment möglicherweise nicht gedrückt werden.



Wenn Sie wirklich einen Deal machen möchten, öffnen Sie Chrome, suchen Sie nach den entsprechenden Raster-Threads und dem Image Decode-Ereignis. Sie werden es finden.



Wenn Sie sehr, sehr neugierig sind, können Sie auf der Registerkarte "Verfolgung" nachsehen, was beim Dekodieren eines Bildes passiert.

Optimierungswerkzeuge

Das Wichtigste sind Optimierungswerkzeuge. Wir wissen jetzt ungefähr, was wir wollen. Es bleibt zu verstehen, wie wir das machen.



Das wichtigste Werkzeug zur Bildoptimierung ist der Designer, egal wie seltsam es klingt. Nur dieser wundervolle Mensch weiß, welches Problem Sie mit ihm lösen möchten. Wir fügen Seiten keine Bilder hinzu, um sie cool zu optimieren, sondern um Benutzer zu beeindrucken. Verwenden Sie einen Designer, der viel hilft, um ein Gleichgewicht zwischen Optimierungsgrad und Benutzererfahrung zu erhalten.


^{_{Link von der Folie Das}}

zweite Tool ist unser Mars-Open-Source-Tool, über das ich versprochen habe, zu sprechen. Dieses Ding heißt imgproxy und löst alle unsere Probleme im Allgemeinen. Bei meinen Projekten verwende ich nur imgproxy, dieses Ding kann fast alles, was ich will.



Wie es funktioniert? Haben Sie einen Wunsch für das Bild. Sie möchten ein Bild einer bestimmten Größe mit einer bestimmten Optimierung. Und irgendwo in der Ferne haben Sie ein Bild mit beliebiger Auflösung - vielleicht auf dem lokalen Computer oder vielleicht irgendwo beim Benutzer oder allgemein irgendwo. Sie müssen nur eine spezielle URL erstellen und imgproxy bitten, die Größe Ihres Bildes zu ändern. Dies ist ein solcher Dienst, er kann in der Cloud oder woanders sein. Das heißt, Sie hatten eine riesige Katze, Sie senden eine spezielle URL an imgproxy. Er macht alles, was Sie wollen, im laufenden Betrieb.



Wenn das nicht klar klingt, schauen wir uns an, wie die Anfrage an imgproxy aussieht. Zunächst müssen Sie feststellen, wo sich imgproxy befindet. Zweitens, wenn Sie nicht aggressiv gelutscht werden möchten, wäre es schön, die URL, nach der Sie fragen, digital zu signieren. Sie können dies nicht tun, dies ist nur eine zusätzliche Schutzmaßnahme.

Wenn Sie die Größe ändern möchten, übergeben Sie die Größenänderungsparameter direkt in der URL. Wenn Sie optimieren möchten - das Gleiche. Sie müssen nur die ursprüngliche Adresse Ihres Bildes übertragen.



Wenn Sie manuelle Optimierungen wünschen, gibt es eine Vielzahl von Tools. Ich werde sie jetzt nicht alle beschreiben. Die Materialien für den Bericht, die ich Ihnen senden werde, haben alles.



Hier ist das coolste und nützlichste. Diese alle Bilder sind nicht so kompliziert. Ich glaube, ich habe es geschafft, Ihnen das zu vermitteln. Wenn Sie interessiert sind, nehmen Sie Ihre bevorzugte Programmiersprache - wahrscheinlich JavaScript, obwohl alles andere als eine Tatsache - und beginnen Sie, alles zu klären.

Wenn Sie dies in einem Browser tun möchten, bitte. Sie benötigen wahrscheinlich eine Bindung, die höchstwahrscheinlich in Pluszeichen oder in C geschrieben ist. Aber was hindert Sie daran, dies alles in WebAssembly zu kompilieren? Es gibt eine coole Anwendung namens Squoosh. Es macht genau das. Sie können auch versuchen, es wird cool sein. Gefällt mir sehr.

Vielen Dank für Ihre Aufmerksamkeit. Materialien für den Bericht - als Referenz .