Header unscharf

**donwinni** · 29.11.2010, 14:49

Hallo,
leider habe ich zu dem Thema noch nirgends eine Lösung gefunden. Besteht das Problem nur bei mir?
Also: ich erstelle eine Grafik, die ich als Header verwenden will. Im Grafikprogramm (GIMP) und auch beim Betrachten der fertigen Grafik im Format png, und jpg, ist alles wunderbar. Sobald ich die Grafik jedoch in contao als Header einsetze, erscheint die Schrift verwaschen und unscharf. Ich hab das mit dem contao-Dateimanager importiert und auch mit FTP hochgeladen. Das Ergebnis ist immer das Gleiche: Die Schärfe geht verloren.
Wäre wirklich toll, sollte mir jemand hier auf die Sprünge helfen können. Für Eure Mühe - vielen Dank im Voraus
Winfried

***xchs*** · 29.11.2010, 14:57

Hallo donwinni,

willkommen in der Contao-Community.

Wird das Bild im Header skaliert bzw. anstelle der Originaldatei eine (skalierte) Version aus dem Contao-Cache geladen?

**stefan-at-work** · 29.11.2010, 14:58

ich nehme mal an, das das Headerbidl automatisch verkleinert wurde. Bitte überprüfe mal Deine Einstellungen unter -> Dateiupload -> max. Bildbreite

Ggf. hier die max. Breite anpassen.

**donwinni** · 29.11.2010, 14:59

Nein, die Grafik wird nicht skaliert, hab extra darauf geachtet, dass die Maße exakt stimmen.

***xchs*** · 29.11.2010, 15:05

Auf welchem System (Mac, PC) respektive welcher Browser-Software hast Du das festgestellt? Eventuell wäre in diesem Fall ein Link zur Live-Seite hilfreich, ansonsten wird man hier nicht viel sagen können.

**frank** · 29.11.2010, 15:07

Welche Schriftgröße verwendest Du? Kannst Du bitte mal einen Link zur Verfügung stellen?

Gruß, Frank

**Bobi** · 29.11.2010, 16:23

Bzgl:

Im Grafikprogramm (GIMP) und auch beim Betrachten der fertigen Grafik im Format png, und jpg, ist alles wunderbar

Hast du hier die Grafik mit einem Bildbetrachter angeschaut oder mit Hilfe eines Browsers?

Falls Bildbetrachter, ziehe die Grafik einfach mal in den Firefox und schaue, ob es hier noch klar ist oder auch schon "verwaschen".

Grüße,
Bobi

**Alexander** · 29.11.2010, 17:04

Drück mal "STRG" und "0", wenn du dir die Seite anschaust. Ggf. liegt's ja nur daran ;-).

**donwinni** · 29.11.2010, 18:53

Erst mal herzlichen Dank, dass sich so viele hier Gedanken gemacht haben.
Also: Die Seite wird unter Windows 7 erstellt. Mit einem Bildbetrachter (Windows Bildbetrachter) ist die Schrift auch scharf, das ist sie auch noch, wenn ich ausschließlich die Grafik im Firefox lade. Sobald contao ins Spiel kommt, wirkt dich Schrift unscharf.
Ach ja, danke für den Tipp mit der limitierten Bildgröße im Dateimanager (war tatsächlich auf 800 px limitiert). Ich habe den Wert erhöht, die Grafik neu hochgeladen ... aber leider wie zuvor. Ich werde mal weiter experimentieren, ist ja kein Beinbruch, nur ... schöner wärs halt schon.
Abendliche Grüße
Winfried

**tblumrich** · 29.11.2010, 19:11

Also ein Link zur Seite oder ein Screenshot (müsste dann ja auch die Unschärfe zeigen, oder?) und/oder die erwähnte Headergrafik hier als Anhang wäre echt vorteilhaft für die weitere Analyse...

Auch mal Browsercache löschen und Contao Cache bereinigen wäre sinnvoll.

Gruß
Thomas

**donwinni** · 29.11.2010, 19:18

Die Grafik sieht so aus, dabei macht es keinen Unterschied (in der Schärfe), ob unter jpg oder png abgespeichert wird. Die Grafik wird nicht skaliert. Im Original ist die Schrift gestochen scharf.

**Ale** · 29.11.2010, 19:25

Könnte es vielleicht daran liegen, dass du unter JPG-Qualität nicht 100% angegeben hast?

