Moin,

ich habe hier ein Problem mit den Versand-Icons auf meiner Checkout-Seite. Auch mein Webdesginer hat keine Idee, was das Problem veruracht.

https://ibb.co/xsp25bc

https://www.interaquaristik.de/checkout

Diese Icons werden bei der Ansicht auf meinem Laptop völlig verwaschen dargestellt in Chrome. Auf dem Handy sind sie gestochen scharf, im Firefox auch. Wir sitzen seit Stunden daran, haben alle möglichen Größen und Formate ausprobiert, es ändert sich nichts.

Bei meinem Webdesigner wird auf dem PC angelich alles scharf dargestellt.

Kann echt nicht wahr sein. Hat jemand eine Idee?

MfG
Oliver

Hallo, die Lösung ist ganz einfach:

Ihr verwendet eine 300x300 px Grafik in einem Kasten, der 50x50 px ist.

Der Browser auf dem PC muss die Grafik herunterskalieren, denn 300 pixel auf einem 19" Full HD Display wären gigantisch. Verschiedene Browser benutzen verschiedene Methoden dazu, daher kann es eben Qualitätsunterschiede geben.
Im vergleich dazu haben die meisten Smartphones auch ein Full HD Display, das jedoch nur 6-7" hat - somit kann der mobile Browser das Bild gestochen scharf in voller Auflösung anzeigen.

Ihr müsst also auf der Desktop-Seite ein Logo in 50x50 px anzeigen, auf der mobilen kann das bleiben.

Danke, jetzt sieht es besser aus. Bis man es etwas größer zoomt. Dann wird es verwaschen.

Mobil sieht es jetzt schlecht aus. Ich habe keine Möglichkeit, für mobil und Desktop unterschiedliche Icons einzusetzen.

Versuch es mal mit SVG-Dateien. Die können verlustfrei skaliert werden. eBay z.B. macht das so:
Klein: Gross: Sieht beides gut aus, und verlinkt ist die selbe Datei: https://ir.ebaystatic.com/cr/v/c1/eBayP ... -58x15.svg

Es kann eventuell problematisch werden, Logos aller Kurierfirmen als solches Format zu bekommen.

Ansonsten machen es viele Shops so (vor allem mit Produktfotos, die man nicht als SVG hat), dass es ein Plugin/Modul gibt, dass je nach Bildschirmgrösse/Zoomlevel automatisch eine passende Datei dynamisch einsetzt (per Javascript). Vielleicht gibt es sowas für dein Shopsystem ja.

Komischer Weise werden aber das DHL und UPS Icon ordentlich dargestellt, obwohl die auch weentlich größer hinterlegt sind als 50x50 px. Nur das GO-Icon fällt aus dem Rahmen.

Das GO Logo hat auch wesentlich schärfere Kante/Details. Vor allem der Schriftzug darunter ist winzig. Im DHL Logo verblendet das rote mit dem gelben beim skalieren, bei GO geht das aufgrund des weissen Hintergrundes nicht.

Ok, herzlichen Dank für deine Hilfe. Ich habe jetzt einfach ein anderes Icon eingebunden. Ich denke, das funktioniert etwas besser.

mach den Designer glücklich und ändere das Logo. Nur den Fisch und die Krabbe und ohne Schriftzug, weg vom langgezogenem Logo.