Also ließ ich einen Designer von 99Designs ein Logo für mich erstellen, es ist Vector, und er hat die Logogröße generiert, die Sie auf meiner Website hier sehen können: sandiegosoftware.net
Ich verstehe, dass mein Browser, Betriebssystem und die Auflösung meines Monitors das Aussehen beeinflussen können, aber es sieht für mich einfach nicht sehr scharf aus. Er scheint ein guter Designer zu sein, gibt es Bereiche wie Anti-Aliasing, die er verbessern könnte?
Es ist ein dynamischer Bildsatz, dessen Größe basierend auf der Größe des Browserfensters angepasst wird. Einige Größen sehen schlecht aus. Das Festlegen einer bestimmten Größe für das Bild (und dann das Anpassen der Site-CSS-Medienabfragen, um andere Größen für andere Bildschirme aufzurufen) würde es besser verarbeiten.
Die meisten Website-Logos werden nicht skaliert, wenn sich die Größe des Browserfensters ändert. Während diese Theorie für die meisten Bilder wunderbar funktioniert, ist das Logo von größerer Bedeutung und sollte speziell gehandhabt werden.
Erstens wird, wie einige andere bereits erwähnt haben, das Logobild in einer anderen Größe als seiner tatsächlichen Größe angezeigt. Dadurch bleibt es dem Browser überlassen, das Sub/Supersampling durchzuführen, das zum Ändern der Größe eines Bildes erforderlich ist, und Browser sind darin nicht großartig.
Außerdem sieht es so aus, als ob die von Ihnen verwendete Logodatei tatsächlich etwas unscharf ist. PNG ist hier ein gutes Format, aber der Designer kann Ihnen möglicherweise eine schärfere Version liefern, indem er mit anderen Antialiasing-Einstellungen exportiert. Zum Beispiel in Illustrator „Type Optimized (Hinted)“ statt „Art Optimized (Supersampling)“ im Dialogfeld „PNG-Exportoptionen“.
Während er Ihnen eine gestochen scharfe Version beschafft, lassen Sie ihn sie in den genauen Abmessungen exportieren, in denen Sie sie verwenden möchten. Sieht so aus, als ob der Browser versucht, das 385 Pixel breite Bild mit einer Breite von 333,719 Pixeln anzuzeigen. Wenn er Ihnen einen mit einer Breite von 333 Pixeln gegeben hätte, wäre er schärfer – diese partiellen Pixel verursachen jedoch immer noch Probleme, da dem Browser erneut vertraut wird, dass er Hinweise ausführt die Größen für die responsiven Logos).
Es sieht für mich ziemlich knackig aus, aber es sieht tatsächlich leicht gequetscht aus. Vielleicht stimmen die Abmessungen des vom Designer erstellten Originalbildes nicht mit denen überein (z. B. 1000 x 1000 --> 2000 x 2000), wie Sie es auf Ihrer Website anzeigen?
Alternativ können Sie anstelle von PNG oder JPG ein SVG mit 385 x 105 verwenden. SVGs sind auflösungsunabhängig – was bedeutet, dass Sie sich keine Gedanken über diesen „wird mein Logo auf jedem Bildschirm gut aussehen“-Zeug machen müssen. Und oft ist ein SVG leichter als ein JPG oder PNG. UND SVG spielen sehr gut mit Medienabfragen.
Brian Ogden