Bilder: JPG versus WebP

So, ich teste dann mal wieder damit und komme zum gleichen Ergebnis wie schon vor 4 Jahren.

Bilder, die ich selbst erstelle und hochlade funktionieren mit WebP ganz gut, also das ist nicht das Problem. Mein Problem ist der Upload bei PHP und die Verarbeitung dort.

catcat wie machst Du das denn zum Beispiel? Hast Du Bilder, die das System umwandelt oder machst Du das alles selbst?

Mein System erzeugt hier Bilder aus den jeweiligen hochgeladenen Quellen. Diese liegen in der Regel als JPG vor, in riesigen Auflösungen.

Die skaliere ich dann zu den von mir benötigten 8 Formaten und speichere die als JPG. Kein Problem, geht alles. So, nun habe ich den Testlauf eben wieder gemacht und die skalierten Bilder als JPG und WebP gespeichert. Kompression lag bei 90%, die ich schon immer verwende.

Die Bilder werden als JPG also so gespeichert

imagejpeg($img_jpg, TMP_UPLOAD_PATH.'hauptbilder/1024/'.$img_jpg, 90);

Wenn ich das nun aber mit WebP mache als

imagewebp($img_webp, TMP_UPLOAD_PATH.'hauptbilder/1024/'.$img_webp, 90);

dann sind die WebP-Bilder zwar 30-50% kleiner als vorher, was gut ist, aber die Qualität leidet deutlich. Vieles ist quasi wie identisch, aber Kleinigkeiten, die doch wichtig sind, sind deutlich schlechter. Z.B. bei ner Sonnenblume auf dem Tisch erkennt man innen noch "schwarz", aber nicht mehr die Kerne. Man erkennt am Boden noch das Parkett, aber nicht mehr das Stäbchenmuster. Andere Dinge im Bild, wie Schrank, Bilder, Deckenlampe, TV, Couch sehen identisch aus.

Und nun kommt mein Problem. Ich spielte beim WebP nun ja schon mit anderen Stufen rum, also nicht 90, sondern 92, 95, 97. Erst bei 97 kann ich wirklich sagen, dass die Bilder identisch aussehen und auch die kleinen Details erkennbar sind. Nun sind aber die Dateigrößen nahezu identisch. WebP ist nur noch ca. 1% kleiner als JPG vorher. So macht das keinen Sinn, das alles doppelt zu generieren und auf dem Server zu speichern. Sind bei jedem Bild ja dann 8 extra für WebP. Zudem kommt dann so viel extra HTML-Markup dazu, dass selbst der schon größer ist, als die 1% Einsparung bei dem Bild selbst.

Wir reden hier in der Regel von Bereichen wie

34,57 kB bei JPG (Q90)

34,29 kB bei WebP (Q97)

22,82 kB bei WebP (Q90)

Das sind die "kleinen" Versionen, die auf meinen Seiten zu 80% verwendet werden.

Hat einer einen Tipp?

Das mit JPG und 90 mache ich auch nur, weil ich die Ursprungsqualität nicht kenne. Die Bilder stammen ja nicht von mir, sondern von den Kunden. Wenn das gute Bilder sind, dann reicht da sogar 80 oder gar 75 und das schaut immer noch gut aus. Da ich aber nicht weiß, was hochgeladen wird, mache ich das eben mit 90.

Meine eigenen Bilder mache ich eigentlich alle mit 100. Da ist WebP klar überlegen, aber das geht nicht mit 100.000en Bildern der Kunden.

ok, dann machst Du das ja quasi wie ich, nur dass ich den Upload dann mit Q90 speichere. Das macht ja PHP selbst. Gleube nicht, dass es da Unterschiede in PHP zwischen 7.4 und 8 gibt.

Wobei ich aber eben, wie gesagt, nicht weiß, was das Bild vorher hatte. Mache Kunden schieben da Bilder direkt von der Cam hoch, mit Q100, bei anderen habe ich eher das Gefühl, das ist schon nur noch Q50. Teilweise werden die ja auch mehrfach überarbeitet. Also von der Cam zum Webmaster -> auf die eigene Seite -> zu einem anderen Portal -> dort dann Download und dann Upload bei mir. Das natürlich nicht alles jeweils vom Original, sondern immer als Upload und Download.

Meine Bilder hier sind alle in Auflösungen

von 75x75

über 300x200

400er

500er

1024er

1600er

1920er

Und das dann teilweise auch noch mit fixierter Breite oder fixierter Höhe. Denn das Upload-Bild hat ja 100 verschiedene Formate und Verhältnisse.

Bei den großen Bildern sehe ich da auch nicht viele Unterschiede, aber bei denen so um 300 bis 500 schon. Ein Garten ist einfach nur ein Garten, fertig, aber wenn es ins Detail geht, dann wird es ungenau. Ich würde noch nicht mal sagen "unscharf", aber eben ungenau. Sieht man dann, wenn man auf Zoom geht.

Ja, mit Irfan geht das wunderbar. Aber auch nur mit meinen eigenen Bildern oder von der AI. Wenn ich da so ein Kundenbild nehme, dann wird das da auch nicht wirklich besser. Hatte das damals mal versucht. Die Einsparung aller Bilder per Batch durchgelaufen war gerade mal 4,7%, dafür hat sich das Datenvolumen aber quasi fast verdoppelt, wegen Doppelspeicherung eben. PlugIn habe ich da auch, glaube das heißt einfach nur WebP-Plugin....

