Optimierung Bilder Webseite, verpixelter Farbverlauf

Hallo miteinander,

ich bin gerade dabei, meine Bilder für meine Webseite zu skalieren, damit die Seite schnellstmöglich geladen werden kann.

Jetzt habe ich folgendes Problem, dass der Farbverlauf des Hintergrundes bei einer Größe von 200kb und 2000Pixel Seitenlänge verpixelt ist.

Hat jmd. eine Lösung für mich?

Danke und Gruß, Thomas

... Wenn das Original noch da ist, dann beim Abspeichern des JPG-Bildes weniger komprimieren - oder diesen Hintergrund gegen einen Hintergrund ohne so einen zarten Verlauf austauschen.

ja, das ist nervig. Ganz brutal bei WhatsApp, aber auch bei Instagram. Bei YouTube ähnlich.

Da kannst Du rein gar nichts machen. Im eignen Bereich: Weniger stark komprimieren. Farbe auf Format 4:4:4 stellen. Oder gar PNG verwenden.

Hintergrund wechseln wäre auch ein Trick. Wenngleich auch aufwendig

Ich sehe im HG eher Bandings. Kann sein dass ich mich täusche, mein Arbeitsmonitor ist nicht so prall. Banding kann über Hinzufügen von Rauschen reduziert werden.

stimmt... auch eine gute Idee: Füge künstliches Rauschen hinzu. Dann kann JPG den HG nicht mehr derartig komprimieren. Bild wird dann deutlich größer in der Speicherung. Dafür der HG ggf. etwas besser. Rauschen erst im finalen verkleinerten Bild hinzu fügen. Dann mit JPG komprimieren. Nicht anders rum

Danke für eure Antworten,

ich habe jetzt bei der JPG komprimierung statt 3 7 gewählt. Ist besser, Dateien sind 400 kb groß.

Ziel ist ja die SEO Optimierung, dass die Seite schneller geladen wird. Aber 450 kb ist besser als 1,5 mb.

Ich las, dass 200 kb optimal sei bei 2000pixeln Bildgröße.

Ciao, Thomas

Möglicherweise - aber nicht für die Qualität des JPEGs. Hier kommen mir 200 KB für die doch relativ großen 2000 Pixel etwas wenig vor. Vermutlich sieht das Bild mit 200 KB und z. B. 1000 Pixel Größe sogar dahingehend besser aus.

Helfen kann auch den Hintergrund weichzuzeichnen um die Tonwertabrisse zu kaschieren. Dabei muss gar nicht exakt bis zu den Haarspitzen gearbeitet werden - es genügt den Hintergrund grob mit Abstand und weicher Auswahlkante mit dem Lasso zu selektieren. Die dabei ev. verbleibenden Fehler knapp rund um den Kopf fallen nicht auf, störend sind die Tonwertabrisse in großen +/- einfarbigen Flächen.
Anschließend in den weichgezeichneten Bereich ein wenig(!) Rauschen hinzufügen kann auch nicht schaden.

Ich bin ziemlich sicher, dass bei einer Seitenkante von 2000px keine Vorkehrung Banding in sanften Verläufen verhindern kann, wenn man auf 200kb komprimiert.

Versuchs damit, dürfte die Dateigrösse weiter reduzieren:

https://helpx.adobe.com/de/photoshop/kb/support-webp-image-format.html

Für frühere Versionen (wie ich sie verwende) gibt es das als add-in.

Rauschen hinzuzufügend ist das Letzte, das man tun sollte, wenn das Ziel eine bestimmte unpassend geringe Dateigröße ist. Ein verrauschter Hintergrund verbraucht bei gleicher Bildqualität mehr Speicherplatz als sanfte Verläufe, weil sich diese besser komprimieren lassen.

Wozu auf einer Webseite 2000 Pixel? Wenn ich schon so qualitätsbetont rangehe, muss ich auch entsprechend höhere Dateigrößen hinnehmen. Das Eine ist die Folge des Anderen.

Es gibt keine geistreiche SEO-Vorgabe für die Dateigröße von 2000 Pixel-Foto-Dateien. Jedes Motiv muß man bei der JPEG-Komprimierung separat betrachten, weil die Dateigrößen bei identischer Qualitätsstufe bei jedem Motiv anders ausfallen. Da kann sogar der Faktor 10 dazwischen liegen, weil der Bildinhalt bestimmt, wie gut sich ein Foto komprimieren läßt, bevor es unschön wird.

Also überlege Dir, ob Du wirklich 2000 Pixel an der langen Kante brauchst und betrachte weniger die Dateigröße als die Komprimierungsstufen, also finde heraus, bis wohin es dir noch gefällt und ab welcher Stufe nicht mehr.

SEO hin, SEO her. Am Ende zählt der Inhalt. Es ist weniger wichtig, die Gesamtgröße einer einzelnen Seite so klein wie möglich zu halten und wichtiger dafür, daß die Seite Inhalte bietet, die Besucher anlockt und wieder vorbei schauen läßt.

Man sollte mal etwas nachsehen welche Größen heut zu Tage am meisten genutz werden. 95% aller Desktop User die auf meinem Shop zugreifen habe eine Auflösung von 1080p, also HD.
60% aller Besucher greifen via Händy oder Tablet zu.
2% aller Besucher öffnen das Vorschaubild welches meist 1440p ist.
Stecke nicht zu viel Zeit in solchen Dinge rein, die zahlen sich nicht aus.
Ausserdem sollte eine gute Software Vorschaulider generieren und im Hintergurnd bereits die "Vollen" Bilder Laden. Und wenn es dir wirklich um eine sehr schnelle Ladezeit geht, brauchst du auch einen TOP Server, die ganzen 0815 Konsumer Server bieten das leider nicht.

huebrecht schrieb:

Jetzt habe ich folgendes Problem, dass der Farbverlauf des Hintergrundes bei einer Größe von 200kb und 2000Pixel Seitenlänge verpixelt ist.

Zum Vergrößern anklicken....

200 kB ist schon sehr wenig für diese Größe. Ich weiß ja, nicht, mit welcher Software du exportierst. Zunächst würde ich mal verschiedene JPEG-Kompressoren vergleichen; die bringen bei gleicher Dateigröße durchaus unterschiedliche Ergebnisse. Noch wichtiger ist, dass man beim Export konsequent auf Metadaten verzichtet; die können allein schon 40 kB oder mehr ausmachen (so dass für das eigentliche Bild weniger Volumen übrig bleibt).

Die Verwendung des schon erwähnten WEBP-Formates würde gegenüber JPEG auch etwa 50 % Dateigröße sparen bzw. bei gleicher Dateigröße bessere Qualität übrig lassen.
Allerdings kommt es hier (noch stärker als im Fall von JPEG) auf die verwendete Software an. Ich habe z. B. schon WEBP-Bilder gesehen, die in Farbverläufen stark verpixelt sind und schlechter aussehen als gleich große JPEGs. Das muss nicht sein. Recht gute Ergebnisse liefert z. B. Squoosh von Google.
Ein Hemmschuh für die Verwendung von WEBP ist die fehlende Unterstützung in älteren Browsern (ältere Safari-Versionen, Internet Explorer etc.). In der Praxis kommt man also noch nicht ohne Fallback-Lösung aus, wenn man nicht 10 bis 20 Prozent der Seitenbesucher ausschließen will. Wenn die Seiten "von Hand" programmiert sind, kann man hierfür gut mit dem Picture-Element arbeiten. Für WordPress, Joomla etc. muss man geeignete PlugIns finden.

Marco R. schrieb:

95% aller Desktop User die auf meinem Shop zugreifen habe eine Auflösung von 1080p, also HD.

Zum Vergrößern anklicken....

Da muss man heutzutage etwas aufpassen, weil gerade Notebook-Displays häufig hohe Pixeldichten haben und daher mit Skalierung betrieben werden. Diese Web-Statistiken erfassen aber nicht die tatsächliche Monitorauflösung, sondern den sogenannten Viewport – also die Pixelgröße geteilt durch den im Betriebssystem eingestellten Skalierungsfaktor. Wenn der Monitor z. B. eine native Auflösung von 3840 x 2160 hat und eine Skalierung von 200 % (= Faktor 2) eingestellt ist, würde in der Browserstatistik nur 1920 x 1080 stehen.

[...]r z. B. eine native Auflösung von 3840 x 2160 hat und eine Skalierung von 200 % (= Faktor 2) eingestellt ist, würde in der Browserstatistik nur 1920 x 1080 stehen.

Zum Vergrößern anklicken....

Nein, es wird in Analytics nur das Wiedergegeben was die Native Auflösung ist. Selbst wenn man 3840 x 2160 hat und ohne Scalierung auf 1920*1080p einstellt wird der Native Wert genommen.
Laptops sind unter Mobile Devices, und nicht unter Desktop

Marco R. schrieb:

es wird in Analytics nur das Wiedergegeben was die Native Auflösung ist. Selbst wenn man 3840 x 2160 hat und ohne Scalierung auf 1920*1080p einstellt wird der Native Wert genommen.