**tblumrich** · 29.11.2010, 19:42

Zitat von donwinni

Die Grafik sieht so aus, dabei macht es keinen Unterschied (in der Schärfe), ob unter jpg oder png abgespeichert wird. Die Grafik wird nicht skaliert. Im Original ist die Schrift gestochen scharf.

Ist das jetzt der Original Header oder ist das aus einem Screenshot?
In jedem Fall sieht das hier etwas unscharf (verwaschen) aus und auch nach stärkerer JPG Komprimierung (die Dateigröße läßt auch darauf schließen).
Das Bildgrößen Limit in Contao hattest du jetzt verändert? Weil die Grafik ist hier ja deutlich mehr als 800px. Und Caches bereinigt?

Gruß

**donwinni** · 29.11.2010, 19:48

Die Grafik ist die Originalgrafik, kein screenshot. Tatsächlich fehlt die Schärfe nur online, also auch hier im Forum ist der Effekt des Verwaschens zu erkennen. Die Grafik ist 948x247 px und liegt im png Format vor. Die uploadgröße hatte ich in contao auf 1024x800 großzügig verändert. Die Grafik sollte also problemlos im Originalformat hochgeladen werden.

**donwinni** · 29.11.2010, 19:50

Ach ja, Caches in contao und Firefox sind geleert

**tblumrich** · 29.11.2010, 20:19

Hmm... also da bin ich jetzt etwas ratlos...
Die Miniaturgrafik wird in der Bildunterschrift als PNG angezeigt - ist aber in Wirklichkeit scheinbar ein JPG - ebenso die große Version - ein JPG. Und das ist das Teil was bei dir aus Contao kommt oder das was GIMP ausspuckt?

Kann es sein, das GIMP da irgendwas nicht ganz konform exportiert? Und je nach Anwendung wird da irgendwas konvertiert... klingt für mich aber ziemlich unwahrscheinlich.
Wenn ich dich richtig verstehe wird die Grafik lokal aber so angezeigt, wie du möchtest, oder? Wie groß ist die Grafik denn bei dir lokal nach dem Export? Auch 23kB? Das erscheint mir bei den Abmessungen doch eine starke Komprimierung zu sein und würde IMO definitiv die Verwaschung erklären...

Gruß

**donwinni** · 30.11.2010, 12:48

Hallo tblumrich,
du hast recht, das wäre eine zu starke Komprimierung. Nein, die Datei ist tatsächlich 110kb groß, liegt aber im png-Format bei contao. Mir fällt jetzt auch nichts mehr ein, vielleicht geht mir später ein Licht auf.
Danke an alle, die sich Gedanken gemacht und mir Tipps gegeben haben.

Winterliche Grüße -
Winfried

**andreas.schempp** · 30.11.2010, 23:29

Könnte es seiepn dass das Bild per HTML verkleinert angezeigt wird als es eigentlich ist

**donwinni** · 01.12.2010, 00:19

Hallo Andreas,
nein, hab' das eben nochmal direkt verglichen. Im Browser (Firefox und ebenso Opera) ist die Grafik exakt so groß, wie im Bildbetrachter.

***xchs*** · 01.12.2010, 00:26

Zitat von donwinni

Hallo Andreas,
nein, hab' das eben nochmal direkt verglichen. Im Browser (Firefox und ebenso Opera) ist die Grafik exakt so groß, wie im Bildbetrachter.

Könntest Du bitte mal den generierten HTML-Code für dieses Bild hier posten?

**do_while** · 01.12.2010, 07:00

Hallo donwinni,

mir ist es mal passiert, dass das Bild beim Upload verkleinert wurde, da die Einstellungen nicht die volle Seitenbreite für Bilder zugelassen haben. In der Darstellung auf der Homepage wurde das Bild dann wieder gestreckt ausgegeben, das könnte diesen Effekt ergeben.

Abhilfe war, das Bild per FTP in der korrekten Größe hochladen, dann greifen die maximalen Werte aus den Einstellungen nicht.

**andreas.schempp** · 01.12.2010, 08:34

Er hat es schon per FTP versucht

Was passiert denn wenn du das Bild direkt per URL aufrufst? Ist es dann auch unscharf?

**MacKP** · 01.12.2010, 09:37

Wie wäre es denn mal mit einem Link zu der betreffenden Seite ;-)

