Verschmierte/unscharfe Grafiken

  • Ich versuche nun meine Wahrnehmung in Sachen Grafik möglichst einfach zu beschreiben.

    Unscharfe Grafik nur mit dem Browser:
    Öffne ich eine Grafik im aktuellen Mozilla-Browser, wird sie leicht vergrößert und dadurch unscharf.
    Öffne ich die gleiche Grafik in einem portablen Firefox 3.6 ist sie scharf und so wie erstellt – keine automatische Vergrößerung.

    (Bildlauf etc. alles aus)

    Unscharfe Grafiken mit WP und Theme:
    In einer anderen WP-Zeit hatte ich nie Probleme mit unscharfen Grafiken. Dies ist besonders auffallend und störend, wenn Schriften im Spiel sind. Ich weiß nicht, ob nur WordPress alleine da herumpfuscht, oder die Themes ihren Teil dazu beitragen. Selbst wenn ich die Grafik nicht über die Medienabteilung einbinde, ist sie nicht scharf. Auch beim Autor der Themes nachgeschaut … wirklich hilfreich und befriedigend ist das alles nicht.

    Wenn natürlich die Browser von Haus aus (bei Chromium/Vivaldi ebenso) alles nach gut Denke verändern, kann ich als Bloggerin mich auf den Kopfstellen, das funktioniert dann nicht, denn die Besucher:innen haben dann eben auch nur ihren Browser.

    Gibt es irgendwelche Kniffe, das Problem in den Griff zu bekommen, wenigstens halbwegs? Hier und da behelfe ich mich mit einer svg-Grafik und einem WP-Plugin, das dies erlaubt. Aber das ist auch nicht das Gelbe von Ei. :confused:

    Gruß :)

    Nachgang: Unsere Avatare sind auch verschmiert, dass Original alleine ist ok (rechtsklick), da verkleinert. Aber vielleicht ist das heute so ...

    Das Leben besteht nur aus Momenten.
    Vergiss nicht das Jetzt.

    Einmal editiert, zuletzt von S.i.T. (10. November 2022 um 09:22)

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Ich versuche nun meine Wahrnehmung in Sachen Grafik möglichst einfach zu beschreiben.

    Unscharfe Grafik nur mit dem Browser:
    Öffne ich eine Grafik im aktuellen Mozilla-Browser, wird sie leicht vergrößert und dadurch unscharf.
    Öffne ich die gleiche Grafik in einem portablen Firefox 3.6 ist sie scharf und so wie erstellt – keine automatische Vergrößerung.

    (Bildlauf etc. alles aus)

    Unscharfe Grafiken mit WP und Theme:
    In einer anderen WP-Zeit hatte ich nie Probleme mit unscharfen Grafiken.

    Wp macht eigentlich per se nur unscharfe Bilder. Die Bilder werden in WordPress nur verkleinert, ohne einer nachfolgenden Schärfung.Man lernt eigentlich in jedem Bildbearbeitungskurs, dass man bei einer Verkleinerung eines Bildes eben nachschärfen sollte. Aber PHP Entwickler belegen halt keine Bildbearbeitungskurse und fühlen sich zu allem berufen.

    Bilder können von dem Theme mit CSS skaliert werden. Hierdurch können Bilder unscharf werden.
    Bilder können bei der Veröffentlichung bereist in WordPress hochscalliert werden (mit Plugin in Funktionen in dem Theme) hierdurch werden unscharf. besser ist es, wenn man anstelle der gd-lib die PHP Erweiterung imagick (Provider Fragen) verwendet. Und große Bilder verwendet, die WordPress "nur" noch verkleinern muss. Die Verkleinerung ist zwar auch gruselig, aber besser als die Vergrößerung. und Finger weg von der gd-lib.

    Mit offenen Augen träumen

  • Betrachtest du vielleicht auf einem Macbook oder iMac mit Retina Display?
    Wir können nicht sehen, was du siehst. Also Beispiele bitte…


    Nein, ganz einfache Bildschirme: ASUS Notebook, BenQ Bildschirm, HP Notebook auf der Arbeit... was die Kollegen haben, muss ich noch mal schauen. Ich kann ein Beispiel schicken, nur ob das hilft?

    Guten Morgen. :-)

  • Wp macht eigentlich per se nur unscharfe Bilder. Die Bilder werden in WordPress nur verkleinert, ohne einer nachfolgenden Schärfung.Man lernt eigentlich in jedem Bildbearbeitungskurs, dass man bei einer Verkleinerung eines Bildes eben nachschärfen sollte. Aber PHP Entwickler belegen halt keine Bildbearbeitungskurse und fühlen sich zu allem berufen.

    Bilder können von dem Theme mit CSS skaliert werden. Hierdurch können Bilder unscharf werden.
    Bilder können bei der Veröffentlichung bereist in WordPress hochscalliert werden (mit Plugin in Funktionen in dem Theme) hierdurch werden unscharf. besser ist es, wenn man anstelle der gd-lib die PHP Erweiterung imagick (Provider Fragen) verwendet. Und große Bilder verwendet, die WordPress "nur" noch verkleinern muss. Die Verkleinerung ist zwar auch gruselig, aber besser als die Vergrößerung. und Finger weg von der gd-lib.

    Vielleicht ist es das Geheimnis. Wenn ich ein halbwegs scharfes 770px-Beitragsbild haben will, es auf 1200 Pixel kreieren, dann wird es nett im Blog. Ich teste das heute/morgen mal aus. Ich habe noch die passgenaue Denke aus einer anderen Zeit verinnerlicht. :-/ thx. :-)

    Das Leben besteht nur aus Momenten.
    Vergiss nicht das Jetzt.

  • Ich kann ein Beispiel schicken, nur ob das hilft?


    Nein, hilft nicht, weil das so auch nicht gemeint war. Ein Bild hier ins Forum hochzuladen bringt natürlich gar nichts, da es von der Forensoftware neu komprimiert und ggf. skaliert wird. ;) Gemeint war vielmehr ein Link zu einer original Website mit einem Bild, welches du als suboptimal titulieren würdest.

  • Guten Morgen :)

    https://lust-mit-genuss.de/picture-chillout-feedback/

    Dort ist eine typische Grafik mit Schrift, wo ich dann irgendwann kurz davor bin in die Tischplatte zu beißen.

    Den Feedbackbogen heruntergeladen, mit einem Bildbetrachter angeschaut = ok
    Den Feedbackbogen in den aktuellen Firefox geladen (Datei öffnen) = schon nicht mehr ok
    Den Feedbackbogen in den portablen Firefox 3.6 geladen = ok

    Da ist noch gar nicht WordPress im Spiel.

    Und jetzt kommt WordPress dazu … ich habe es nicht hinbekommen. :-/

    Schönen Sonntag euch allen.

    Das Leben besteht nur aus Momenten.
    Vergiss nicht das Jetzt.

  • Deaktiviere bei der Suche nach Darstellungsproblemen alle Cache-, Minify- und Optimierungsplugins!

    Das Headerbild auf der verlinkten Seite hat eine Breite von 360px, warum auch immer. Im Gegensatz z.B. zum Headerbild auf der Startseite, das hat 1599px Breite ... Auch die beiden anderen Headerbilder sind deutlich größer.

    Wenn du bei deinem Browser F12 drückst und den gewünschten Bereich untersuchst (Maus am oberen Rand des Headerbildes, rechte Maustaste drücken, "Untersuchen" drücken, dann solltest du zu einem ähnlichen Bild wie oben kommen .... ;-)

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

  • Guten Morgen,

    um diese Grafiken geht es aber nicht. Und mir ist schon klar, warum … das steht aber hier nun nicht zur Diskussion. Es geht um die Schrift, das Verschmieren vom Original (so wie es auf der Festplatte liegt, sich heruntergeladen werden kann) bis zur Präsentation. ;)

    Gruß :)

    Das Leben besteht nur aus Momenten.
    Vergiss nicht das Jetzt.

  • Sorry, jetzt weiß ich was du meinst ........

    Es geht um das Bild, auf dem mit einem Handschrift-Font der Fragebogen abgebildet wird, am Ende der Seite.
    (Das ist aber ähnlich wie oben geschrieben mit dem Headerbild :rolleyes:).
    Da stellt sich mir die Frage, warum Schrift (nur Schrift) auf einem Bild?
    Das wird am Handy nahezu unlesbar, weil das der Font sehr fein ist und das Bild herunter scaliert wird. Verlustfrei ginge das ggf mit einer skalierbaren Vektor Grafik, die aber [FONT=Courier New]WP out fo the Box [/FONT]wieder nicht laden kann.
    Weil Bilder, soviel ich weiß, nicht zu 100% in WP übernommen werden - ich meine mich erinnern zu können, das WP Bilder auf ca. 80% komprimiert - vielleicht kann dazu einer der PROs etwas sagen ...
    Dazu kommt, dein Theme ist auf 750px Contentbreite eingestellt, dein Bild hat 800px originale Breite, also wird wieder ein scaliertes Bild dargestellt.
    Das heißt überall Verluste in der Schärfe!!!!

    Um hier den Fragebogen verlustfrei darstellen zu können, würde ich das als Text darstellen. Über den Handschrift-Font müsste man nachdenken, ob der Aufwand, den Font lokal (DSGVO konform, bzw ggf. Lizenzrechtlich) einzubinden gerechtfertigt ist.

    [FONT=Courier New]Nachtrag:
    Ein Minify Plugin ist weiterhin aktiviert, was die Analyes und die Lesbarkeit der Codes enorm erschwert.[/FONT]

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

  • Dazu kommt, dein Theme ist auf 750px Contentbreite eingestellt, dein Bild hat 800px originale Breite, also wird wieder ein scaliertes Bild dargestellt.


    Genau das ist das Hauptproblem! Eine (Strich)grafik (also kein Foto, sondern eine Grafik aus Flächen und harten Kanten) sollte auf dem jeweiligen Ausgabegerät immer in 100% angezeigt werden (erfordert also auch unterschiedlicher Dateiausgaben für Responsive). Eine weitere gute Möglichkeit ist, das Bild auf genau 50% zu skalieren. Die denkbar schlechteste Darstellung wird erzeugt bei krummen Skalierungen wie 87,5% oder dergleichen.
    Außerdem ist Voraussetzung natürlich, dass aus einer guten Software ein wirklich gutes Original generiert wurde und die Komprimierung möglichst gering ist. Ich Empfehle für Strichgrafiken immer PNG zu nehmen und nicht JPG oder webP. Bei Grafiken ohne Rauschen und Verläufen ist das PNG idR sogar kleiner als JPG & Co. Bei Bedarf lässt sich das PNG mit TinyPNG nochmals um 60% reduzieren ohne Qualitätsverlust.

    Das Thema hatten wir vor einiger Zeit auch HIER mit einem Verweis auf die Grafiken bei Apple. Hier einfach mal auf die Grafiken klicken, untersuchen und verstehen, warum die Grafiken gestochen scharf und absolut makellos aussehen, als ob es Vektorgrafiken wären.

  • Erstmal vielen Dank an Euch. Ich kann da jetzt erst am Wochenende weitermachen, da in Frankfurt Messe ist, und da muss ich erscheinen. Aber sind schon gute Hinweise, die ich anwenden kann. Wir lesen uns Samstag wieder. Gute Zeit Euch. :-)

    Das Leben besteht nur aus Momenten.
    Vergiss nicht das Jetzt.

  • Hi zusammen:)
    @SEpp55 @meisterleise @b3317133

    Also, es hat gute Fortschritte gegeben. Zumindest ist dieser Schmiereffekt nicht mehr so sichtbar, wie zuvor, und recht brauchbar/angenehm auf dem PC zu sehen. Wenn da das Ganze auf dem Smartphone nicht mehr mitkommt, *schulterzuckt* „Alles geht nun mal nicht“ sagt Olaf von WordPress.:D

    Die Tipps sind sehr hilfreich, auch die weiterführenden Links. Damit, denke ich, komme ich meinem Ziel viel näher.

    Und warum den Fragebogen als Megapic?
    Mit der Schrift auf dem Server und dann einbinden ... jo, schien mir zu viel Aufwand für eine Geschichte und wollte dennoch die Persönlichkeit der Antwortbögen herausstellen. Naja... ;)

    Danke Euch allen.

    Das Leben besteht nur aus Momenten.
    Vergiss nicht das Jetzt.

  • Du hast die Handschrift nochmal geändert (vermutlich weil die vorherige zu filigran fürs Smartphone war?).
    Verrätst du mir noch, wie die Schrift heißt, die du zuerst eingesetzt hattest? Die gefällt mir nämlich. :rolleyes:

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!