Zum Vergrößern anklicken....

Hmm. Ich dachte immer, der echte Auflösungswert würde vom Browser gar nicht übertragen und könne deshalb nicht in der Web-Statistik auftauchen. Auch die Unterscheidung in Desktops und Laptops finde ich rätselhaft.

In diesem Thread: https://www.dslr-forum.de/showthread.php?t=2065946 gehts um die verwendeten Bildschirmauflösungen und wie zuverlässig die Angaben sind, die man ermitteln kann. Denn dass es geht, ist die Grundvoraussetzung für responsive Design.

Aber besonders bei Mobilgeräten kommt da alles mögliche heraus und entsprechend gut oder schlecht funktioniert responsive Design. Javascript: ja/nein usw. verschärft die Problematik bis dahin, ob eine Website überhaupt brauchbar angezeigt wird, wenn sie technisch schlecht aufgebaut ist.

Die tatsächlichen Werte kommen so teilweise bestenfalls zufällig heraus, siehe meinen Kommentar dazu: https://www.dslr-forum.de/showpost.php?p=16112824&postcount=42 in dem ich erläutere, wie mein Smartphone 4 verschiedene Auflösungen mittteilt. Und da habe ich nur mit einer der einstellbaren Auflösungen meines Smartphones getestet. Deshalb vorweg zu diesem Unterthema: traue zu dieser Frage keinen Statistiken aus automatisierten Abfragen.

Frosty schrieb:

[...] um die verwendeten Bildschirmauflösungen und wie zuverlässig die Angaben sind, die man ermitteln kann. Denn dass es geht, ist die Grundvoraussetzung für responsive Design.

Zum Vergrößern anklicken....

Kommt drauf an, wie es gemacht wird. Man kann responsives Webdesign ganz ohne Von-außen-Abfrage irgendwelcher Gerätedaten umsetzen (indem man die Entscheidungen in den jeweiligen Browser verlegt, z. B. über das Stylesheet). Das funktioniert in der Regel auch viel zuverlässiger als der Umweg über den Server.

200kb Dateigroesse ist nicht mehr Zeitgemaess. Das hat man gemacht, als man noch mit 768 kbit/s DSL rumgerannt ist. Oder ISDN/Modem.

Auf meiner Seite lade ich die Bilder als png mit 2400px auf langer Kante hoch und habe meist 4 - 6 MB/Bild and Dateigroesse. Und es laedt innerhalb von Sekunden selbst mit Dorf DSL durch.

Ladezeit ist nur das eine, Datenvolumen das andere: heute wird zunehmend auf auf Mobilgeräten gesurft, bei Mobiltarifen gibt es jedoch nur selten unbegrenzten Datendownload.
Ich hoffe du hast auf deiner Webseite beim Anklicken "Vorschaubilder" in üblicher Größe (z. B. so wie die hiesige Forengröße), und erst bei weiterem Anklicken die genannte Version?

Hi schrieb:

Auf meiner Seite lade ich die Bilder als png mit 2400px auf langer Kante hoch und habe meist 4 - 6 MB/Bild and Dateigroesse.

Zum Vergrößern anklicken....

Schon lustig. Die einen zerbrechen sich den Kopf darüber, wie man mittels optimierter JPEG-Kompression, WEBP oder AVIF nochmal etwas Dateigröße reduzieren kann, um ihren Seitenbesuchern unnötiges Datenvolumen zu ersparen. Die anderen nehmen darauf kaum Rücksicht oder quälen ihre Besucher gar mit verlustfrei komprimierten Riesenbildern (was ja schon ein Extremfall ist – "normale" Rücksichtslose begnügen sich wenigstens mit großen JPEGs).
Freunde macht man sich nicht, wenn man mit dem Datenvolumen anderer Leute so verschwenderisch umgeht. Ich fürchte nur, dass dank der immer flotteren Mobilzugänge viele Nutzer es zunächst gar nicht merken. Sie merken es erst, wenn Mitte des Monats schon ihr Datenvolumen aufgebraucht ist. Dann ist aber oft nicht mehr klar feststellbar, wessen Seiten daran schuld sind.

Hinzu kommt, dass man in Deutschland vielerorts bei weitem nicht die Übertragungsgeschwindigkeit erreicht, die das Smartphone theoretisch könnte. Ich finde, dass es auch heute noch sehr wichtig ist, Fotos auf einer Webseite so klein wie möglich zu haben. Webseiten, die sehr lange laden, weil der Betreiber sich keine Gedanken über die Bildkomprimierung gemacht hat, schließe ich i. d. R. nach kurzer Zeit.