Warum sieht mein Logo oder meine Grafik im Web so schrecklich aus?

von Monika Gause

Warum sieht mein Logo oder meine Grafik im Web so schrecklich aus?

Wenn man in Illustrator an einer Grafik arbeitet, dann ist sie immer scharf und man kann (fast) unendlich hineinzoomen, um sich jedes Detail genau anzusehen. In der Dialogbox »Für Web speichern« oder beim Ansehen einer exportierten Datei im Browser sind all die schönen Details dann weg. Stattdessen: Pixeltreppchen und unscharfe Ränder bis hin zur Unlesbarkeit. Warum ist das so?

Konvertierung in Pixel

Für sehr viele Anwendungen werden immer noch JPEG, PNG oder GIF verwendet. Das sind keine vektorbasierten Dateiformate, auch wenn sie aus Illustrator gespeichert werden. Vektorbasierte Dateiformate werden erst in dem Moment in Pixel umgerechnet, in dem sie ausgegeben werden – entweder auf einem Drucker oder am Bildschirm. In diesem Moment werden sie immer in der höchstmöglich vom Ausgabeprozess oder -gerät unterstützten Auflösung dargestellt. Das ermöglicht eine optimale Schärfe.

Wenn Du dagegen eine Datei in ein Pixelformat exportierst, bestimmst Du zum Zeitpunkt des Exports die Pixeldimensionen, in die die Vektorzeichnung umgerechnet wird. Da im Web die Bandbreite immer noch eine große Rolle spielt – vor allem für Mobilgeräte und die dazugehörigen Mobilfunkverträge – wird die Auflösung in der Regel nur so hoch gesetzt, wie gerade nötig, um die Datenmenge zu begrenzen.

Dateiformat nicht passend: JPEG statt PNG oder GIF

Auch die Dateiformate spielen eine Rolle. Um die Datenmenge zu begrenzen, wurden unterschiedliche Methoden der Reduzierung eingesetzt, die jeweils für bestimmte Arten von Grafik geeignet sind.

  • Die JPEG-Komprimierung ist eine eher für Fotos geeignete Kompression, die jeweils Mittelwerte aus Pixelbereichen berechnet und dabei weichzeichnet. Für Logos, deren Kanten scharf bleiben sollen, ist das nicht geeignet, sind viele Verläufe in der Grafik, dann ist JPEG dennoch häufig eine gute Wahl.
  • GIF dagegen begrenzt den Umfang der Farbpalette eines Bildes, was Logos mit ihren ohnehin wenigen Farben entgegenkommt. Aber nicht, wenn Verläufe enthalten sind.

  • PNG gibt es in verschiedenen Ausführungen, mit einem PNG-24 haben Sie einen guten Mittelweg zwischen JPEG und GIF für Ihre Logos, allerdings sind sie größer als JPEGs.

Stark komprimiertes JPEG (links) und stark komprimiertes GIF (rechts) – beide Ergebnisse ließen sich mit nicht ganz so extremen Einstellungen verbessern.

Falsches Format für transparente Grafik

Wenn die Grafik freigestellt werden soll, dann können Sie dies mit GIF und PNG umsetzen. Beide nehmen diese Freistellung aber unterschiedlich vor.

PNG setzt eine Alphamaske ein – damit kann die Grafik auf beliebigen Hintergründen verwendet werden.

GIF dagegen kann nur einzelne Pixel auf unsichtbar stellen (nicht auf semitransparent). Eine Glättung der Kanten wird durch Umfärben der Kantenpixel im Verhältnis zu einer bestimmten Hintergrundfarbe simuliert. Ein so erzeugtes GIF kann damit nur auf der Hintergrundfarbe verwendet werden, für die es erzeugt wurde.

In ein transparentes GIF wird die definierte Hintergrundfarbe hineingerechnet. Diese Grafik kann nur auf leuchtend grünen Hintergründen eingesetzt werden.

Adaptive Grafik

Viele Websites sind so umgesetzt, dass sie sich unterschiedlich große Browserfenster anpassen, dabei werden auch eingebundene Bilder skaliert. Falls dabei eine Vergrößerung der Bilder vorgenommen wird, werden Pixeltreppchen sichtbar oder findet eine Weichzeichnung statt. Falls Sie eine Grafik für eine solche Website exportieren, dann muss das natürlich in der größtmöglichen Auflösung erfolgen, die vom Server ausgeliefert wird. Sprich diesen Fall mit den Entwicklern ab.

SVG-Fehler

SVG ist zwar ein vektorbasiertes Dateiformat und wird inzwischen auch von den meisten Browsern unterstützt, allerdings kann bei seiner Erstellung auch manches schiefgehen.

Auch SVG besitzt die Möglichkeit einer Komprimierung, diese wird ausgeführt durch die Reduktion der Nachkommastellen, die für Positionsangaben von Punkten und Griffen gebraucht werden. Natürlich entsteht auch dadurch Ungenauigkeit.

