HTML Müssen Grafiken für Smartphones opimiert werden?

Eliah · 16. Oktober 2011

Müssen Grafiken für Smartphones optimiert werden?

Hallo zusammen!

Ich bin gerade dabei mit einer mobilen Darstellung einer privaten Seite zu experimentieren.
Dabei ist mir aufgefallen, dass meine .png und .jpg Grafiken auf einem Smartphone "unscharf" dargestellt werden. Wobei das Wort "unscharf" nicht ganz stimmt. Sieht eher danach aus als ob was mit der Farbpalette nicht ganz stimmt.

Gerade Bilder die eigentlich einen feinen Farbverlauf enthalten, werden - ich sag jetzt mal "Kantig" - dargestellt. D.h. der Verlauf, also die Übergänge in die anderen Farben, wird nicht sauber angezeigt. Verschiedene Farben aus dem Verlauf sind zwar vorhanden, aber eben kein "Verlauf". (Schwierig zu beschreiben....)

Nun frage ich mich natürlich woran das liegt. Schließlich werden ja die Grafiken und Alben-Cover von Musik und anderen Webseiten gestochen scharf angezeigt. Nur eben meine Grafiken nicht....

Kann mir das jemand erklären bzw. weiterhelfen?

Danke für eure Rückmeldungen!

der_guru · 16. Oktober 2011

Was für ein Gerät benutzt du bzw. welches OS?
Es ist mir in Browsern auf Android auch aufgefallen. Auf iOS passiert das nicht. Könnte sein das die Farbtiefe bei der Darstellung im Browser eine andere ist.
Ob das jetzt nur Einbildung ist oder der Tatsache entspricht müssen andere vielleicht noch bestätigen oder wiederlegen.

mfg

4nanai · 16. Oktober 2011

Das liegt einfach daran, dass der Farbraum der meisten Smartphone-Bildschirme sehr begrenzt ist (Wie bei billigen TN-Panels) und deshalb die Farbverläufe "zerhackt" sind. Ist dein Monitor denn einigermaßen kalibriert? Falls nicht, unterscheidet sich die Darstellung deiner Grafiken auf anderen Bildschirmen natürlich auch teilweise erheblich.

zoz · 16. Oktober 2011

1. Liefern viele Webseiten Grafiken sowieso in geringerer Qualität aus wenn es an ein Mobiles Gerät geht (schlicht um Bandbreite etc. zu sparen)

2. Manche Provider (bei T-Mobile ist es auf jeden Fall so) tun Grafiken zusätzlich nochmal sehr stark komprimieren um Bandbreite zu sparen.

Eliah · 16. Oktober 2011

Nun, also ich nutze ein HTC Sensation. Also was ganz aktuelles. Das läuft mit Android 2.3.4.
Was dieses allerdings für einen Farbraum hat, konnte ich bisher nicht in Erfahrung bringen.
Was mich einfach Stutzig macht ist die Tatsache, dass Grafiken von anderen Seiten (auch mit Farbverlauf!) oder auch gerade Covers von Musik-Alben gestochen scharf auf dem Gerät angezeigt werden.

Gibt es eine Möglichkeit die Grafiken für Android zu optimieren?

EDIT:

zoz schrieb:
2. Manche Provider (bei T-Mobile ist es auf jeden Fall so) tun Grafiken zusätzlich nochmal sehr stark komprimieren um Bandbreite zu sparen.

Ich gehe gerade über WLAN rein. Das schliesst das schon einmal aus. Außerdem kann ich mir das schlecht vorstellen. Damit würde man ja unter Umständen das ganze Design einer Seite "zerschiessen", oder?...

der_guru · 16. Oktober 2011

Kannst du mal ein Bild zeigen.
Wenn du vertikale Linien in den Bildern hast dürften das keine Kompressionsartefakte sein. Das würde auf die Farbtiefe hinweisen. Mal abgesehen das eventuell die Kompression bei WLAN nicht greifen würde. Bei Opera kann man es Einstellen, in welchen die Bildqualität aka Kompression konfiguriert wird.

mfg

Eliah · 16. Oktober 2011

der_guru schrieb:
Kannst du mal ein Bild zeigen.

Hier das Original:

Hier wie es auf dem Smartphone aussieht:

der_guru schrieb:
...Wenn du vertikale Linien in den Bildern hast dürften das keine Kompressionsartefakte sein. Das würde auf die Farbtiefe hinweisen. Mal abgesehen das eventuell die Kompression bei WLAN nicht greifen würde. Bei Opera kann man es Einstellen, in welchen die Bildqualität aka Kompression konfiguriert wird...

Nun, ich hab ja das Problem auch dann, wenn das Bild als Cover für einen Song hinterlegt wird. Meine eigenen Grafiken sehen dann aus wie das zweite oben. Grafiken von dritten springen mich dagegen geradezu gestochen scharf an... =)

der_guru · 16. Oktober 2011

Mmh, vielleicht liegt es doch an der Grafik selbst. Hast du die selbst erstellt?

