von Monika Gause

Warum sieht mein Logo im Web und auf Facebook so furchtbar aus?

Bildqualität im Web wird durch viele Faktoren beeinflusst. Neben den eigentlichen Einstellungen beim Speichern eines Bilds können noch ganz andere Spieler das Bild verändern. Als Designer muss man sich mit der kompletten Technik beschäftigen, um die Ergebnisse beurteilen zu können.

Auch ungefähr 20 Jahre nach der Einführung von SVG haben im Web Rasterdatenformate die Oberhand. Für Sie bedeutet das, dass die exportierten Daten nicht mehr frei skalierbar sind oder Sie nicht unendlich weit hineinzoomen können.

Stattdessen werden Ihre Vektorgrafiken in einer fest definierten Größe in Pixel umgerechnet und sind damit festgelegt. Verkleinern ist kein Problem, beim Vergrößern sehen Sie die typischen Treppchen.

Wenn Sie Ihr Bild ins Web laden, kann darüber hinaus noch Weiteres passieren, das nicht mehr in Ihrem Einflussbereich liegt und das Sie zum Teil nur mittelbar steuern können.

Facebook und andere Social-Media-Dienste

Facebook muss viele Millionen Bilddaten speichern und natürlich an Besucher ausliefern. Um Platz zu sparen, werden daher ebenfalls Bilder komprimiert und gegebenenfalls in JPEG umgespeichert. Dies geschieht beim Upload Ihrer Bilder auf die Plattform.

Lesen Sie die Hilfedokumente und FAQs der jeweiligen Plattform. Falls diese Bilder erneut komprimieren, hat wahrscheinlich bereits jemand die Frage nach den furchtbaren Bildern gestellt und die Plattform gibt Tipps, wie das umgangen werden kann.

Bei Facebook wird z.B. empfohlen,

  • Bilder möglichst in PNG24 zu speichern,
  • sich an bestimmte Pixeldimensionen halten und
  • darauf zuachten, dass die Dateigröße unter 100 KB bleibt.

Bild: Ein GIF (links) und ein PNG (rechts) wurden auf Facebook geladen und die Resultate wieder heruntergeladen. Auch wenn das GIF mit 33 KB nur etwas mehr als halb so groß wie das PNG war, wurde es in ein JPEG umgespeichert und dabei komprimiert. Es entstehen die typischen Artefakte. Das PNG wurde nicht verändert.

Darstellung auf Retina-Systemen

Normalerweise kümmern sich Browser nicht um die Bildauflösung, sondern stellen Bilder in ihren Pixelmaßen dar. Verwendet man nun ein System mit einer doppelt so hohen Auflösung wie die üblichen Systeme, dann würde dieses Verhalten dazu führen, dass die Bilder auf einer Website nur halb so groß sind und damit das Layout sehr merkwürdig aussehen würde.

Systeme mit einer höheren Auflösung wie etwa Apples Retina stellen Bilder aus dem Web daher vergrößert dar, sofern diese Bilder noch nicht für die höhere Auflösung aufbereitet sind und mit entsprechenden Webtechnologien ausgeliefert werden. Je nachdem, welches Programm oder welchen Browser Sie verwenden, kann dies unterschiedliche Darstellungsprobleme verursachen.

Mobilfunkdienste

Einige Mobilfunkbetreiber komprimieren Daten, bevor sie diese an Ihr Gerät ausliefern. Das betrifft vielleicht nur einige Betrachter Ihrer Website, kann Ihnen jedoch auch selbst passieren, wenn Sie eine Überprüfung durchführen. Gegebenenfalls haben Sie einen Einfluss auf diese Komprimierung in den Einstellungen Ihres eigenen Benutzerkontos, bei Vodafone z.B. mit dem Performance Manager. Sie haben jedoch keinen Einfluss auf die Auslieferung der Daten an Besucher Ihrer Website.

Tipps für das Design und den Export von Bildern aus Illustrator

Beim Design von Elementen für das Web arbeiten Sie am besten bereits frühzeitig in der Pixelvorschau und in der endgültigen Größe in Pixeldimensionen. So sehen Sie genau, wie Ihr Design später wirken wird.

Achten Sie darauf, horizontale und vertikale Linien am Pixelraster auszurichten, damit sie randscharf sind. Der Export erfolgt über die Funktion Für Web speichern.

Wählen Sie ein zum Inhalt passendes Dateiformat. Für Facebook PNG, für andere Bereiche kann je nach dem Design auch ein GIF oder ein JPEG angemessen sein.

Zurück