Shoplogo "blurt" in Chrome?!

Thema wurde von Anonymous, 5. Oktober 2017 erstellt.

  1. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    15. Januar 2014
    Beiträge:
    110
    Danke erhalten:
    13
    Danke vergeben:
    70
    Guten Morgen allerseites,

    eine Kleinigkeit, die mich seit dem Wechsel zu Honeygrid beschäftigt:
    In Firefox ist mein Shoplogo wunderbar scharf, in Chrome ist es hässlich weichgezeichnet.
    (siehe Bild)


    OK: das PNG-Logo selbst ist wesentlich größer und wird runtergerechnet, soweit logisch.
    Aber ein kleineres Logo, das exakt die Maße hatte, die ich im Styleedit eingegeben hatte, führte bloß dazu, dass das Logo wiederum verkleinert wurde.

    Gibt's ne einfache Lösung? Habe kürzlich gelesen, dass Chrome der meistgebrauchte Browser ist... da hätt ich das natürlich gerne schön. :)

    Danke! logoproblem.jpg
     
  2. Dennis (MotivMonster.de)

    Dennis (MotivMonster.de) G-WARD 2013/14/15/16

    Registriert seit:
    22. September 2011
    Beiträge:
    31.166
    Danke erhalten:
    6.199
    Danke vergeben:
    1.101
    Beruf:
    Mann für alles :)
    Ort:
    Weilburg
    Mach das Logo als jpg in der exacten Größe die du im Browser angegeben hast.

    ps. wenn schon dabei bist, bennene es anders nicht nur logo2017 - google wertet auch dateinamen aus. damit deine Marke bekannter wird also eher logo-musikhaus-sedelmeier.jpg nehmen.
     
  3. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    15. Januar 2014
    Beiträge:
    110
    Danke erhalten:
    13
    Danke vergeben:
    70
    Hi Dennis,
    danke für deine Antowrt - aber das hatte ich, wie geschrieben, ja bereits getestet.
    Das Ergebnis war, dass das Logo nur noch halb so groß und in beiden Browsern hässlich war.

    Ich hab grade deinen Shop besucht und stelle fest, dass es dort ja vergleichbar ist:
    Euer Shoplogo wird auch im Header verkleinert und sieht in FF viel besser aus als in Chrome.

    Chrome rechnet die größeren Bilder also vermutlich stärker runter, damit die Seite schneller lädt.

    Daher denke ich, dass man wohl einfach damit leben muss.
    VG
     
  4. Torben Wark

    Torben Wark Gambio GmbH

    Registriert seit:
    15. Juli 2014
    Beiträge:
    2.581
    Danke erhalten:
    1.178
    Danke vergeben:
    399
    Das Problem an der Stelle ist leider, dass Chrome einen anderen Algorithmus zum Skalieren von Bildern verwendet und der scheint nicht so gut zu arbeiten, wie der eines Firefox. Man kann diesen Algorithmus ein wenig beeinflussen, in dem man folgendes im CSS auf Bilder anwendet:

    Code:
    image-rendering: -webkit-optimize-contrast;
    Das funktioniert meines wissens aber nicht immer und hat auch einigen Fällen nur minimale Auswirkungen.
     
  5. Dennis (MotivMonster.de)

    Dennis (MotivMonster.de) G-WARD 2013/14/15/16

    Registriert seit:
    22. September 2011
    Beiträge:
    31.166
    Danke erhalten:
    6.199
    Danke vergeben:
    1.101
    Beruf:
    Mann für alles :)
    Ort:
    Weilburg
    halb so groß - dann stimmt aber irgendeine einstellung nicht.
    Bild in originalgröße mit 72dpi auflösung für monitore speichern. hattest evtl. 150 oder 300 dpi eingestellt?

    durch diese zoom funktionen wird das unscharf wie torben schon schrieb. daher möglichst original größe nehmen damit nix neu berechnet wird.
     
  6. Wilken (Gambio)

    Wilken (Gambio) Erfahrener Benutzer

    Registriert seit:
    7. November 2012
    Beiträge:
    18.737
    Danke erhalten:
    7.310
    Danke vergeben:
    2.208
    JPEG Bilder haben keine DPI. JPEG Bilder haben eine Grösse in Pixeln. Die können eine optionale Zusatzinformation für DPI enthalten, die Druckern (Die Dinger aus den 90ern, mit Papier) einen Hinweis gibt wie gross das Bild auf Papier skaliert werden soll.
    Für die Browserdarstellung, und nichts anderes interessiert hier, hat ein DPI Wert absolut 0 Relevanz. Da gehts um Platzzuweisung und um x mal y Dimension in Pixeln, und um Kompressionsstärke des Bildes, nothing else. Für Logos ist übrigens oft png das bessere Format.
     
  7. Dennis (MotivMonster.de)

    Dennis (MotivMonster.de) G-WARD 2013/14/15/16

    Registriert seit:
    22. September 2011
    Beiträge:
    31.166
    Danke erhalten:
    6.199
    Danke vergeben:
    1.101
    Beruf:
    Mann für alles :)
    Ort:
    Weilburg
    beim speichern und runterrechnen bekommst aber qualitätsunterschiede selbst wenn die absoluten pixel natürlich immer gleich sind. sagen wir 1000x1000 pixel. die bleiben auch immer 1000x1000 pixel egal bei welcher auflösung. aber fürs web speichert man die dennoch mit 72dpi als angabe weil das die normale ist die auch Kameras usw nutzen und wenn du es höher machst wirds interesanterweise schlechter beim runterrechnen auf die 1000x1000 pixel. Liegt wohl am Algorithmus der das Bild berechnet. Jedenfalls ist webauflösung 72dpi daher sollte das auch im Bild so hinterlegt sein und nicht höhere werte.
    Ebenso berechnet chrome ja das Bild neu wie man sieht. Daher der Vorschlag mal als JPG zu nehmen statt PNG, da es vielleicht besser berechnet wird von Chrome als die PNG Bilder.
     
  8. Wilken (Gambio)

    Wilken (Gambio) Erfahrener Benutzer

    Registriert seit:
    7. November 2012
    Beiträge:
    18.737
    Danke erhalten:
    7.310
    Danke vergeben:
    2.208
    Nee, JPEG im Browser kennt keine DPI. Du gibst eine Spezialanleitung für die Bildverarbeitungssoftware die du nutzt, das Bilddateiformat interessiert das nicht.
    In deiner Bildverarbeitung ist dein Bild auch nie ein JPEG oder PNG, du kannst initial ein JPEG oder PNG in eine programmspezifische interne Form importieren, danach ist es programmspezifisch intern irgendein BLOB, nach der Bearbeitung kannst du dein Bild in JPEG oder PNG exportieren. Während die Skalierung stattfindet, ist dein Bild also weder ein JPEG noch ein PNG.
     
  9. Dennis (MotivMonster.de)

    Dennis (MotivMonster.de) G-WARD 2013/14/15/16

    Registriert seit:
    22. September 2011
    Beiträge:
    31.166
    Danke erhalten:
    6.199
    Danke vergeben:
    1.101
    Beruf:
    Mann für alles :)
    Ort:
    Weilburg
    VOR dem Speichern die Auflösung auf 96 oder 72 (72 weil Fotoapperate usw das nutzen) oder nimmst von mir aus 96ppi (Photoshop für Web Speichern hinterlegt das so in den jpg eigenschaften).
    Das Programm berechnet die qualität dann anders intern und hast dann beim speichern und aufrufen im browser je nach Bild bessere ergebnisse als wenn mit höherer auflösung im Programm gearbeitet hast und dann als 1000x1000px speicherst.
    Ja das Bild wird immer 1000x10000px sein und je nach Monitor / Display hast eh andere ppi Werte heutzutage meist über 100ppi Smartphones oft inzwischen sogar über 300ppi.

    Je nach Bild kann auch ein PNG besser als ein JPG berechnet sein Heißt aber nicht dass es immer so ist.
     
  10. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    15. Januar 2014
    Beiträge:
    110
    Danke erhalten:
    13
    Danke vergeben:
    70
    Hi Leute,
    danke für eure Beiträge. :)
    @Dennis: Mein Versuch war schon im Gimp mit 72dpi angelegt, exportiert habe ich dieses als JPG.
    Die Bildgröße war exakt wie im Styleedit bei den Header-Einstellungen (Höhe Logo, Breite Logo) definiert.
    Trotzdem wurde es stark verkleinert ausgegeben. Rätselhaft...
    Hast du mal deine Seite mit Chrome und FF verglichen? Ist bei euch, wie gesagt, genau dasselbe Problem. Wenn man es als eins sieht.
    Ist ja nur so eine optische Kleinigkeit... halt nicht perfekt.
     
  11. Dennis (MotivMonster.de)

    Dennis (MotivMonster.de) G-WARD 2013/14/15/16

    Registriert seit:
    22. September 2011
    Beiträge:
    31.166
    Danke erhalten:
    6.199
    Danke vergeben:
    1.101
    Beruf:
    Mann für alles :)
    Ort:
    Weilburg
    das wirst dann bei dir fast überall haben. Evtl. liegts auch daran wie der Brwoser und deine Monitor auflösung zusammenspielen. die haben ja auch diverse ppi werte also pixel je inch. da wilken ja auf nicht druck begriffe abfährt :)
     
  12. #12 postel, 4. November 2017
    Zuletzt von einem Moderator bearbeitet: 4. November 2017
    Danke, das hat mich gerade beim Logo und und header beim Chrome schon immer geärgert (verschwommen),
    der Tip hat es wesentlich verbessert.
    Nachtrag:
    Header-Logo:
    Code:
    #navbar-brand {image-rendering: -webkit-optimize-contrast;}
    und für alle Bilder Shop:
    Code:
    img {image-rendering: -webkit-optimize-contrast;}
    hat die Anzeige aller Bilder im Chrome (Kontrast und Schärfe) super verbessert.
     

    Anhänge: