Kompression von Bildern und Videos / Wie funktioniert JPEG / Kommende Formate

in deutsch •  2 years ago  (edited)

Vorschaubild JPEG.jpg

Im Zeitalter des Internets musste damals ein leistungsschonendes Format für Bilder her.
Bei den Bildern konnte sich JPEG durchsetzen, welches auch JPG genannt wird, weil Windows damals nur 3 Buchstaben zuließ.
Es ist also ein sehr altes Format, welches trotz seines hohen Altes immer noch stark genutzt wird.
Es gibt auch viele Alternativen, die teils bessere Ergebnisse ohne große Artefakte liefern bei geringerer Dateigröße, zu diesen Alternativen komme ich aber später.


Wie funktioniert JPEG?

Ein JPEG besteht aus einer Quantisierungsmatrix mit 8x8 Pixeln, wenn man die Kompressionsqualität auf unter 10 % stellt, sind diese auch gut zu erkennen als große sichtbare Artefakte.
Die Mathematik (DCT-Koeffizienten) hinter JPEG sind vereinfacht gesagt viele Sinuskurven, die übereinander gelegt werden, daraus ergibt sich dann ein abweichender Farbwert der möglichst nahe am originalen Wert ist.
Eine genaue Erklärung mit Metamathematik und Algorithmus (Entropie-Kodierung) werde ich jetzt nicht machen, aber ich verlinke auch ein paar gute Erklärungen, für die, die sich dafür interessieren.
lehre.informatik.uni-osnabrueck.de - Kompression nach JPEG
https://www.tu-chemnitz.de/informatik/ThIS/downloads/courses/ws02/datkom/JPEG_Kompression.pdf
Weitz / HAW Hamburg - Diskrete Kosinustransformation (JPEG-Komprimierung)
Computerphile - JPEG DCT, Discrete Cosine Transform
wikipedia.org - JPEG
wikipedia.org - Datenkompression
wikipedia.org - Diskrete Kosinustransformation


Was für Formate erwarten uns in der Zukunft

JPEG stammt aus dem Jahr 1992 und wurde für Computer entwickelt, die nur wenig Rechenkapazitäten zu Verfügung haben.
Dennoch erreicht dieses alte Format immer noch absehbare Ergebnis, sieht aber gegen die neuen kommenden Formate alt aus.
Google beispielsweise hat mit seinem WebP Format welches auf dem Videocodec VP8 von x264 basiert, versucht JPEG abzulösen.
Dieses Format ist 2010 erschienen und wird erst seit 2021 in allen gängigen aktuellen Browsern unterstützt.
Wieso das so ist, ja Apple hat sich verweigert diesen Standard in seinem Browser (Safari) zu nutzen.
Apple hat mit Group (MPEG) interessanterweise auch ein eigenes Format entwickelt, mit dem Namen HEIC dieser ist seit 2015 veröffentlicht und liefert ungefähr die gleichen Ergebnisse wie der Codec AVIF welcher auf dem AV1 Videocodec basiert und komplett frei ist.
AVIF wird auch als Nachfolger für JPEG gesehen und immer mehr Browser, auch der von Apple haben eine Unterstützung für ihn, nur wenige Mobile Browser noch nicht.
Das Format existiert er seit 2019 und hat jetzt schon eine so große Unterstützung, die Verwendung ist leider aber momentan noch sehr gering.

Eigenschaften:

Formate:WebPJPEGAVIFHEIC
NameWebPJoint Photographic Experts GroupAV1 Image File FormatHigh Efficiency Image Container
Veröffentlichung2010199220192015
Dateiendung(en).webp.jpeg, .jpg.avif.heif, .heic
Maximale Auflösung (in Pixel)16.383 x 16.38365.535 x 65.535??
Bittiefe24 Bit8 Bit10, 12 Bit und mehr Bit Farbtiefe10 Bit
Komprimierung (verlustfrei)janeinnahe zu Verlustfreija
Komprimierung (verlustbehaftet)jajajaja
Dateigröße (bei Komprimierung) im Vergleich zu JPEG:75%100%50%50%
Transparenz (Alphakanal)janeinjaja
RGB-Farbraumjajajaja
Animationen möglichjaneinjaja
Unterstützende AnwendungenChrome, Firefox, Opera, EDGE, Safari, Samsung Internet caniuse.com - WebP Support BrowseruniversellChrome, Firefox, Opera, EDGE, Safari, Samsung Internet caniuse.com - AVIF Support Browserkeine Webbrowser caniuse.com - HEIF Support Browser