Ergänzung (16. Oktober 2011)

Edit: Was mir auffällt. Das ist ja ne Lichtquelle drauf gepappt und auf dem Smartphone siehst du Farbverläufe. Also dann vielleicht doch die Farbtiefe.

In welchen Format liegen die Grafiken vor?

Eliah · 16. Oktober 2011

ja, die Grafiken sind selbst erstellt. Um den Verlauf etwas anzuheben hab ich noch eine Lichtquelle eingebracht.

der_guru · 16. Oktober 2011

Was für Grafiken sind das? PNG? JPG?
Probiere mal folgendes: Nutze mal die Grafik oben als Album Cover. Erstell dir am besten einen Dummy. Wenn die Grafik richtig angezeigt wird, habe ich eine idee.

Ich suche mal wo ich das gelesen habe.

mfg

Ergänzung (16. Oktober 2011)

Edit: Beim S2 gibts ähnliche Probleme.
http://www.android-hilfe.de/samsung.../148547-pixelige-darstellung-beim-s2-wtf.html

Kann dir leider nicht sagen woran das liegen kann. ICh tippe darauf das irgendwas mit der Farbtiefe nicht passt (deswegen der Test mit dem Album Cover, da dort mindestens 24 Bit dargestellt werden).

mfg

Eliah · 16. Oktober 2011

Also es sind .jpg Bilder und auch .png Dateien mit und ohne Transparenz. Immer das gleiche Phänomen. Ich habe eben auch mal versucht Bilder mit einer Farbtiefe von 24bit zu verwenden. Das "Problem" bleibt trotzdem bestehen.

Also entweder es hat mit dem bereitgestellten Format der Grafiken zu tun oder aber es hat mit dem Gerät selbst zu tun...

der_guru · 16. Oktober 2011

Kann ich mir nicht vorstellen das es umbedingt am gerät liegen soll. Du hattest ja erwähnt das andere Webseiten das Problem nicht haben.
Insgesamt ist das sympthom denke ich die Farbtiefe aber was ist die Ursache?

Hast du das mit dem Album Cover mal probiert? Ich denke du solltest versuchen einige dinge auszuschließen.
Hast du dir das Bild mal im als Bild in der Bilder App angeschaut? Tritt dort das Problem auch auf?

MfG

Ergänzung (16. Oktober 2011)

Edit: Kannst du mal das Bild ohne Lichtquelle dir aufm Gerät anschauen. Problem auch da?

Eliah · 16. Oktober 2011

Also, ich verstehe nicht ganz was das mit der Lichtquelle zu tun haben könnte. Die wird ja nicht beim ausgeben des Bildes erzeugt sondern hab ich im Rahmen der Arbeit mit PhotoShop benutzt. Letztlich besteht der Verlauf ja aus Pixeln die ausgegeben werden....

GustlPC · 16. Oktober 2011

Hallo,

gibt es vielleicht sowas wie ein Simulator, wo die Anzeige von Webseiten getestet werden kann?

Kennt da wer was?

der_guru · 16. Oktober 2011

@Eliah ja da hast du schon recht. Aber könnte es sein das der Verlauf als Ebene mit geringere Farbtiefe erstellt wurde?

MfG

Eliah · 18. Oktober 2011

Es scheint als sei ich dem Problem etwas näher gekommen. Nach quälendem Experimentieren ist mir aufgefallen, dass die ganze Palette der Medienplayer ein "Problem" damit haben das Cover richtig anzuzeigen und eben diese Treppeneffekte produzieren. Schaue ich mir das Bild mit einem Bildbetrachter auf meinem AndroidSmartphone an, wird das Bild richtig dargestellt!!

Zu den problematischen Medienplayern zählen der Hauseigene auf Android 2.3.4 sowie der Meridian.

So, jetzt fehlt nur noch eine Lösung bzw. ein MP3-Player für Android der Covers "richtig" anzeigt.

Schon komisch das ganze....

Hat noch jemand einen Tipp, oder eine Erklärung warum die MedienPlayer Mühe mit Grafiken haben?

Flup · 19. Oktober 2011

In welchem Farbprofil arbeitest du am PC? Tritt das Problem noch auf wenn du die jpgs ohne Farbprofilinformationen speicherst? (Bei Photoshop muss man beim speichern ein Haken rausnehmen)

Suche

HTML Müssen Grafiken für Smartphones opimiert werden?

Eliah

Cadet 4th Year

der_guru

Lieutenant

4nanai

Captain

zoz

Lt. Commander

Eliah

Cadet 4th Year

der_guru

Lieutenant

Eliah

Cadet 4th Year

der_guru

Lieutenant

Eliah

Cadet 4th Year

der_guru

Lieutenant

Eliah

Cadet 4th Year

der_guru

Lieutenant

Eliah

Cadet 4th Year

GustlPC

Lt. Junior Grade

der_guru

Lieutenant

Eliah

Cadet 4th Year

Flup

Gast