Wie man merkt ist hier sonst heiteres Raten angesagt was die Sache extrem mühselig und langwierig macht ^^

Viele Grüße

***xchs*** · 01.12.2010, 09:45

Weiter oben hatte donwinni geschrieben, dass er die Seite unter Windows 7 entwickelt. Ich bin daher davon ausgegangen, dass das "lokal" gemeint war...

Nichtdestotrotz wäre es in diesem Fall wohl sinnvoll, wenn davon auch online irgendwo ein Testcase zur Verfügung gestellt wird, sonst kommt man hier wirklich nicht weiter!

**donwinni** · 01.12.2010, 18:38

Die Seite gibt es noch nicht, bin ja erst beim Rohbau. Trotzdem hier der Link:
http://danncom.de/
Hier ist schön zu sehen, wie die Schrift und auch der kleine blaue Strich verwaschen wirken, während die Schrift, die aus dem contao Breadcrumb Navi erzeugt wird, in dem Blauen Feld korrekt scharf dargestellt wird.

**andreas.schempp** · 01.12.2010, 19:00

Das eine ist ein Bild, das andere "aktives Rendering" vom PC. Das wird nie gleich aussehen. Hast du ev. das Original-Bild welches "bessere" Qualität hat? Nur so ist ein Vergleich möglich.

***xchs*** · 01.12.2010, 19:02

Nur zu Deiner Info: Anders als von Dir unter #4 angegeben wird das Bild im Browser skaliert:

Die Original-Datei unter http://danncom.de/tl_files/pcmann/banner-01.png hat eine Größe von 948px × 287px.
Im Browser wird dieses Bild dann durch die entsprechenden Größenattribute auf 930px × 287px skaliert.

**donwinni** · 01.12.2010, 19:35

Hallo xchs,
du hast natürlich recht ... ist mir nicht aufgefallen. wobei ich denke, dass bei einer verkleinerten Darstellung, die Schärfe nicht leiden sollte.

Hallo Andreas,
das Original hatte ich schon mal unter #11 gezeigt, da ist allerdings die Dateigröße wesentlich geringer, als das Original. Deshalb lade ich das Original noch mal hier hinein. Vielleicht klappt's ja diesmal. Eben sehe ich, dass im Forum die maximale Bildgröße auf 100kb bei png Formaten begrenzt ist. Das erklärt vielleicht das oben Genannte. Also lade ich die Datei jetzt als jpg hoch (Größe 64kb - Qualität auf 100%).

**MacKP** · 01.12.2010, 20:23

Zitat von donwinni

Hallo xchs,
du hast natürlich recht ... ist mir nicht aufgefallen. wobei ich denke, dass bei einer verkleinerten Darstellung, die Schärfe nicht leiden sollte.

Wie ich es mir auch dachte... die Schärfe leidet unter so etwas IMMER. Denn es wird nicht wirklich verkleinert, sondern so wie du es da rein gebracht hast da rein gedrückt...
Mach es also in dem passenden Endformat und gut ist.

Viele Grüße

**tblumrich** · 01.12.2010, 22:13

Die Schärfe bei Grafiken leidet schon, wenn man es nur im 1-2 Pixel per Browser skalieren läßt. Der Effekt ist umso größer bei unproportionalen Skalierungen und wenn man Effekte wie Schattierungen (wie bei dir) nutzt.
Also, wie MacKP schon schrieb... Grafiken immer 100% korrekt einbinden und keinesfalls via HTML Attributen width und/oder height skalieren!
Ich denke auch das genau das und nicht mehr oder weniger dein Problem ist.

Gruß
Thomas

**donwinni** · 01.12.2010, 23:06

So ... ich bin platt. Seit fast 30 Jahren arbeite ich mit Computern unter Windows und Linux. Und bis eben war ich der Meinung, dass Grafik beim Verkleinern um ein paar Pixel nicht an Schärfe verliert. Ist aber so. Ich habe die Grafik neu formatiert und im png Format mit dem contao Dateimanager importiert. Und siehe da ... alles wunderbar. So eine kleine Schlamperei und eine so verwaschene Wirkung.
Danke an alle, die mit Tipps und Ratschlägen sich hier eingebracht haben. Welch ein kompetentes Forum. Vielleicht kann ich in Zukunft auch etwas dazu beitragen.

Winterliche Grüße an euch
Winfried