Alex, skaliert sind die Bilder schon. Die müssen nur in ein anderes Datei-Format, Und ja, so um die 96 / 97 sind die Bilder hier auch sehr gut, nur da wird dann halt nichts mehr kleiner im Vergleich zu JPG 90, also zumindest nicht so viel, dass es den Mehraufwand rechtfertigen würde.

Kommt natürlich auf das Original-Bild an. Wenn man da Bilder hat wie bei den "Zäunen", wo die quasi völlig unkomprimiert als JPG vorliegen, da macht webP mit 96 schon einen großen Unterschied, würde JPG aber auch tun. Das ist hier aber nicht der Fall, die Bilder sind schon komprimiert.

Ich nutze ja gerne für meine eigenen Bilder den JPG-Panda (https://tinyjpg.com/). Der komprimiert ja nicht mit einem festen Wert, sondern dynamisch, damit das Bild am Ende unverändert ist. Bei meinen Bildern kommt der da auf 40-80%, je nach Inhalt und Farben. Bei WebP ebenso.

Nutze ich da aber eines der Bilder der Kunden, also die mit JPG 90, dann sind das plötzlich nur noch 1-4% und teilweise auch dort dann schon mit fehlenden Details. Wenn ich pauschal mit WebP 90 speichere, dann sind die deutlich kleiner, keine Frage, aber eben auch deutlich unschärfer in den Detailbereichen.

Bei Lighthouse gibt es ja unter anderem so Angaben wie "Bilder in modernem Format bereitstellen, würde z.B. von 120 kB dann 45 kB sparen". Wenn ich da genau das Bild nehme und in WebP umwandle, so lang neu teste, bis ich dann eines habe, das die besagten 45 kB kleiner ist, dann ist das Bild einfach nur Mist. Ich habe noch kein einziges Bild gefunden (von den Kundenbildern), wo ich ansatzweise an diese genannten Werte rankomme und das Bild dann gleich bleibt. Ich habe sogar sehr selten welche, die sind als webp größer als als jpg.

Aber genau das wird ja für WebP behauptet. Gleiche Qualität bei deutlich kleinerer Dateigröße.

Ausgehend von einem unkomprimierten Original ist das alles korrekt, da sind die Qualitätsstufen dann ähnlich gut bei gleichen Werten, also 90 zu 90 oder 75 zu 75, aber welche Bilder heutzutage sind im Netz schon unkomprimiert?

Genau genommen müsste man ja sogar noch sagen, dass ein jep 90 Bild, das ich da dann umwandle in webp 90, quasi schon komprimiert ist. Das ist ja nicht mehr das gleiche Ausgangsbild. Das jpg hat dann ja nur "90", das webp aber "90 und davon dann noch mal 90".

Man kommt von einer Kompression ja nicht mehr zurück. Wenn das Ding 90 hatte, dann hat das 90, auch wenn man es auf 100 stellt und neu speichert. Fatal wird nur, dass dann in den Bildinformationen 100 hinterlegt wird, was es aber nicht hat. Hinterlegt wird halt nur der letzte Wert, der genutzt wurde, der Inhalt selbst ist dann aber dennoch komprimiert. Damit kann man also noch nicht mal auslesen, was das Bild nun wirklich an Faktor hat, denn man sieht ja nur den letzten. Das geht nur, wenn man sicherstellen kann, das Bild wurde nur einmal bearbeitet und gespeichert, denn dann ist der letzte Wert und der erste der gleiche.

Mal als Vergleich. Das Bild von Dir mit dem Gartenzaun, das hast Du ja schon komprimiert und umgewandelt in WebP. Das bekomme ich aber problemlos von 100 kB runter auf knapp unter 40 kB, ohne sichtbare Änderungen.

Da hat selbst der rote Fleck oben links noch die gleiche Form.

Nehme ich ein Bild der Kunden mit 100 kB, dann komme ich ohne Qualitätsverlust maximal auf 95 kB runter und das ist den Aufwand nicht wert. Wenn ich da auf einen Wert gehe, der mir eben auch 60% einspart, dann ist der rote Fleck zwar immer noch da, eber eher ein Punkt oder Oval, also andere Kontur.

Bei dem Zaun-Bild kann ich nicht sagen was es genau war, das war dynamisch per JPG-Panda, dürfte aber in die Richtung 75 bis 80 gehen. Aber just eben hatte ich es wieder. Ein Bild von Halloween. Das konnte problemlos um 80% komprimiert werden (aus JPG 100), also Dateigröße 80% kleiner. Gut, das Ding hat auch nicht viele Farben.

Was mir dabei aber auffiel ist, dass die Einsparungen prozentual immer kleiner werden, je kleiner die Bilder werden. Die 80% waren bei 1344 px. Bei 700 px waren es nur noch knapp 40% und bei 300 px lediglich 15%.

Wie gesagt, von Q100 aus JPG ausgehend. Wenn das nun ein JPG mit 90 gewesen wäre, dann wären die letzten 15% wahrscheinlich auch auf 1-2 zusammengeschrumpft. Und das sind ja eigentlich genau die Bildgrößen, mit denen ich arbeite und die überall angezeigt werden. Wenn da einer auf eine Lightbox klickt und dann die Datei größer ist, ist mir das wurscht. Die, die direkt angezeigt werden, sind wichtig. Aber genau bei denen ist da nicht viel möglich.

Zitat von catcat

Meine Bilder sind alle leicht unscharf, wie weichgezeichnet

Achso. Ich dachte immer, das liegt an den seidenweichen Stoffen, die wie ein Hauch an Nebel durch die Luft schweben

Aber ja, da passt das gut.