Ausgefranste Schrift auf meiner Website

  • Firefox lädt mit 540px Breite, Chrome/Chromium mit 682px Breite. Code in der Webseite:

    Code
    <img srcset="https://i2.wp.com/www.etzen-live.at/wp-content/uploads/2021/03/VergleichLetzteSieben0314.jpg?strip=info&amp;w=540&amp;ssl=1 540w" alt="" data-height="540" data-id="49427" data-link="https://www.etzen-live.at/corona-information3/vergleichletztesieben0314/" data-url="https://www.etzen-live.at/wp-content/uploads/2021/03/VergleichLetzteSieben0314.jpg" data-width="682" src="https://i2.wp.com/www.etzen-live.at/wp-content/uploads/2021/03/VergleichLetzteSieben0314.jpg?ssl=1" layout="responsive" title="" style="">

    Allerdings scheint das Bild selbst vom Typ WEBP, warum sich Firefox genau für die kleinere Auflösung entscheidet, kann ich dir nicht sagen.

    https://i2.wp.com/www.etzen-live.at/wp-content/uploads/2021/03/VergleichLetzteSieben0314.jpg?strip=info&w=540&ssl=1

    https://i2.wp.com/www.etzen-live.at/wp-content/uploads/2021/03/VergleichLetzteSieben0314.jpg?strip=info&w=682&ssl=1

    Wir sind keine Beschwerdestelle, hier gibt es nur Lösungen! Meine Glückszahl hier: 94.

  • Auch wenn du das noch so oft in diesem Forum schreibst (mindestens das Dritte Mal innerhalb kurzer Zeit), wir müssen schon bei den Fakten bleiben. Du sagst aus, dass es Umstände geben würde, in denen die Software Anhänge nicht speichert, dass also ein klarer Software-Fehler vorliegen würde. Das ist aber kein Fakt, das ist deine persönliche Bewertung der aktuellen Funktionsweise. Fakt ist: Die Anhänge werden erst hochgeladen, wenn der Beitrag abgesendet wird. Wenn du das Bild in den Beitrags-Editor einfügst und die Seite danach neu lädst, siehst du als Ersteller des Beitrags das Bild noch auf Grund von Caching. Tatsächlich existiert der Anhang aber nicht mehr, ergo kommt es zu einer fehlerhaften Verlinkung durch ein Nutzungsverhalten, welches so nicht funktioniert.

  • Gibte es keine Lösung für dieses Problem?

    Den Webseiten-Betreiber auf das Problem aufmerksam machen.

    Auf meiner Website werden speziell Grafikdateien sehr unscharf dargestellt.

    Ach, das bist Du selbst.

    Ein Fehler, den ich sehe: Du solltest Grafiken nicht als JPEG darstellen, Nimm am allerbesten SVG, dann müsstest Du auch die ganzen Größenjonglagen nicht einbauen, oder wenigstens PNG (ich vermute, du konvertierst sie sowieso mit einem PHP-Modul, oder?). .DeJaVu schreibt von WEBP, was bei modernen Browsern oft bessere Ergebnisse trotz Komprimierung erzeugt (war ja auch ein Beweggrund der Entwicklung), ich erkenne aber nicht, wie er hier darauf kommt. Und man schließt Benutzer älterer Browser aus.

    Eventuell ist es auch abhängig von den benutzen Schriften, aber das ist nur eine Vermutung ins Blaue hinein.

    Wenn ich die Grafiken z.B. unter Chrome aufrufe, werden die ordnungsgmäß angezeigt.

    Ich hab kein Chrome, aber SRWare Iron (Link zum Wikipedia-Artikel), und sehe keinen Unterschied. Soll heißen: In beiden Browsern ist die Darstellung der Schrift leicht unscharf; es handelt sich hier also sehr wahrscheinlich um kein Firefox-Problem.

  • Ein Fehler, den ich sehe: Du solltest Grafiken nicht als JPEG darstellen, Nimm am allerbesten SVG […] oder wenigstens PNG

    Das möchte ich so auf gar keinen Fall stehen lassen. Weder JPEG noch PNG sind das pauschal bessere oder schlechtere Bildformat und SVG als Vektorgrafikformat ist sowieso eine ganz andere Baustelle. JPEG zu verwenden ist jedenfalls definitiv kein Fehler, auch in der Verwendung für das Web nicht. Es kommt immer drauf an.

    Nimm am allerbesten SVG, dann müsstest Du auch die ganzen Größenjonglagen nicht einbauen

    Das Größen-Handling ist bei keinem Web-kompatiblen Format so kompliziert wie bei SVG.

    Von beiden Punkten abgesehen nutzt der Themenersteller WordPress und WordPress erlaubt standardmäßig aus Sicherheitsgründen keinen Upload von SVG-Dateien.

    schreibt von WEBP, was bei modernen Browsern oft bessere Ergebnisse trotz Komprimierung erzeugt (war ja auch ein Beweggrund der Entwicklung), ich erkenne aber nicht, wie er hier darauf kommt. Und man schließt Benutzer älterer Browser aus.

    WebP bedeutet keinesfalls, Benutzer älterer Browser auszuschließen, da man problemlos mehrere Bildformate angeben kann. Für WordPress gibt es auch Plugins, die das für Content automatisiert erledigen.

    ---

    Jedenfall… ob JPEG, PNG, SVG, WebP oder bald auch AVIF - das Bildformat ist für das Problem des Themenerstellers grundsätzlich völlig irrelevant. Scharfe Bilder bekommt man mit jedem Format hin. Die Bilder sind nicht unschön, weil ein Format gewählt worden wäre, das es nicht besser könnte.

    Einen Bild-Unterschied sehe ich auch zwischen Firefox und Chrome und nein, das liegt nicht daran, dass Firefox ein anderes Bild laden würde als Chrome. Das dürfte eher am Farbprofil legen. Die Qualität ist weder noch berauschend und vor allem am Schrift-Rendering ist für mich kein Unterschied feststellbar.

  • Wegen WEBP nochmal, evtl habe ich die "Anfragekopfzeilen" falsch gedeutet.

    Code
    GET /c.gif?s=2&u=https%3A%2F%2Fi1.wp.com%2Fwww.etzen-live.at%2Fwp-content%2Fuploads%2F2021%2F03%2FVergleichLetzteSieben0316.jpg%3Fssl%3D1&r=&b=92240731&p=39123&rand=0.2977995813909887 HTTP/2
    Host: pixel.wp.com
    User-Agent: Mozilla/5.0 (Windows NT 6.3; rv:86.0) Gecko/20100101 Firefox/86.0
    Accept: image/webp,*/*
    Accept-Language: de,en-US;q=0.7,en;q=0.3
    Accept-Encoding: gzip, deflate, br
    Connection: keep-alive
    Referer: https://www.etzen-live.at/corona-information3/
    TE: Trailers

    In einem neuen Profil bekomme ich in einem Overlay/Diashow die Grafik mit 682 Pixel breite angezeigt.

    https://i1.wp.com/www.etzen-live.at/wp-content/uploads/2021/03/VergleichLetzteSieben0316.jpg?ssl=1

    Alles andere, auch falsche, ist dem Arbeitsprofil geschuldet.

    Wir sind keine Beschwerdestelle, hier gibt es nur Lösungen! Meine Glückszahl hier: 94.

  • evtl habe ich die "Anfragekopfzeilen" falsch gedeutet

    Anfragekopfzeilen sind die Header, welche der Browser an die Website sendet, nicht die Antwort vom Server an den Browser. Accept: image/webp,*/* entspricht dem Standard von Firefox für Bilder. Damit signalisiert Firefox der Website, dass der Browser WebP unterstützt. Die Website könnte dann, abhängig vom Accept-Header, ein WebP-Bild ausliefern oder nicht, dann müsste man nicht mehrere Formate im HTML-Code hinterlegen. Ab Firefox 88 sieht's dann so aus: image/avif,image/webp,*/*. Das sagt aber nichts darüber aus, was für ein Format die Bilder haben, die auf der Website dann verwendet werden, da die Website nichts mit den Anfrage-Headern zu tun hat.

  • Weder JPEG noch PNG sind das pauschal bessere oder schlechtere Bildformat und SVG als Vektorgrafikformat ist sowieso eine ganz andere Baustelle. JPEG zu verwenden ist jedenfalls definitiv kein Fehler, auch in der Verwendung für das Web nicht. Es kommt immer drauf an.

    jahrud präsentiert Grafiken auf der Website. Ich bezog mich bei meiner Antwort auf diese Äußerungen in der Wikipedia (und inhaltlich gleich bei Wikimedia Commons), nach denen dort seit Jahren vorgegangen wird:

    Verwende

    • SVG, ein „verlustfreies“ Format, für Diagramme und Grafiken;
    • PNG, ein „verlustfreies“ Format, für Zeichnungen/Diagramme jeglicher Art (insbesondere Bilder mit Beschriftungen, gegebenenfalls auch für gescannte Bilder oder Fotos in Druckqualität) sowie für Grafiken, falls SVG nicht möglich ist;

    Wie dort auch zu lesen ist, sind die Kompressionsartefakte bei JPEG unter Umständen ein Problem und genau die können erheblich dazu beitragen, dass Schrift unscharf dargestellt wird.

    Das Größen-Handling ist bei keinem Web-kompatiblen Format so kompliziert wie bei SVG.

    Eben weil SVG ein Vektorformat ist, dachte ich, man müsse weniger Größenvorgaben machen, deshalb meine Äußerung, aber OK – und wenn es in Wordpress nicht erlaubt ist, hier im konkreten Fall auch nicht relevant.

    WebP bedeutet keinesfalls, Benutzer älterer Browser auszuschließen, da man problemlos mehrere Bildformate angeben kann.

    Aha, stimmt. Was ich meinte, kann man unter Can I use... WebP image format nachsehen.