PNG Bild wird unscharf

  • Guten Abend,

    ich benutze das Customizr Theme und habe mit Draw It diverse Schaubilder konstruiert.

    Jetzt hat sich eine kleine Zwickmühle ergeben.

    Speichere ich das Schaubild als HTML ab und integriere es in einen Beitrag, wird die Ladezeit, insbesondere auf einem Mobilfunktelefon, länger.

    Das sind zwar nur ein paar Sekunden, aber es stört im reibungslosen Ablauf.

    Alternativ habe ich es als SVG abgespeichert, das sah toll aus, wird aber im Android Browser nicht dargestellt. Am Rechnerbrowser funktioniert es einwandfrei. Hab aber wegen der Gefahr, dass es für den Benutzer nicht sicher sichtbar ist, Abstand davon genommen.

    Dritte Alternative. Abgespeichert als PNG. Das ist vom Ablauf am schnellsten, allerdings passiert etwas mit dem Bild ... es wird unscharf.

    Die Unschärfe zieht sich durch alle Endgeräte, öffne ich das PNG extern, egal in welchem Browser, ist es wieder gestochen scharf. Bei meinen Nachforschungen habe ich gelesen, dass Wordpress gerne Bilder reduziert, bei anderen Bildern passiert das aber nicht. Denke ich zumindest, andere Bilder sind ohne Text, da sieht man es nicht so genau.

    Ich bin für hilfreiche Tipps sehr dankbar, da ich im Moment in einer Schleife hänge und mit dem Projekt nicht wirklich weiterkomme. Die Schaubilder bilden einen essentiellen Kern.

    mit freundlichen Grüßen

    • 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

  • SVG sollte mittlerweile in nahezu allen Browsern angezeigt werden. Auch mit Android sollte das problemlos funktionieren. Zumindest bei Geräten mit Android < Android 4.

    Das PNG Bild wird vermutlich unscharf, da es skaliert eingebunden wird.

  • Dritte Alternative. Abgespeichert als PNG. Das ist vom Ablauf am schnellsten, allerdings passiert etwas mit dem Bild ... es wird unscharf.

    Um das Beurteilen zu können und eventuell zu helfen, müsste man die Seite sehen. So wäre alles nur geraten und nicht hilfreich.

    Nein, dem habe ich nichts hinzuzufügen :-)
    [HR][/HR]

  • Guten Morgen,

    vielen Dank für die investierte Zeit.

    Das Ansehen der Seite ist leider ein wenig problematisch, da der Zugang aus datenschutzrechlicher Sicht nur einem bestimmten Nutzerkreis zur Verfügung gestellt werden darf.

    Grundsätzlich hatte ich vermutet, dass die Problematik der unscharfen PNG auch in anderen Präsenzen thematisiert wurde.

    Ich habe am gestrigen Tag nochmal das SVG Thema in Angriff genommen, da die lesbaren Schaubilder im SVG Format einfach bestens adaptieren.

    Durch einen einfachen Test konnte ich feststellen, dass ein SVG, entgegen meiner ersten irrigen Annahme völlig problemlos in jedem Browser dargestellt werden kann.

    Die Schwierigkeit besteht durch ein anderes installiertes Plugin (Collapse-O-Matic).

    Ich habe dazu einen eigenständigen Thread verfasst.

    Expander und SVG Probleme

    Vielen Dank zunächst für die Mühe. Letztendlich würde mich natürlich schon sehr interessieren, weshalb die PNG unscharf dargestellt werden, aber ohne einen Einblick wird das sicherlich schwer beantworten zu sein.

    mit freundlichen Grüßen

  • wenn du das .png sagen wir 400x400 einfügst und der Expander es aber in 300x300 umändert, dann wirds unscharf meist
    oder auch umgekehrt, du fügst es 300x300 ein und der Expander macht es größer

    es kann sein, dass dieser Expander die Bildgröße via CSS verändert=> das ist immer ein "Unschärfefaktor"

    das wäre denkbar und daher möglich,ob es wirklich so ist kann ich aus der Ferne nicht "sehen".

    kontrollieren kann man es mit ansehen des Quellcodes und dem Vergleichen der etwaig vorhandenen CSS Datei des Expanders oder // und eines Scriptes.

    oder du machst einen beinhart einen Screenshot von dem unscharfen Bild, misst es in einem Bildbearbeitungsprogramm aus und vergleichst welche Bildgröße im Quelltext steht
    => Bild markieren, rechte Maustaste => Auswahlquelltext ansehen => oder wie dies auch immer dein Browser dir anbietet.

Jetzt mitmachen!

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