Wer macht nun das Rennen?

JPEG ist immer noch nicht abzulösen, die Beliebtheit und Unterstützung möglicherweise noch lange anhalten.
Aber wie oben schon erwähnt, ist WebP endlich in den Browsern angekommen und hat eine gute Chance.
AVIF ist allerdings noch einmal etwas moderner und die Unterstützung der Webbrowser war in Rekordzeit vorhanden, ich denke von diesem Format werden wir in Zukunft sehr viel sehen.
HEIC ist mit Apple so stark verbunden und bietet zu wenig Unterstützung, dass es sich möglicherweise nie außerhalb vom Appleökosystem beweisen kann.

Bedauerlicherweise kann ich über Steemit AVIF nicht zeigen, da dieses Format wie es scheint nicht unterstützt wird.
In meiner Blog Engine habe ich allerdings einen Support für AVIF und WebP hinzugefügt.
Das sind die Ergebnisse meines Tests.

NameAuflösungOriginalJPEG 50 %WebP 90%AVIF 50%
1 o1.jpg8000 x 600016 MB4,38 MB8,94 MB1,93 MB
2 o2.jpg8000 x 600010,5 MB1,90 MB3,8 MB387 KB
3 o3.jpg8000 x 600014,1 MB4,38 MB6,93 MB878 KB
4 o4.jpg4608 x 34564,4 MB1,01 MB1,64 MB385 KB
5 o5.jpg4608 x 34563,93 MB1,04 MB1,61 MB413 KB
6 o6.jpg4608 x 34564,36 MB1,23 MB1,82 MB497 KB
7 o7.jpg8000 x 600017,4 MB4,47 MB10,1 MB1,83 MB
8 o8.jpg8000 x 600028,8 MB6,76 MB14,5 MB4,27 MB
9 o9.jpg8000 x 600019,3 MB5,50 MB11,8 MB3,30 MB
10 o10.jpg8000 x 600016,8 MB4,65 MB9,28 MB2,19 MB
11 o11.jpg8000 x 600022,3 MB4,91 MB10,4 MB2,04 MB
12 o12.jpg8000 x 600016 MB6,82 MB14,1 MB3,83 MB
13 o13.jpg6000 x 800017,5 MB4,54 MB10,3 MB1,93 MB

Ihr könnt die Bilder hier downloaden als ZIP Archive:
Download

Hinweiß dieser Vergleich funktioniert auf Steemit nicht, um die Bilder in guter Qulität zu betrachten solltet ihr den Artikel auf meiner Seite lesen.

Details:

JPEG OriginalJPEG 50 %WebPAVIF

JPEG__JPEG 50__WebP__AVIF (PNG) 1.jpg

Beim Blumentopf (Blau) verschwinden manche Details bei dem Format AVIF und es wirkt etwas weich gespült.

JPEG__JPEG 50__WebP__AVIF (PNG) 12.jpg

Bei dem Ohr meiner Katze hat das aber Vorteile, während JPEG 50 % anfängt Artefakte zu bilden ist AVIF deutlich ansehnlicher.

JPEG__JPEG 50__WebP__AVIF (PNG) 2.jpg

Bei der Garage sehen wir einen Vorteil von AVIF, Rauschen wird aus dem Bild entfernt.

JPEG__JPEG 50__WebP__AVIF (PNG) 22.jpg

Dass das auch Nachteile haben kann, sieht man wieder an dem Geländer mit Nebel und Unschärfe, hier werden einzelne Stangen schwer erkennbar.

o2__2__2__2.jpg

o9__9__9__9.jpg

Bei dem Reißverschluss und Auto erkennt man auch, dass das Rauschen entfernt wurde und die Qualität kann sich eigentlich sehen lassen.

Farben:

o9__9__9__92.jpg

o10__10__10__10.jpg

o12__12__12__12.jpg

o5__5__5__5.jpg