Schriften in Grafik können auf unterschiedlichste Arten behandelt werden, vom Einsatz der zufällig auf dem System des Betrachters installierten Schriften über eingebettete oder Web-Fonts bis hin zur Umwandlung in Pfade. Alle diese Methoden haben Vor- und Nachteile und müssen gegeneinander abgewogen werden.

SVG-Optionen für Schriften

Zuviel Detail für die vorhandenen Pixel

Eine Linie oder eine Lücke in einem Logo muss mindestens einen Pixel breit sein, um scharf dargestellt zu werden. Sind zu wenige Pixel vorhanden, dann müssen mehrere Linien auf einen Pixel reduziert werden. Dabei wird ein Mischwert zwischen deren Farben gebildet und das vorher vorhandene Detail ist weg.

Nicht ausreichende Anzahl von Pixeln in der Breite für die Striche und Abstände im Text – sollten auch noch die Serifen angemessen dargestellt werden, müsste die Pixeldimension noch größer gewählt werden.

Nicht passend im Pixelraster

Selbst wenn ausreichend Pixel eingeplant sind, müssen die Pfade optimal darauf liegen, damit eine randscharfe Umrechnung stattfinden kann. Die Funktion An Pixelraster ausrichten ist dafür gedacht, Objekte so auszurichten, dass sie ins Pixelraster fallen. Leider macht sie dabei auch viel kaputt.

Achte daher beim Erstellen von Icons, Webdesigns, Screendesigns und Logos für das Web auf das Pixelraster und wende bei Bedarf An Pixel ausrichten und An Pixelraster ausrichten an.

In Illustrator kannst Du Dir ansehen, wie die Grafik ins Pixelraster fällt, indem Du die Pixelvorschau aktivierst.

Auch die Zeichenfläche muss exakt im Pixelraster liegen und natürlich ganzzahlige Pixelmaße aufweisen. Bei einer Neuberechnung können nur ganzzahlige Pixeldimensionen erzeugt werden.

Vor (links) und nach dem Einpassen ins Pixelraster (rechts)

Unterschiedliche Berechnungen in Illustrator und Photoshop

Selbst auf die Software kannst Du Dich nicht verlassen. Photoshop und Illustrator erzeugen unterschiedliche Ergebnisse beim Berechnen von Rundungen oder Schrägen. Und natürlich lassen sich einige Winkelungen von Schrägen – z.B. 45° – besser ins Pixelraster übersetzen als andere.

Schriftoptimierung vs Grafikoptimierung

Schrift kann noch einmal besonders behandelt werden. Zum Einen kannst Du im Zeichen-Bedienfeld unterschiedliche Glättungsmethoden anwenden …

Auswahl der Glättungsmethode für Textobjekte

… und im Bedienfeldmenü eine Option aktivieren, die die Senkrechten besser ins Pixelraster legt.

Auswahl der Einstellung Systemlayout. Unten: Vergleich Gebrochene Breiten (links) und Systemlayout (rechts)

Zum anderen gibt es beim Export noch die Wahl der Berechnungsmethode Bildmaterial-optimiert und Schrift-Optimiert. Vor allem, wenn in Deiner Grafik Muster sind oder Du Live-Objekte (wie interaktive Malgruppen) in Pixel umwandelst, kann die Wahl der passenden Methode einiges ausmachen. So ist in der Regel die Methode Bildmaterial optimiert erfolgreich beim Unterdrücken der feinen Linien in der Bildschirmdarstellung von Mustern.

Auswahl der Optimierung in der Dialogbox Für Web speichern

Die Farben passen gar nicht

Am Bildschirm arbeitest Du mit RGB-Bildern – viele Browser können CMYK überhaupt nicht darstellen –, Logos werden in der Regel zunächst als CMYK-Grafik angelegt. Beim Speichern als GIF oder PNG erfolgt immer eine Konvertierung in den Farbmodus RGB. Beim Speichern eines JPEG kommt es drauf an, welchen Exportbefehl Du verwendest.

Findet die automatische Konvertierung statt, dann erkennst Du Deine Farben unter Umständen nicht wieder. Das Farbmanagement muss dabei passend eingerichtet sein. Aber selbst mit Farbmanagement kommen vielleicht nicht die Werte heraus, die Deinen Vorstellungen entsprechen.

Damit bei dieser Konvertierung aus 100-K-Schwarz auch das tiefste RGB-Schwarz wird, musst Du in den Voreinstellungen → Aussehen von Schwarz die Option Alle Schwarztöne als Tiefschwarz ausgeben aktivieren.

Du solltest jedoch die Farbkonvertierung lieber manuell durchführen und optimieren. Dazu erstelle eine Kopie der Datei und konvertiere sie mit Datei → Dokumentfarbmodus → RGB. Überprüfe sowie korrigiere anschließend jede verwendete Farbe.

Online-Dienste und eigene Komprimierung

Wenn Du Deine Bilder auf Facebook und ähnliche Dienste lädst, dann gibst Du die Kontrolle ebenfalls aus der Hand, denn es findet eine Neukomprimierung statt. Dazu finden Du hier bei uns einen längeren Beitrag.

Zurück