o6__6__6__6.jpg

Bei den Farben gibt es nichts zu meckern, manchmal sieht AVIF aber etwas dunkler aus.

NameAuflösungJPEGWebPAVIF
1 o1.jpg1920 x 1400114 KB110105 KB
3 o3.jpg1920 x 144076 KB64 KB63 KB
4 o4.jpg1920 x 1440204 KB86 KB70 KB
10 o10.jpg1920 x 1440102 KB111 KB109 KB
12 o12.jpg1920 x 1440181 KB191 KB225 KB

Ihr könnt die Bilder hier downloaden als ZIP Archive:
Download

Sehr geringe Dateigrößen bei Full HD

JPEGWebPAVIF

o1__o1__o1.jpg

o3__o3__o3.jpg

o4__o4__o4.jpg

o10__o10__o10.jpg

12.jpg

Die Qualität wurde angepasst, um dicht beieinander zu liegen.
JPEG versagt komplett, AVIF gewinnt knapp gegen WebP.

Als Ergebnis, kann ich sagen AVIF liefert besonders in hohen und niedrigen Auflösungen gute Ergebnisse bei geringer Dateigröße.
WebP in niedrigeren Auflösungen, die Qualität sollte auch nicht auf 90 % gesetzt werden bei hohen Auflösungen.
Ich habe die Bilder zuerst mit Gimp und dann mit ImageMagick konvertiert, das macht auch einen kleinen Unterschied.
Für den Vergleich habe ich auf das Tool von Nvidia ICAT gesetzt.
Die Konvertierung von AVIF ist auch bei hohen Auflösungen ohne Hardwarebeschleunigung sehr träge, das ist auch eines der größten Probleme.
Besonders bei AV1 dem Videocodec werden nicht alle CPU Kerne genutzt, eine Hardwarebeschleunigung zum Encodieren ist daher fast ein muss.
WebP ist dagegen deutlich schneller, aber nicht so schnell wie JPEG.

Vielleicht habe ich jetzt den einen oder anderen dazu ermutigt, diese neuen Formate der Zukunft mal auszuprobieren in seinem Blog oder seiner Webseite und trage somit etwas zu Verbreitung bei.


Quellen:
Ionos - WebP
webmasters-fernakademie.de - AVIF, WebP oder HEIC — welches ist das Bildformat der Zukunft?
(https://support.d-imaging.sony.co.jp/support/ilc/heif/01/de/index.html)
Ionos - AVIF – lizenzkostenfreies Bildformat für die Zukunft
siipo.la - Is WebP really better than JPEG?
jakearchibald.com - AVIF has landed
Computer:Club2 - AVIF, der JPEG-Killer?

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Interesting


This post was selected for Curación Manual (Manual Curation)

@tipu curate

Kleine Frage an die Leute in den Kommentaren.
Habt ihr schon die neuen Formate genutzt und wenn ja wo?

Kleiner Hinweis:
Ich werde wahrscheinlich versuchen noch ein paar Vergleichsbilder als JPEG hinzufügen, allerdings werden diese in der Browser Ansicht immer komprimiert dargestellt.
Ich füge Vielleicht noch ein paar zusätzliche Quellen und Tests von anderen hinzu, das Titelbild könnte auch noch überarbeitet werden1.
Dazu ist mir bei der Auflösung wohl ein Fehler unterlaufen.
Vielleicht könnt ihr mir da ja weiterhelfen, ich finde nur wenig Informationen zur maximalen Auflösung von AVIF und HEIF.
Da ich vielleicht noch später Werbung hinzufüge und den Beitrag noch ein paar Tage später woanders veröffentliche, ist dieser nur in meinem Blog zu finden.
LG Janis

Edit:
Der Beitrag ist fertig.
Da es Probleme mit Steemit gab, habe ich in zu Sicherheit noch 3 Mal aktualisiert und jetzt sehe ich auch endlich die neueste Version.
Ohne die Steem API von Steemchiller hätte ich Probleme gehabt an die neuste Version zu kommen, ich hoffe, es funktioniert jetzt alles.
https://sds.steemworld.org/posts_api/getPost/janisplayer/kompression-von-bildern-und-videos-wie-funktioniert-jpeg-kommende-formate